Navigation bar
instead of table

Question

I know that using tables in html as part of the layout is bad practice, and so would like to know how to style the example you can see here using the <ul> element instead of a table. All spacings and font sizes need to remain the same.

Any help would be much appreciated.

If you add the HTML and CSS you have tried so far then we can offer some constructive advice. — My Head Hurts, Jan 30 '12 at 22:13

Šime Vidas · Accepted Answer · 2012-01-30T22:33:35.663

This is how I would do it:

(The idea is to use the box-sizing property in order to be able to set width: 25% safely.)

HTML:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

#nav {
    font-size: 20px;
}

#nav li {
    border-left: 1px solid #C3C3C3;
    float: left;
    width: 25%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#nav li:first-child {
    border: none;
}

#nav a {
    display: block;
    color: inherit;
    text-decoration: none;
}

Live demo: http://jsfiddle.net/dLBYe/8/

@Alp Yea, can't wait for Firefox to finally drop the `-moz-` prefix. — Šime Vidas, Jan 30 '12 at 22:35

score 1 · Answer 2 · answered Jan 30 '12 at 22:13

1

How's this example (no JavaScript needed): jsFiddle

HTML:

<ul>
    <li onclick="window.location.href='#';">Home</li>
    <li onclick="window.location.href='#';">About</li>
    <li onclick="window.location.href='#';">Gallery</li>
    <li onclick="window.location.href='#';" style="border:none">Contact</li>
</ul>

CSS:

body {
    padding:0;
    margin:0;
}
ul {
    display:inline;
    font: 20px Arial, sans-serif;
}

li {
    float:left;
    width:24%;
    text-align:center;
    border-right: 1px solid #c3c3c3;
    list-style:none;
    cursor:pointer;
}

BTW you had a small error in your CSS for the font which I corrected in the jsFiddle.

answered Jan 30 '12 at 22:13

j08691

204,283
31
260
272

Those `onclick` attributes violate DRY. – Šime Vidas Jan 30 '12 at 22:16
@Šime Vidas: I'm just re-using what the OP posted. It's not what I would do and the OP never said it needed to be DRY style. I think he's more interested in layout than JavaScript. – j08691 Jan 30 '12 at 22:19
1. Why `display:inline` on `ul`? 2. Why are you using inline styles? 3. Why aren't you handling your floats correctly? 4. Why do you say no javascript needed when it obviously needs it `window.location.href`? – My Head Hurts Jan 30 '12 at 22:20
@MyHeadHurts: The display:inline is optional and just makes the nav/menu fit better in some layouts. I'm only using an inline style on the last list item to get rid of the border. Obviously you could use JavaScript or a CSS3 attribute to also do that. I have no idea what you mean by why aren't I handling floats correctly -- please explain.The window.location.href code is from the OP and not mine. – j08691 Jan 30 '12 at 22:24
1

Isn't `onclick="window.location.href='#'"` exactly the same as `href="#"`? I would recommend against using either. If you need links that do nothing the best way is to serve the page with a proper `href` and then either capture the event with JS and/or replace the `href` with JS to `javascript:void(0)`. Always remember your most important visitor has javascript turned off. – Brett Pontarelli Jan 30 '12 at 22:29
`display: inline` will make it fit better in some layouts? Inline style is not necessary if you put the border on the left and remove the first border using `first-child` (CSS2) and if you don't know about clearing floats yet then [read this](http://css-tricks.com/the-how-and-why-of-clearing-floats/). – My Head Hurts Jan 30 '12 at 22:29
@BrettPontarelli Noticed in this case the onclick is in an li tag, which href does not work in. – Jens Frandsen Sep 28 '12 at 17:15

Alp · Answer 3 · 2012-01-30T22:49:53.873

1

Live Demo: http://jsfiddle.net/dLBYe/9/

HTML:

<ul class="navbar">
    <li onclick="window.location.href='#'">Home</li>
    <li onclick="window.location.href='#'">About</li>
    <li onclick="window.location.href='#'">Gallery</li>
    <li onclick="window.location.href='#'">Contact</li>
</ul>

CSS:

.navbar {
    width: 100%;
    font: 20px, Arial, sans-serif;
}

.navbar > li {
    width: 25%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    border-left: 1px solid #C3C3C3;
    cursor: pointer;
    text-align: center;
}

.navbar > li:first-child {
    border: none;
}

.navbar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

edited Jan 30 '12 at 22:49

answered Jan 30 '12 at 22:16

Alp

29,274
27
120
198

3

i'd go for a `border-left` to set borders then `.navbar > li:first-child{border:none}` to remove the first li's border to avoid using additional classes. – Joseph Jan 30 '12 at 22:18
`display: inline-block` is not supported in all browsers – My Head Hurts Jan 30 '12 at 22:22
Setting the width to `24%` is suboptimal. Note that you can safely set it to `25%` if you additionally set `box-sizing` to `border-box`. – Šime Vidas Jan 30 '12 at 22:29
Are you sure, i tried it and it does not seem to work: http://jsfiddle.net/dLBYe/7/ – Alp Jan 30 '12 at 22:34
@Alp Are you using Firefox? As for now, a `-moz-box-sizing` copy is needed since Mozilla yet has to switch to the standard name. – Šime Vidas Jan 30 '12 at 22:37
@Alp However, there is a different problem in that demo. When you use `inline-block`, there will be spacing between the individual elements (a few pixels), which means that you want to be using `float:left` instead. Read here: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Šime Vidas Jan 30 '12 at 22:40

T I · Answer 4 · 2012-01-30T23:27:36.107

Given a list like below there are two ways I know of.

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

You can use float left/right

li {
    float: left; /* or right */
}

Or display inline/inline-block (n.b. this way leads to problematic sizing)

li {
    display: inline; /* or inline-block */
}

You can alter the padding / margin / width to suit see demo

Edit: Full example without using border-size demo

ul {
    display: block;
    width: 100%;
}

li {
    border-left: solid 1px black;
    float: left;
    margin-right: -1px;
    text-align: center;
    width: 25%;
}

ul li:first-child {
    border-left: none;
}

ul li:last-child {
    margin-right: 0;
}

Example using display: table which is now a third way I know to achieve this effect :-) demo

ul {
    display: table;
    width: 100%;
}

ul li:first-child {
    border-left: none;
}

li {
    display: table-cell;
    border-left: solid 1px black;
    text-align: center;
    width: 25%;
}

this won't work with borders because the width would be something more than 100% — Alp, Jan 30 '12 at 22:20
As I said the OP can alter padding or margin or width to suit, they could also use `box-sizing: border-box` or `margin-right: -Npx` etc lot's of options nothing is ever definitive [updated fiddle](http://jsfiddle.net/dafastestfingers/TSTUF/1/) to illustrate — T I, Jan 30 '12 at 22:33

Navigation bar instead of table

4 Answers4

Navigation bar
instead of table