Willkommen auf dem Portal für Mediengestalter

tobi0711 · Threadersteller

hallo!

ich habe eine site mit CSS gebaut und will jetzt einen grafik-rollover mit css einsetzten. das funktoniert auch.
bis auf die ausrichtung der rollovers. HILFE

Gibt es eine Möglichkewit die Rollover-grafiken innerhalb eines div-tags so zu positionieren, dass diese innerhalb eines div-tags zentriert sind, und beim verändern des browserfenster mitlaufen. Also ohne die Positionierung mit koordinaten (siehe auch unten >> left:28px; top: -20px;)

Wenn ich die Koordinaten wegelasse dann hängen die rollovers immer an der linken seite.
Wer kennt sich da aus?

Hier mal das CSS:

#header {
height: 291px;
margin-left: 20;
margin-right: 20;
background-position: center;
background-image: url(../images/bg_header.jpg);
background-repeat: repeat-x;
}

#menu {
list-style: none;
padding: 0;
margin: 0;
background: url(images/menu-bg.jpg) no-repeat;
text-align:center;
clear:both;
float:left;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 500px;
text-align:center;
top: 52px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
text-align:center;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 368px;
top: 144px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: -14px;
top: 72px;
}

Und hier mal das HTML:

<body>
<div id="header">
<ul id="menu">
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="about">About<span></span></a></li>
</ul>
</div>
</body>

nicoG · **Verfasst** Mi 19.03.2008 21:38 **Titel**

Was hast du denn für eine komische Konstruktion?
Leere span-Tags in einem Link-Tag. Dann gibst du den Inlinetags "span" noch left- und top-Werte. So wird das sowieso nichts *zwinker*

Zeig doch mal wie du es haben willst und frunde dich mal mit background-position an, ist ein guter Freund von mir

Willkommen auf dem Portal für Mediengestalter

Thema: CSS grafik-rollover ausrichtung vom 19.03.2008

CSS grafik-rollover ausrichtung