|
|
|
|
Thread title: Help With Navigation Bar |
|
|
Thread tools
Search this thread
Display Modes
|
|
02-20-2015, 02:00 PM
|
#1
|
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
Posts: 13
|
Help With Navigation Bar
Hi
I'm trying to create a stretched navigation bar with link buttons..Instead I end up with a bunch of text links minus the navigation bar..Please help.. Here is the CSS
nav{
position:absolute;
width:100%
}
#nav li
{
display:block;
float:left;
position:relative;z-index:100;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
#nav li a
{
float:left;
display:block;
text-shadow:0px -1px -2px #000000;
text-decoration:none;
padding:12px 5px 12px 5px;
margin:0px 8px;
}
#nav .home li a
{
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:thin 1px ;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#nav .home li a:hover
{
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
#nav .home li a:ctive
{
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
#nav .contactus li a
{
padding: 10px 15px;
background: #C80000;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:thin 1px ;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#nav .contactus li a:hover
{
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
#nav .contactus li a:ctive
{
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
#nav .order li a
{
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:thin 1px ;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#nav .order li a:hover
{
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
#nav .order li a:ctive
{
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
And html:
div id="nav">
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="aboutus"><a href="aboutus.html">About Us</a></li>
<li class"F&Dlogo"><a href="index.html"><img src="F&D_Joint/Images/F&D2.gif" alt="F&D2"/></a></li>
<li class="contactus-link"><a href="contactus.html">Contact Us</a></li>
<li class="order"><a href="order.html">Order</a></li>
</ul>
</div>
</body>
</html>
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|