CODEWITHSUNDEEP
htmlcss
TheEagle
TheEagle

Reputation: 179

CSS nav bar is not horizontal

I'am trying to make a navigation bar horizontal but at the moment its vertical. Any help would be great. The problem is that its vertical. I have made the list in html and then used my other file in css to edit it.

div.horizontal
{
    width:100%;
    height:63px;
}
div.horizontal ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
div.horizontal li
{
    float:left;
}
div.horizontal a
{
    display:block;
    width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
    background-color:#7A991A;
}
<html>
<head>
    <link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
</ul>
</div>

</body>
<html>

Upvotes: 1

Views: 4429

Answers (3)

Nihal Sahu
Nihal Sahu

Reputation: 49

Use 

display:inline-block;

You can't use the current method for Horizontal ,As blocks position themselves vertically in the flow. But this attribute overrides the flow and makes it see itself as a inline/block hybrid.

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16369

Personally, I always set up my horizontal nav bars with CSS like this (using your current CSS as starting point):

div.horizontal li {
    width:86px;
    height:inherit;
    display:inline-block;

    /* Fix bug in IE7 and below */
    zoom:1;
    *display:inline;
}

div.horizontal li a {
    display:block;
    width:100%;
    height:100%;
}

The inline-block on the li will let it sit horizontally, and declaring its width/height creates the appropriate container for the a. The a then inherits the height/width from the li container. The lack of float:left also eliminates the need to clear anything.

Edit: updated to show the workaround for IE7 and below not respecting inline-block;

Upvotes: 2

Lee
Lee

Reputation: 750

Try:

div.horizontal a { display:block; width:86px; float: left; }

Upvotes: 0

Related Questions