- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 2575
@media only screen and (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1024px) { #map-canvas { position: relative; width: 100%; height: 50%; float: left; } #thumbnails { width: 100%; height: 50%; float: left; overflow: auto; } } @media only screen and (min-device-width: 768px) { #map-canvas { position: relative; width: 50%; height: 100%; float: left; } #thumbnails { width: 50%; height: 100%; float: left; overflow: auto; } }
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4611
Just a short reminder to myself, copy / paste from here:
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4568
Title (and content) of the article I stole from this web site.
From that same web site copy / paste of the key sentence:
HTML layout traditionally was not designed to specify vertical behavior
To have properly working vertical alignment, in my case, I had to introduce a table, this is my HTML:
<div style="height: 800px" class="detail-control"> <table style="height:100%"> <tbody> <tr> <td> <img style="vertical-align: middle" border="0" alt="Please press the play button." onerror="this.src='path to image to be displayed if original one is not found'" src="/URL of an image"> </td> </tr> </tbody> </table> </div>
Notice height of div (800px for the sake of testing), and height of table (100% to cover whole div), then in img tag note style.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 3935
This time I was combining id's and classes. This is my HTML:
<div id="article" class="l-fixed"> Article </div>
CSS:
#article { width: 80%; float: left; border: 2px solid black; } .l-fixed#article { width: 600px; }
Notice that there is no space in selectors:
.l-fixed#article
Like this we can add class on the same element with id, otherwise, with space:
#article { width: 80%; float: left; border: 2px solid black; } .l-fixed #article { width: 600px; }
I would need nested element, something like:
<div class="l-fixed"> <div id="article"> Article </div> </div>