USING LINKS AND CREATING NAVIGATION
207
5
3. Style structural divs. Add the following #wrapper rule, which defines a set width for
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.
4. Style the navContainer div. Add the following rule to style the navContainer div.
The font settings define a size and family. Avoid setting a line-height value,
because that makes it much harder to line up the tabs with the borders later. The
padding value applies some padding above the soon-to-be-created tabs, and the
border-bottom value finally surrounds all edges of the content div with a border.
Because the wrapper div has a white background, this currently shows through the
navContainer div, and so a background setting is applied, using the same background
color value as applied to the body element.
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
border-bottom: 1px solid #909090;
background: #dddddd;
}
5.
Pages:
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304