HTML and CSS Reference
In-Depth Information
Figure 6-17.
Changing the display property of the labels results in a clean form layout
Setting the
display
property for the last two labels to
block
forces them to display on a separate line. As a
result, the
<select>
menu and
<textarea>
are vertically aligned with their labels rather than with the text
input fields. i think this looks fine, but you could add a left margin to both elements if you prefer. Examine the
style rule commented out at the bottom of form.css if you're not sure how to do it.
This exercise has used type, descendant, and attribute selectors, avoiding the need for classes or ids in
the HTMl markup. The styles are rendered correctly in all browsers, except iE 6, which doesn't understand
attribute selectors. if you need to support iE 6, use classes in place of attribute selectors.
Using the display Property to Hide Elements
Setting the
display
property to
none
hides the affected element and all its children in a visual browser.
The elements remain in the underlying HTML source, but they're removed completely from the flow of the
document, and any subsequent elements move up to take their place. Hiding content like this is commonly used
in conjunction with JavaScript in interactive widgets, such as accordions and tabbed panels. When the user clicks
a trigger element, a JavaScript function changes the value of the
display
property to
block
, thereby revealing the
content. Such techniques are particularly useful in designs for mobile phones, where screen real estate is limited.
The HTML in display4.html in the ch06 folder contains three paragraphs. The styles contain two classes:
hide
, which sets the
display
property to
none
, and
show
, which sets the
display
property to
block
. When the
page loads, a JavaScript function runs automatically and applies the
show
class to the second paragraph, and adds
a link at the end of the first paragraph, as shown in Figure
6-18
.
