Log in

View Full Version : alignment of navigation bar



Rosalie
09-26-2010, 02:48 PM
Hello everyone,

I created a navigation bar using css sprite described at the following website: http://www.tutorial9.net/web-tutorials/building-faster-websites-with-css-sprites/

Everything went fine and I like the result however the first button appears 40px too far from the left. I checked the whole script and I can't find the error. Can someone please help me?

thanks in advance,
Rosalie

Hereby my css:

#navBarContainer{
width: 950px;
height: 23px;
margin: 0px 0px 0px 0px;
background-color: #000;
}

ul#navBar{
width: 950px;
height: 23px;
margin: 0 auto;
list-style: none;
background-color: #000;
}

ul#navBar li{
display: inline;
}

ul#navBar li a{
height: 23px;
float: left;
text-indent: -9999px;
}

ul#navBar li#navBarListingsCurrent a{
width: 95px;

}

ul#navBar li#navBarListings a{
width: 95px;

}

ul#navBar li#navBarListings a:hover{
background-position: 0 -23px;
}

ul#navBar li#navBarListings a:active{
background-position: 0 -46px;
}

ul#navBar li#navBarSearch a{
width: 89px;

}

ul#navBar li#navBarSearch a:hover{

}

ul#navBar li#navBarSearch a:active{
background-position: -95 -46px;
}

ul#navBar li#navBarSellyourpiece a{
width: 163px;

}

ul#navBar li#navBarSellyourpiece a:hover{

}

ul#navBar li#navBarSellyourpiece a:active{
background-position: -184 -46px;
}

ul#navBar li#navBarOpenyourownshop a{
width: 232px;

}

ul#navBar li#navBarOpenyourownshop a:hover{

}

ul#navBar li#navBarOpenyourownshop a:active{
background-position: -347 -46px;
}

ul#navBar li#navBarYouraccount a{
width: 170px;

}

ul#navBar li#navBarYouraccount a:hover{

}

ul#navBar li#navBarYouraccount a:active{
background-position: -579 -46px;
}
#hope {
color: #F00;
height: 23px;
width: 10px;
}
#innavbar {
background-color: #F00;
height: 23px;
width: 10px;
margin-left: 900px;
}

bluewalrus
09-26-2010, 03:00 PM
Default browser padding add



Padding:0;

to ul#navbar

or


ul#navBar{
width: 950px;
height: 23px;
margin: 0 auto;
list-style: none;
background-color: #000;
Padding:0;
}

Rosalie
09-26-2010, 03:05 PM
Default browser padding add



Padding:0;

to ul#navbar

or


ul#navBar{
width: 950px;
height: 23px;
margin: 0 auto;
list-style: none;
background-color: #000;
Padding:0;
}

Amazing, it worked. So many thanks :D