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;
}
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;
}