Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS-Tricks’ Navigation Bar

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 21, 2012 at 2:03 am #37269
    DevelopingDan
    Member

    Does anybody know how to make the navigation bar used on this site? The one I want to create is similar but I keep running into problems. I figured if I could know how to code this one it would make the one I am designing a lot easier to handle.

    March 21, 2012 at 6:07 pm #99656
    DevelopingDan
    Member

    Basically it is centering and spacing issues. I want all the link elements to be touching and in their own block, with them all being centered. I am fairly new to web design so it may look messy.

    HTML

    CSS

    body{
    
background-image:url("backstripe.png");
    
margin:0;
    
padding:0;
    
}
    
#navi{
    
float:left;
    
width:100%;
    
height:50px;
    
background-image:url("navstripe.png");
    
-webkit-box-shadow:rgba(0,0,0,.5) 0px 0px 13px inset;
    
margin:0;
    
}
    
#navi li{
    
display:inline-block;
    
list-style:none;
    
padding:8px;
    
margin:0;
    
font:20px Tahoma;
    
color:white;
    
border-left:1px solid white;
    
border-right:1px solid white;
    
}
    
ul{
    
text-align:center;
    
}
    
#home{
    
background-image:url("navstripe.png");
    
-webkit-transition:background 1s;
    
-webkit-border-radius:5px;
    
}
    
#home:hover{
    
background:gray;
    
width:100px;
    
}
    March 26, 2012 at 11:25 pm #100001
    DevelopingDan
    Member

    That link is a 404.

    Got my hopes up though. Haha.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.