Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,839
There are 38 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Help With Navigation Bar

Thread title: Help With Navigation Bar
Reply    
    Thread tools Search this thread Display Modes  
02-20-2015, 02:00 PM
#1
kaymeis is offline kaymeis
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
 
Posts: 13
iTrader: 0 / 0%
 

kaymeis is on a distinguished road

  Old  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>

Reply With Quote
04-17-2015, 08:53 PM
#2
Sw1tch is offline Sw1tch
Sw1tch's Avatar
Status: I'm new around here
Join date: Nov 2006
Location: Austin, TX
Expertise: Front end development
Software: Sublime Text 2, Photoshop
 
Posts: 3
iTrader: 0 / 0%
 

Sw1tch is on a distinguished road

  Old

I made a codepen and cleaned up your example, I think this is your desired output:

http://codepen.io/anon/pen/MwgbLp


Your styles weren't being applied because your selectors weren't matching. For example:

Code:
#nav .contactus li a
Should have been:

Code:
#nav li.contactus  a

Reply With Quote
Thanked by:
kaymeis (09-28-2015)
09-28-2015, 05:19 PM
#3
kaymeis is offline kaymeis
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
 
Posts: 13
iTrader: 0 / 0%
 

kaymeis is on a distinguished road

  Old

Thnx a mill

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed