tobi0711
Threadersteller
Dabei seit: 19.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 19.03.2008 02:04
Titel CSS grafik-rollover ausrichtung |
  |
|
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>
Zuletzt bearbeitet von tobi0711 am Mi 19.03.2008 02:21, insgesamt 4-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
