naom_c
12-25-2011, 06:40 PM
So I have been working on the code for my navigation menu of this site. I want it to sit at the top of the browser window and to be centered. Everything look alright until l I load it in my browser???
What am I doing wrong?
here is the code:
HTML:
<body>
<div id="nav-bar">
<ul id="list-nav">
<li id="active"><a href="www.labrona.com/about" id="current">about</a></li><li id="works"><a href="www.labrona.com/works" target="_self" title="works">works</a></li><li id="flickr"><a href="www.labrona.com/flickr" target="_self" title="flickr">flickr</a></li><li></li><li id="news"><a href="www.labrona.com/new" target="_self" title="news">news</a></li>
</ul>
</div>
<div id= "branding" background="labrona.png">
<p>Labrona<p/>
</div>
CSS:
#nav-bar ul
{
padding: 0;
margin: 0;
list-style-type: none;
background-color: transparent;
color: #FFF;
width: 100%;
font: normal 100%;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
font:Verdana, Geneva, sans-serif;
background-color: #000;
color: #FFF;
padding: 20px 50px;
padding-top: 20px;
border-left: 1px solid #fff;
text-align:center;
}
#nav li:first-child a {
border-left: 1px solid #000; }
li a:hover
{
background-color: #000;
color: #00558D;
}
#branding{
background-repeat:no-repeat;
background-position: relative;
margin-top: 50px;
margin-left: 50px;
text-indent: -9999px;
}
#container
{
border-width: 18px;
boarder: #FFF;
text-indent:-999999px;
background:url("square.png") center;
background-repeat:no-repeat;
padding: 20px;
}
What am I doing wrong?
here is the code:
HTML:
<body>
<div id="nav-bar">
<ul id="list-nav">
<li id="active"><a href="www.labrona.com/about" id="current">about</a></li><li id="works"><a href="www.labrona.com/works" target="_self" title="works">works</a></li><li id="flickr"><a href="www.labrona.com/flickr" target="_self" title="flickr">flickr</a></li><li></li><li id="news"><a href="www.labrona.com/new" target="_self" title="news">news</a></li>
</ul>
</div>
<div id= "branding" background="labrona.png">
<p>Labrona<p/>
</div>
CSS:
#nav-bar ul
{
padding: 0;
margin: 0;
list-style-type: none;
background-color: transparent;
color: #FFF;
width: 100%;
font: normal 100%;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
font:Verdana, Geneva, sans-serif;
background-color: #000;
color: #FFF;
padding: 20px 50px;
padding-top: 20px;
border-left: 1px solid #fff;
text-align:center;
}
#nav li:first-child a {
border-left: 1px solid #000; }
li a:hover
{
background-color: #000;
color: #00558D;
}
#branding{
background-repeat:no-repeat;
background-position: relative;
margin-top: 50px;
margin-left: 50px;
text-indent: -9999px;
}
#container
{
border-width: 18px;
boarder: #FFF;
text-indent:-999999px;
background:url("square.png") center;
background-repeat:no-repeat;
padding: 20px;
}