✔ Drei Listen nebeneinander positionieren

Maik · 15. Februar 2005

Eine Menge Code für den hover Effekt mit den Bildern konnte ich mir auch sparen.

Das nennst du eine Menge Code für den :hover-Effekt ?

Code:

#listmenu li a
{
background: url(list_off.png) left center no-repeat;
text-decoration: none;
}

#listmenu li a:hover
{
background: url(list_on.png) left center no-repeat;
}

son gohan · 15. Februar 2005

Nein, das nicht maik, aber von den Beispielen gestern mit dem Bilderwechsel, hatte ich die Variante mit dem Bild bevorzugt falls jemand sein CSS abschaltet:

HTML:

.navi-news
{
background-image:url(jpg/agb.jpg);
width:130px;
height:19px;
display:block;
}
.navi-news:hover, .navi-news:active, .navi-news:focus
{
background-image:url(jpg/agb2.jpg);
}
-->
</style>
</head>
<body>
<a href="news.php" class="navi-news">
<img name="home" src="images/blank.gif" border="0" width="0" height="0">9</a>

Aber das ganze paste nicht zu dem was ich wollte. Ich will ja zuerst das eine Bild das sich wechselt wenn man drüberfährt. Dieses Bild ist dann mein Aufzählungszeichen der Liste. Danach wollte ich gerne etwas Leerraum und dann den Text.

Beim Beispiel mit den Bilderwechsel im Hintergrund geht das nicht so richtig mit dem Leeraum, naja ein wenig hab ich rumprobiert, aber nichts gefunden, ich denke das geht auch.

Mit der Liste geht das wunderbar.

Gruß
feh

Maik · 16. Februar 2005

Danach wollte ich gerne etwas Leerraum und dann den Text.
Beim Beispiel mit den Bilderwechsel im Hintergrund geht das nicht so richtig mit dem Leeraum, naja ein wenig hab ich rumprobiert, aber nichts gefunden

Code:

#listmenu li a
{
background: url(list_off.png) left center no-repeat;
padding-left: 15px;
text-decoration: none;
}

#listmenu li a:hover
{
background: url(list_on.png) left center no-repeat;
padding-left: 15px;
}

[editpost 06:33]
Hier der Link zu meinem Demo :::css.layout:::, in dem ich obigen CSS-Code einsetze, um die Listengrafiken beim Überfahren zu tauschen.

Maik · 16. Februar 2005

aber von den Beispielen gestern mit dem Bilderwechsel, hatte ich die Variante mit dem Bild bevorzugt falls jemand sein CSS abschaltet:

Anmerkung: wenn ein User in seinem Browser CSS und / oder die Bilderanzeige deaktiviert, dann funktioniert auch keine der Methoden / Techniken, die hier und in deinem Thread mit hover Bilder wechseln, aber nicht einfach hintergrundbild? vorgestellt wurden.

✔ Drei Listen nebeneinander positionieren

Maik

son gohan

Erfahrenes Mitglied

Maik

Maik

Neue Beiträge