Dan
The New Helper.Net gives me great Anxiety... o.O;;
- Reaction score
- 159
Here is my css:
Here is my html:
Works pretty well and I'm proud of it since I did it all from scratch. I would like to make it centered.
I had it centered a while ago but I was using the "inline-block" method and read that it might not be a great idea to use. so I reworked it to what I think is probably a more traditional way. Any help would be appreciated. I might figure it out on my own though.
EDIT: i mean i guess inline-block works if i take out the float:left; but the compatability view in IE makes it into a vertical list when you click it... so I'm assuming IE6-7 won't render it horizontally... ;;
Code:
#nav1{
width:960px;
margin: 0 auto;
margin-bottom:4px;
margin-top:5px;
background-color:#737373;/*fallback*/
background-image: -moz-linear-gradient(90deg, #737373, #242424 38px);
background-image: -webkit-linear-gradient(90deg, #737373, #242424 38px);
background-image: -o-linear-gradient(90deg, #737373, #242424 38px);
background-image: -ms-linear-gradient(90deg, #737373, #242424 38px);
background-image: linear-gradient(90deg, #737373, #242424 38px)
}
#nav1 li{display:inline;float:left;position:relative;text-align: center;} /*inline-block is necessary...why idk*/
#nav1 ul{text-align: center; /* this centers all the list items (within the ul) to the middle of the navbar*/}
#nav1 a{
display:block;
padding:10px 20px; /*ads space around list item text*/
color: #fff; /*defines li text color*/
}
#nav1 a:link{text-decoration: none;}
#nav1 a:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#AAA; /*fallback*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C4C4C4', endColorstr='#696969'); /*IE (might need "-ms-filter" prefix for older ie versions)(filter destroys border radius)*/
background-image: -moz-linear-gradient(90deg, #c4c4c4, #696969 38px);
background-image: -webkit-linear-gradient(90deg, #c4c4c4, #696969 38px);
background-image: -o-linear-gradient(90deg, #c4c4c4, #696969 38px);
background-image: -ms-linear-gradient(90deg, #c4c4c4, #696969 38px);
background-image: linear-gradient(90deg, #c4c4c4, #696969 38px)
}
#nav1 li .special{color:orange;}
#nav1 li .special:hover{
color:white;
background-color:#f7ef7c;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7EF7C', endColorstr='#f0b513'); /*IE*/
background-image: -moz-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
background-image: -webkit-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
background-image: -o-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
background-image: -ms-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
background-image: linear-gradient(90deg, #f7ef7c, #f0b513 38px)
}
Code:
<nav>
<div id="nav1" class="rounded">
<ul>
<li><a href="/draft/">Home</a></li>
<li><a href="/draft/company_info.php">Company</a></li>
<li><a href="/draft/product.php">Product</a></li>
<li><a class="special" href="/draft/get_started.php">Get Started! </a></li>
<li><a href="/draft/contact.php">Contact Us!</a></li>
</ul>
</div>
</nav>
Works pretty well and I'm proud of it since I did it all from scratch. I would like to make it centered.
I had it centered a while ago but I was using the "inline-block" method and read that it might not be a great idea to use. so I reworked it to what I think is probably a more traditional way. Any help would be appreciated. I might figure it out on my own though.
EDIT: i mean i guess inline-block works if i take out the float:left; but the compatability view in IE makes it into a vertical list when you click it... so I'm assuming IE6-7 won't render it horizontally... ;;