Horizontal Streching

**is-serp** · 10-03-2006 01:25 PM

Hi,

I am trying to build a site without using tables. I have 7 links in the navigation bar, and would like these 7 links to be evenly spaced and fill the whole navigation bar (horizontally). Is there any way to achieve this using CSS. This is my html:

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <title>CSS test page</title>
                <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>

        <body>
                <div id="container">
                        <div id="menu">
                                <ul>
                                        <li><a href="">link1</a></li>
                                        <li><a href="">link2</a></li>
                                        <li><a href="">link3</a></li>
                                        <li><a href="">link4</a></li>
                                        <li><a href="">link5</a></li>
                                        <li><a href="">link6</a></li>
                                        <li><a href="">link7</a></li>
                                </ul>
                        </div>
                </div>
        </body>

</html>

and this is my stylesheet:

Code:

body
{
        font-family: Verdana, Arial, Sans-Serif;
        font-size: 10px;
}

#container
{
        width: 750px;
        margin: 0 auto;
        position: relative;
}

#menu
{
        border: thin solid black;
}

#menu ul
{
        margin: 0;
        text-align: center;
        list-style-type: none;
}

#menu li
{
        display: inline;
}

Thanks!
is-serp

**KDLA** · 10-03-2006 01:42 PM

You can select a width for each list item's link, based on a percentage: 14%. That way, they will be evenly spaced, no matter the screen resolution.

Code:

li a {display: block; width: 14%;}

KDLA

Thread: Horizontal Streching

Thread Tools

Display

Horizontal Streching

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions