HTML and CSS Reference
In-Depth Information
CSS
TA B L E S
MAGIC
In media-blitz-3-with-media-queries.html, when the first media query kicks in, the navigation menu moves
to the bottom of the screen. This is the result of the following two rulesets:
body {
: ;
: ;
: ;
}
nav {
: ;
: ;
}
The table-related properties are part of CSS2. They were created to allow web developers to lay out groups
of elements with a tabular structure without abusing table markup. An obvious application of CSS tables
is to lay out forms in an easier fashion (see the file form_csstables.html in the chapter8 code download
folder). This is basically achieved using markup like this:
<ul>
>
.
</ul>
and CSS like this:
li {
;
}
label {
;
}
The technique I've used in my media query example is the only known way to move the position of a child
element from side to top to bottom reliably without changing the source order. It is a useful technique to
keep in mind, although bear in mind that these properties don't work in IE7 and earlier.
