User:Bartlett/16
./ ADD NAME=CH16.HTML
Hour 16. Borders and Boxes
What You'll Learn in This Hour:
Within the CSS visual formatting model, all HTML elements are displayed as either inline boxes or block boxes. Property values in CSS rules affect the way these boxes are displayed by applying the styles to the content of each box. You learned about the box model in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch06.html#ch06 Hour 6], "The CSS Box Model," and how you can use the margin, padding, and border properties to affect how a box is displayed. Those core properties enable you to manipulate the edges of the box itself, from the space around the content, to the border around the box, and finally to the space surrounding the content of the box. |
./ ADD NAME=CH16LEV1SEC1.HTML
Adjusting Boxes
As you've seen before, CSS browsers view all web pages as a series of nested boxes. Block boxes contain inline boxes or other block boxes; inline boxes contain content, usually text. Styles are applied on a box-by-box basis, using selectors that identify boxes or groups of boxes.
Each of these boxes consists of the inside of the box, which is where you can find the content or any child boxes, and the edgethe margin, border, and padding. As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch06.html#ch06 Hour 6], you can adjust these by using properties known as the edge properties. You use the margin property to set the blank space just within the limits of the box; the border property to set a line surrounding the content, within the margin; and the padding property to add spacing between the content and the other edge properties.
Changing these properties lets you affect the appearance and placement of a display box so that you can better control how your content is shown to the web user.
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch06.html#ch06 Hour 6] when I introduced the margin, padding, and border properties, I didn't mention that they are actually shorthand properties, as are the font and background properties. A shorthand property is one that sets several properties at once, first resetting them to their default values (as defined by the W3C specification) and then setting individual values as given in the declaration. Each of the edge shorthand properties sets the edge characteristics of all four sides of the box.
A box in the CSS has four sides: top, bottom, left, and right. The edge properties for each side are displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16fig01 Figure 16.1].
File:16fig01.jpg
Edge properties for each side enable you either to set the margin, padding, and border separately for every side or to set several at once with a shorthand property. When using a shorthand property, you can specify between one and four values; the results of these values are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table01 Table 16.1].
| Shorthand Values | Effect |
| value | Sets all four properties to the same value |
| value1 value2 | Set the top and bottom properties to value1 and the right and left properties to value2 |
| value1 value2 value3 | Set the top property to value1, the right and left properties to value2, and the bottom property to value3 |
| value1 value2 value3 value4 | Set properties in clockwise order: top, right, bottom, left |
Values can also be set with individual properties, such as margin-left or padding-bottom. A shorthand value always sets all appropriate values; no sides are left unset, even if less than four values are specified.
Setting the Margins
Take a look at setting the margins first. You can set all the margins to a single value with the margin property, like this:
#content p { margin: 3em; }
This would put a margin space of 3 ems around any paragraphs identified by this selector. Remember that vertical margins collapse, so the nearest vertical content will be 3 ems away, unless the other content has a greater margin.
When collapsing margins, you compare the bottom margin of the first box to the top margin of the second. If both are positive, the distance is the greater of the two; if one is negative, the distance is the difference between them. If both vertical margins are negative, the distance between the boxes is the largest negative value. Negative distances mean overlapping display boxes, which is allowable in CSS, albeit often confusing.
Imagine that you want to set just the horizontal margins. Here are four ways to do that:
#content p { margin-left: 3em;
margin-right: 3em; }
#content p { margin: 0em 3em; }
#content p { margin: 0em 3em 0em; }
#content p { margin: 0em 3em 0em 3em; }
All these rules are identical in effect; they set the right and left margins to 3 ems.
Margin values are not inherited; unless otherwise set, a box's margin will be zero. The types of values you can set for margins are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table02 Table 16.2].
| Value | Effect |
| measurement | Set the margin(s) to a specified size. |
| negative measurement | Reduce the margin(s) of touching boxes by a specified size. |
| percentage | Set the margin(s) to a percentage of the containing box's width. |
| auto | Automatically calculate the margin(s). |
| inherit | Use the margin value(s) of the containing box. |
The value auto requires some explanation. If it is set on an inline element's margins, the value is calculated to 0. If set on a box element's left margin or right margin, the margin is set to be all remaining space within the containing box; this will move the box with the margin to one side or another. If both the left and right margins are set to auto, the box will be centered within its containing box. A value of auto for a top or bottom margin has no effect.
Setting the Padding
Setting values for padding in CSS is simpler than setting margin values because there are no auto values and no negative measurements. The only values for padding are measurements and percentages.
Percentage values for padding, such as margin percentages, are based on the containing box's width, even for the top and bottom padding properties.
Here are four different ways to set the top padding to 4 pixels, the left and right padding to 0 pixels, and the bottom padding to 8 pixels:
#content p { padding-top: 4px;
padding-bottom: 8px; }
#content p { padding: 4px 0px 8px; }
#content p { padding: 4px 0px 8px 0px; }
#content p { padding: 4px 0px;
padding-bottom: 8px; }
Note that in the last rule, the padding-bottom was set twice, once as part of the padding shorthand rule, to 4px, and later separately to 8px. Because the second rule comes later (and all other priority factors are the same), the bottom padding will be 8 pixels.
Setting the Border
Borders in CSS have three distinct values associated with them: the width, or thickness of the border; the color of the border; and the style, or type of line drawn. With four sides, that means that there are actually 12 properties associated with the borders: the width, color, and style for top, bottom, left, and right. Each is written as border-side-property, such as border-left-style or border-bottom-color.
The border shorthand property sets all 12 of these properties at once. Using the border property, you'd write a rule like this:
#nav div { border: solid purple 3px; }
This defines the border as a solid purple line that is 3 pixels wide. This is the same as the following rule:
#nav div { border-top-style: solid;
border-top-color: purple;
border-top-width: 3px;
border-right-style: solid;
border-right-color: purple;
border-right-width: 3px;
border-bottom-style: solid;
border-bottom-color: purple;
border-bottom-width: 3px;
border-left-style: solid;
border-left-color: purple;
border-left-width: 3px; }
Unlike margin and width, you can't set one to four different values for each side's border using the border shorthand property; instead, you can use one shorthand property per side, as in the following:
#nav div { border-left: 1em solid green;
border-right: 2em dashed blue;
border-top: 1.5em dotted red;
border-bottom: 0.5em solid purple; }
Alternately, you can use other shorthand properties to set all the border-width, border-color, and border-style values at once. You also can set the 12 border-style properties individually or combine these approaches, using normal CSS cascading rules to resolve priorities.
Border Width
The thickness of the border is set by a border-width value; possible values are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table03 Table 16.3]. If no border-width value is specified in a shorthand property, the default is medium. For a border to be displayed at all, the border-width value for each side must be set to something, even if it's simply set to the default with a shorthand property.
| Value | Effect |
| medium | Sets a medium thickness border |
| thick | Sets a thick border |
| thin | Sets a thin border |
| measurement | Sets a border as wide as the specified measurement |
| inherit | Uses the inherited border-width value of the containing box |
The values thin, medium, and thick are relative values whose exact measurements are left up to the browser. The browser can determine the precise thickness however it likes, though within certain constraints; thin can't be thicker than medium, thick can't be thinner than medium, and when displaying a page, all borders of a given thickness must be the same width. One browser's interpretation of these values is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16fig02 Figure 16.2].
File:16fig02.jpg
The thickness of each side's border doesn't have to be the same; each can be set to a different value if you like. To set different thicknesses, you can either use multiple values with the border-width shorthand property, or use the border-width property for each side. Here are some examples:
#nav div { border-width: 3px 2px 3px 4px; }
#nav div { border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px; }
#nav div { border-width: 3px 4px;
border-right: 2px; }
These all set the same effect: a top border of 3 pixels, a right border of 2 pixels, a bottom border of 3 pixels, and a left border of 4 pixels.
Border values that are measurements based on ems are calculated based on the size of the text for that box. For example, if you have the following rules in your style sheet:
body { font-size: 30px; }
.sidebar { font-size: 50%; border: 0.2em; }
Border Color
The color of all borders can be set at once with the border-color shorthand property or set individually with the border-top-color, border-right-color, border-bottom-color, and border-left-color properties. If no color is specified, the default color value will be the foreground text color set by the color attribute.
You can specify the border color as you would any other colors in CSS: by RGB hex values, numeric values, or percentages, or by color name. Examples of setting border color are
#nav div { border-color: red white blue; }
#nav div { border-top-color: red;
border-right-color: white;
border-bottom-color: blue;
border-left-color: white; }
Border Style
The line appearance of the border is determined by the border-style properties: border-top-style, border-right-style, border-bottom-style, and border-left-style. These can be set with the border shorthand property or with the border-style shorthand property that sets the style for all four of the borders.
Valid border types are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table04 Table 16.4]. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch06.html#ch06 Hour 6] introduced the solid, dashed, and dotted values. This hour adds the three-dimensional border values groove, ridge, inset, and outset, as well as the hidden and double values.
| Value | Effect |
| dashed | A dashed border |
| dotted | A dotted border |
| double | A solid double line border |
| groove | The border appears to be carved into the page |
| hidden | No border displayed; borders collapsed in tables |
| inset | The entire box appears to be carved into the page |
| none | No border displayed |
| outset | The entire box appears to rise up from the page |
| ridge | The border appears to rise up from the page |
| solid | A solid single line border |
| inherit | Use the value of the border-style from the containing box |
The none and hidden values are identicalno border is displayedexcept in table styles. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17.html#ch17 Hour 17] you'll learn more about collapsing borders for table cells.
The exact rendition of each border style is left up to the browser implementation, constrained by the definitions of each style; obviously, a dashed border should be made up of dashed lines. Examples of each type of border are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16fig03 Figure 16.3].
File:16fig03.jpg
Not all browsers support all border styles; in fact, the CSS specifications explicitly allow them to opt out certain border styles. Browsers that don't display all border styles can instead choose to show them as solid. However, the styles listed here are currently supported by all modern browsers.
./ ADD NAME=CH16LEV1SEC2.HTML Displaying Boxes
In addition to changing the properties of the box edge, you can also set certain boxes to not be displayed at all or to display differently. The properties controlling this are the display and visibility properties.
Why wouldn't you want a box to display? Well, in most cases you'll want them to show up; this is why they're in the page content, after all. However, you may want to hide a display box if that content is inappropriate for the type of output medium being used. For example, a navigation bar may not make sense on the printed page because you obviously can't click on paper. The display and visibility properties are also useful with JavaScript to produce Dynamic HTML effects.
The display Property
As you've seen before, you can use the display property to change a box from a block element to an inline element or vice versa; you can also use it to make something display as a list item. In general, you'll want to avoid overriding the default display rules for HTML in browsers; there are too many things that can get confused if you do this, such as the default margins on certain elements. However, setting the display property is very useful when you're dealing with XML, as you'll learn in Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "CSS and XML" (on the book's website).
There are going to be some times when you're going to want to use the display property with HTML, especially if you need to hide some content. The values you can assign to display are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table05 Table 16.5].
| Value | Effect |
| block | Display as a block box |
| inline | Display as an inline box |
| inline-block | Display inline, as an inline box, but with the box's content displayed as if it were a block box |
| list-item | Display as a list item with list item marker |
| none | Don't display the box or its children boxes |
| run-in | Display as a run-in box |
| inherit | Use the display value of the containing box |
In addition to the values listed here, there are several values for display that apply only to tables, such as inline-table or table-row-group; these are covered in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17.html#ch17 Hour 17].
The inline-block property was introduced in CSS Level 2.1, and is a compromise between an inline box and a block box. For purposes of placing the inline-block box, it is treated as an inline element. However, inline elements usually contain only other inline boxes; the inline-block element contains block-level boxes.
Boxes with the display value run-in are displayed as either block or inline depending on context. A run-in box displays as a block element unless there's another block element (which isn't positioned with CSS positioning) after it as a sibling element, in which case it will become the first inline block of that subsequent block element.
Hiding Boxes with display: none
The value none means that any selected elements aren't displayed; their boxes (and the boxes of their children) don't even appear. This value technically isn't inherited, but if you set one box to display: none and then try to set one of its children to display: block (or display: inline), the inner box still doesn't appear.
The display property is a handy way to include messages for users with browsers that don't support CSS, such as Lynx. For example, if you're using a specific color to mark new entries, you can add some text explanations with display: none. Here is an example:
New books are marked in red<span class="hidden"> or with the word New</span>: <ul> <li><span class="hidden">New:</span> <span class="new">Teach Yourself CSS in 24 Hours</span> </li> </ul>
You'd then write CSS rules to support those classes, like this:
.hidden { display: none; }
.new { color: red; }
Styling Navigation Lists
A navigation bar on a web page is simply a list of linksa list in the normal English sense of the word list, not the HTML meaning with
- and
- tags. Or is it?
Most navigation bars don't need list markers, such as bullets or numbers. Furthermore, many navigation bars are horizontal, whereas lists are vertical. So at first glance, an HTML list built with
- would seem inappropriate for navigation.
However, you can use the display property to change the way these lists are displayed. Consider the following HTML, which contains a navigation list:
- elements. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16fig04 Figure 16.4] displays the same navigation list three timesthe identical HTML, but styled to be a vertical navigation bar and a horizontal navigation bar.
Figure 16.4. A navigation list restyled to navigation bars. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/16fig04_alt.jpg [View full size image]]File:16fig04.jpgTry it Yourself: Create Graphics-Free Navigation Buttons The border properties can be used in conjunction with color, background-color, and font properties to create "buttons" that look like graphics but are really HTML tags with styles applied. Here are some ideas you could try for practice:
1.Use a simple HTML list to create a menu bar. Add this to a web page as a navigation bar, using either tables for layout or CSS-based layouts (described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20], "Page Layout in CSS").2.Add style rules to change the navigation bar to be either vertical or horizontal, as fits your page. If you have two navigation barsand many pages willthen style one as horizontal and one as vertical.3.Set the font characteristics and size, the foreground and background colors, and the text-decoration on any links present.4.Draw a border around each list item, using an inset or outset border-style. This will make your button appear to stand out (or sink into) the page.5.Finally, change the border style to solid and try setting your own colors on each border to give a different three-dimensional effect. If you set the colors explicitly, you have more control over the resulting button's appearance. To make a button stand out from the page, use a light color on the top and left and a darker color on the right and bottom.The visibility Property
Both the visibility and display properties affect whether or not the element's display box is shown. The difference between the two is that visibility sets aside a place on the page for an undisplayed box, whereas display does not. The place where the box (and its contents) would normally be displayed is instead shown as a transparent box of the same size. The values for visibility are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16table06 Table 16.6].
Value Effect collapse Collapse only table cells; see [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17.html#ch17 Hour 17] hidden Don't display the box, but reserve the space in the layout visible Display the box normally inherit Use the visibility value of the containing box The visibility property is most useful in dynamic HTML and JavaScript, where you can interactively change the visibility of a box in response to user actions. For more on this, see Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch01.html#ch01 Hour 1] on the book's website.
./ ADD NAME=CH16LEV1SEC3.HTML Summary
Each side of a display box is named: top, right, bottom, and left. You can set the margins and padding space for each, using shorthand properties or individual properties. If you use shorthand properties and specify one value, it applies to all sides; two values assign the top/bottom and left/right; three designate top, left/right, and bottom; and four values set the properties in clockwise order.
There are also 12 properties that control the borders, and a number of shorthand properties exist to set them all in various combinations. The width, color, and line style of the borders can be set all at once, or they can be set individually for each side.
You can also control whether or not a box is displayed at all. To hide a box entirely, use the display: none value. If you want to reserve space for the box, but not actually show it or its content, use the visibility property with a value of hidden.
./ ADD NAME=CH16LEV1SEC4.HTML Workshop
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa1q1a1 Q.] How can I align a box with margin properties? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa1q1 A.] Here's how it works. First, don't use text-align unless you want the content of the box to be aligned. Instead, use margin-left and margin-right properties as shown here: .left { margin-right: auto; } /* align left */<br />.right { margin-left: auto; } /* align right */<br />.center { margin-right: auto;<br />margin-left: auto; } /* center */<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa1q2a2 Q.] I tried setting a black border that should be inset, groove, outset, or ridge, and it showed up as solid! What gives? > > [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa1q2 A.] When you set a border with those three-dimensional border types, you add the third dimension by adjusting the base color. The edges "facing the light" are colored lighter, and the edges "in shadow" are darker. The CSS specification doesn't say how to derive those colors, so browsers are free to use their own methods. If a browser decides that the light color is 20% brighter and the dark color is 20% darker, that works unless your color is less than 20% dark to begin with, like black (#000000)you can't actually make a darker version of #000000. If you want to be certain that your border colors appear properly three-dimensional, you should set the border style to solid and manually choose your own lighter and darker side colors, setting them individually on each side border. Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q1a1 1.] These two shorthand properties set the margin and padding. What are equivalent declarations that don't use shorthand properties, and instead use properties such as margin-left? #demo { margin: 0em 1em 1.5em;<br />padding: 5px 7px; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q2a2 2.] Likewise, these border shorthand properties can be written as 12 separate property value declarations. What are they? #demo2 { border: 3px groove black;<br />border-style: dashed dotted double solid;<br />border-left: medium inset green; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q3a3 3.] A box that looks like it's depressed into the page has been styled with which border line style? #border-style: emboss;- border-style: groove;
- border-style: inset;
- border-style: sunken;
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q4a4 4.] What's the difference between these two rules? .hide1 { visibility: hidden; }<br />.hide2 { display: none; }<br />
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q1 1.] The equivalent declarations are #demo { margin-top: 0em;<br />margin-right: 1em;<br />margin-bottom: 1.5em;<br />margin-left: 1em;<br />padding-top: 5px;<br />padding-right: 7px;<br />padding-bottom: 5px;<br />padding-left: 7px; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q2 2.] Here's how to write those rules as separate properties: #demo2 { border-top-width: 3px;<br />border-top-color: black;<br />border-top-style: dashed<br />border-right-width: 3px;<br />border-right-color: black;<br />border-right-style: dotted;<br />border-bottom-width: 3px;<br />border-bottom-color: black;<br />border-bottom-style: double;<br />border-left-width: medium;<br />border-left-color: green;<br />border-left-style: inset; }<br />
Aren't shorthand properties nicer?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q3 3.] The correct answer is (c), inset. The groove value makes the line appear carved but not the box itself, and there are no such values as emboss or sunken for border styles. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16qa2q4 4.] With the first rule, empty (transparent) space is reserved for the box, but with the second, no space is reserved and the box won't be displayed at all. Exercise
Give yourself some practice with the box properties by experimenting with the appearance of padding, margin, and borders. Theelement is a good subject for such experimentation: It is used to identify sections of text that are quoted from another source. Special margins, padding, and borders are therefore useful for identifying these. The default styles in web browsers for
set margins on the left and right side. Try writing rules that style these quotes differently. For example, your block quotes could have a solid, thin black line on the top and bottom (with an attractive bit of padding added), or a thick dotted line on the left side with no extra margins added. Find something you likeand don't neglect changing the font, the color, and the background color to suit your tastes.
./ ADD NAME=CH17.HTML
<ul id="nav"> <li><a href="/">Home</a></li> <li><a href="/author.html">The Author</a></li> <li><a href="/downloads.html">Downloads</a></li> <li><a href="/contact.html">Contact</a></li> </ul>
Normally this is displayed by a browser as a list of bullet items. Using CSS, you can style this to be either a vertical navigation bar or a horizontal one.
To create a vertical navigation bar, simply use these simple style rules:
This changes the list items from display type list-item to block, and remove the padding and margins inserted by#nav li { display: block; } #nav { padding: 0; margin: 0; }- lists.
To create a horizontal navigation bar, you can do the same, but change the list items to inline blocks:
Some padding was added to provide some extra space. Of course, you can use CSS to set background colors, borders, and any other appropriate properties you wish on the#nav li { display: inline; padding-right: 1em; padding-left: 1em; }- and
- elements. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch16fig04 Figure 16.4] displays the same navigation list three timesthe identical HTML, but styled to be a vertical navigation bar and a horizontal navigation bar.
