nicht angemeldet
Grafisches Rollover-CSS Menü ausrichten.
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>
-
vergiss alles was du bisher gelernt hast und mach die rollover effekt so:
http://www.wellstyled.com/css-nopreload-rollovers.htmlimage replacements mit gilder levin (oder was auch immer du versuchst) funktioniert im internet explorer nur bedingt und bei langsamen rechnern flackert das zeug wie hölle ;)
lieber mit der phark-methode den text ins niravana schiessen - wohl oder übel die beste lösung
alternativ geht auch beides (ie bekommt einen conditional comment und ein zusätzliches css dass ihm die bilder aus, css ein variante verwehrt, bei anderen browsern wirds funktionieren