rollover und verlinken

A

ADIT

Erfahrenes Mitglied
Hi Leuts,
hab mal wieder eine Frage =)

Und zwar erlerne ich gerade das positionieren von Bilder mit CSS. Mach dies alles in einer seperaten css -datei.

Meine Menüleiste besteht aus Bildern wo der Text schon enthalten ist. Kann ich diese Buttons mit Hilfe von CSS auch verlinken und einen Mouseover-Effekt erziehlen?

Momentan hab ich es nur so gelöst das ich die verlinkten Bilder nicht mit CSS positioniere sonder ganz normal mit HTML und dort verlinke.


Tipp`s

MfG

Adit
 
Hi,

mein Tutorial CSS-Rollover - Teil 2 kommt dir da gelegen :)

"CSS Sprites" nutze ich (im kleinen Maßstab, bei jedem einzelnen Link, anstatt, wie üblich, für das komplette Menü) in der zweiten vorgestellten Technik "CSS-Rollover mit background-position".

mfg Maik
 
Vielen Dank!

Noch ein Frage - wie kann ich die Bilder jetzt nebeneinandere positionieren, quasi den zeilenumbruch verhinden?
 
Zum horizontalen Ausrichten der Listennavigation lauten die Regeln so:
  • Rollover-Variante:
Code: 
ul#nav1 li { /* neuer Deklarationsblock */
display:inline; /* Element erzeugt keinen Zeilenumbruch im Textfluß */
}
ul#nav1 a {
float:left; /* Element wird vom nachfolgenden Element rechtsseitig umflossen */
display:block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
width:130px; /* Grafik-Breite */
height:15px; /* Grafik-Höhe */
}
  • Rollover-Variante:
Code: 
ul#nav2 li { /* neuer Deklarationsblock */
display:inline; /* Element erzeugt keinen Zeilenumbruch im Textfluß */
}
ul#nav2 a {
float:left; /* Element wird vom nachfolgenden Element rechtsseitig umflossen */
display:block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
width:130px; /* Grafik-Breite */
height:15px; /* Grafik-Höhe */
}
Wichtig hierbei: Das darauffolgende HTML-Element im Markup muß mit clear:left formatiert werden, um sein Umfließen des Menüs zu verhindern, und seinen Textfluß unterhalb des Menüs zu erzwingen - also z.B.:

HTML: 
<body>
    <ul id="nav">
        ...
    </ul>
    <div id="inhalt">
        ...
    </div>
</body>
CSS: 
#inhalt { clear:left; }

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück