# CSS rollovers query?

**URL:** <https://forum.kirupa.com/t/css-rollovers-query/234525>\
**Category:** Uncategorized\
**Created:** [August 3, 2007, 12:10am UTC](https://forum.kirupa.com/t/css-rollovers-query/234525 "2007-08-03T00:10:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![big\_pete](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@big\_pete](https://forum.kirupa.com/u/big_pete)\
**Post date:** [August 3, 2007, 12:10am UTC](https://forum.kirupa.com/t/css-rollovers-query/234525/1 "2007-08-03T00:10:32Z")

</div>

hey, im try to centre my navigation bar, ive used the rollover method shown here:  
[http://www.kirupa.com/css/css\_rollovers.htm](http://www.kirupa.com/css/css_rollovers.htm)

ive got it working well, the only problem is i want them to be centred on screen relative to the browser. basically the navbar will go accross the entire browser.  
i want the rollovers to be centred, not to the left as they are now.

what is the best way to do this without stuffin up my rollovers??

my HTML is:

```auto
 
<div id = "navbar">
  <ul id="navlist">
   <li><a href="#" id="home">Home</a></li>
   <li><a href="#" id="arrange">Arrange</a></li>
   <li><a href="#" id="prepaid">PrePaid</a></li>
   <li><a href="#" id="about">About</a></li>
   <li><a href="#" id="contact">Contact</a></li>
   <li><a href="#" id="faq">FAQ's</a></li>
  </ul>
 </div> 

```

CSS is:

```auto

} #navbar {
 background-image: url(../images/Bance_navbar_repeat.gif);
 background-repeat: repeat-x;
 height: 34px;
 width: 100%;
 display: inline;
 text-align: center;
 
}
#home{ 
height: 34px; 
width: 98px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_home_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#home:hover{ 
background-position: bottom left; 
} 
#arrange{ 
height: 34px; 
width: 187px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_arrange_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#arrange:hover{ 
background-position: bottom left; 
} 
#prepaid{ 
height: 34px; 
width: 170px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_prepaid_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#prepaid:hover{ 
background-position: bottom left; 
} 
#about{ 
height: 34px; 
width: 130px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_about_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#about:hover{ 
background-position: bottom left; 
} 
#contact{ 
height: 34px; 
width: 145px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_contact_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#contact:hover{ 
background-position: bottom left; 
} 
#faq{ 
height: 34px; 
width: 88px; 
text-indent: 100000px; 
overflow: hidden; 
background: url(../images/Bance_faq_button.gif) no-repeat left top; 
display: block; 
 float:left 
} 
 
#faq:hover{ 
background-position: bottom left; 
} ul#navlist li {
 display: inline;
}
ul#navlist {
 list-style-type: none;
}
 

```

cheers  
pete