CODEWITHSUNDEEP
htmlcss
jan
jan

Reputation: 67

horizontal navigation bar done in CSS

* {
border: 0px;
margin: 0px;
padding: 0px;
}
body {
background-color: #FFC;
}
#wrapper {
width:70%;
margin: 0% auto;
}

#header {
background-color: #C1D1FD;
padding: 3%;
}

#nav {

clear:both;
padding: auto;
position:inherit;
background-color:#F0D5AA;
width: auto;

}
#nav ul {
list-style-type:none;

}

#nav a {
display:block;
float:left;
padding:0%;
width:20%;
background-color:#F60;
border-bottom:1px #fff solid;

}

#content {
padding:7%;
margin-left: 20%;
background-color:#fff;

}

#footer {
background-color: #C1D1FD;
padding: 2%;
text-align:center;
}

HTML CODE:

<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content-->
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>

Hi this is my CSS & HTML code, im trying to make my navigation bar below the header bar. but navbar result appears as zagged like stairs. How can i make my navbar buttons straight? Thank you for the advice,

Upvotes: 0

Views: 16326

Answers (3)

Jay
Jay

Reputation: 11

I eradicated the stairstep problem by removing one line in the original CSS code. Comment out the position:inherit; statement within the #nav block.

Upvotes: 1

Nizarnav
Nizarnav

Reputation: 167

Try to remove this :display:block; and set #nav ul li to display:inline;

this code is woking, but you may change it to fit your needs:

#nav {
background-color:#F0D5AA;
}
#nav ul {
list-style-type:none;
padding-top:3px;
padding-bottom:3px;
}
#nav ul li {
display:inline;
}
#nav a:link, a:visited {
text-align:center;
padding:3px;
}

Upvotes: 0

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

You can see here,

http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

Example Here:

http://www.cssnewbie.com/example/horizontal-menu/

Upvotes: 1

Related Questions