Details
Category: CSS
Hits: 2303
Here I already gave one example of responsive table. Now I needed to display thumbnails on the right side for bigger screens (desktops) and for smaller screens (mobiles) to display them under the map. So here is my example: 
@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
Category: CSS
Hits: 4324

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
Category: CSS
Hits: 4274

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
Category: CSS
Hits: 3652

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>
  1. Simple drop down menu
  2. How to find default font size
  3. em's and rem's
  4. More about selectors

Subcategories

CSS3

Page 1 of 8