Am 21.03.11 00:27, schrieb Keith Purtell:
I'm trying to create a navigation panel with six links. I want it to
appear as a horizontal rectangle with three links across the top
and three directly below (all centered on a page). I'm not sure whether
I should use my usual unordered list and then position the fourth, fifth
and sixth li's below the first three somehow, or .... use a table. Yes,
I know one of the goals of CSS was to provide a method for structuring
Web pages that was superior to tables. But, Eric Meyer's reference has
an entire chapter on the correct use of CSS to build/style tables. What
do you all think?
I think an unordered list and a little CSS magic could do the trick.
Given the following markup:
<ul class="nav">
<li>
<!-- start next item on same line to avoid unwanted gaps -->
<a href="#">Link 1</a></li><li>
<a href="#">Link 2</a></li><li>
<a href="#">Link 3</a></li><li>
<a href="#">Link 4</a></li><li>
<a href="#">Link 5</a></li><li>
<a href="#">Link 6</a></li>
</ul>
Then you *could* use these rules to make you links behave as desired:
ul.nav {
margin: auto; /* center list */
list-style: none; /* remove bullets */
width: 20em; /* give it an explicit width */
}
ul.nav li {
display: inline-block; /* redefine display role */
width: 33%; /* one third the width of the list */
}
The trick is to make creative use of the /width/ property. First, we
give the list an explicit width. This way we can use /margin: auto/ to
center it horizontally.
The next step is to use /width/ on the list items themselves. Here we
define their width to be *one third* (33%) of the containing block (the
<ul>). This way three list items will fit the width of the list. The
next three items are forced below.
When defining borders, margins, or padding on the list items, their
width needs to be adjusted appropriately.
Tested in S4/FF3.6/C10
hope this this helps,
Jørgen
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
