# Roll Over Woes

**URL:** <https://forum.kirupa.com/t/roll-over-woes/214376>\
**Category:** web dev\
**Created:** [January 28, 2007, 4:27am UTC](https://forum.kirupa.com/t/roll-over-woes/214376 "2007-01-28T04:27:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\
**Post date:** [January 28, 2007, 4:27am UTC](https://forum.kirupa.com/t/roll-over-woes/214376/1 "2007-01-28T04:27:39Z")

</div>

I have been having lots of troubble with getting a css roll over positioned horizontally and centered on a page. I’m not shure what’s wrong but when I add \<div class=“menu”\> the text slides off the image and nothing works.

```auto

.menu {
	    height: 26px;
	    width: 188px;
}

.cssnav
{
position: relative;
font-family: arial;
background: url(image1rollover) no-repeat;
white-space: nowrap;
display: block;
width: 99px;
height: 26px;
margin: 0;
padding: 0;
}

.cssnav 
{
display: block;
color: #9F9271;
font-size: 15px;
width: 99px;
height: 26px;
display: block;
float: left;
color: #9F9271;
text-decoration: none;
}

.cssnav img
{
width: 99px;
height: 26px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 31px;
top: 5px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
</style>

<div class="menu">
<div class="cssnav">
<a href="web-link" target="title"><img src="Image1" alt="Hello"/><span>Home</span></a>
</div class>
</div class>

```

PS sorry it’s so much code I shortened it as much as I could.