Navigation Liste Bilder(Button)

[wlive]

Hallo Leute,

wie soll ich das machen, Navigationsmenü erstellen:

Navigation, Vertikal, Kein Text, nur zwei Bilder als normaler Link und Mouse-Over. Jedes einzelne in ein div packen oder geht das mit einer Liste? Wenn ja, wie mache ich das mit einer Liste?

 

[Chickenshooter]

AW: Navigation Liste Bilder(Button)

Moin,

in diesem Fall 2 Divs formatiert mit CSS, ist einfacher.

MfG

 

[wlive]

AW: Navigation Liste Bilder(Button)

Ich probiere mich gerade schon an den divs, aber es will nicht klappen:

<div id="navpoint1"><a href="leistungen.html"><img src="../images/leistungen.gif" /></a></div>

und das style dazu:

#navpoint1 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint1 a{
 background-image:url(../images/leistungen.gif);
 background-repeat: no-repeat;
}
#navpoint1 a:hover{
 background-image:url(../images/leistungen_over.gif);
 background-repeat: no-repeat;
}

Ich muss doch irgendwas in dem div drin stehen haben um den Link mit irgend etwas in Verbindung bringen zu können. Leerzeichen, Bild etc. Ergebnis: Ich habe wie hier im Code das Bild und wenn ich mitder Mouse drüber gehe mit Zeilenversatz das Mouseoverbild noch zusätzlich. Was mache ich falsch?

 

[Chickenshooter]

AW: Navigation Liste Bilder(Button)

<div id="navpoint1"><a href="leistungen.html"><img src="../images/leistungen.gif" /></a></div>

Mach das so:

<div id="navpoint"><a href="leistungen.html"><img src="Navtext.png" alt="Navtext" /></a></div>

Erstelle Dir ein Bild, in Deinem Fall in der Höhe von 46 px und 193 px in der Breite

Dann das bild als BG mit css dem <<a tag >> zuweisen und
die bg Position auf top und left.

im hover teil (a:hover) der css bg position auf bottom left

jetzt wird das Bild einmal geladen und du hast nen Klasse Hover effekt mit css

der img tag innerhalb deines a tag ist die Schrift (png wegen Transparenz)
wenn diese Grafik nicht ladbar ist kommt der alt-Text zum Vorschein.

Das sollte klappen.

MfG

 

[sh0ck]

AW: Navigation Liste Bilder(Button)

Mach das so:

<div id="navpoint"><a href="leistungen.html"><img src="Navtext.png" alt="Navtext" /></a></div>

im hover teil (a:hover) der css bg position auf bottom left
MfG

ja da brate mir doch einer einen storch! ich benutze zwar auch ein einzelnes bild, in dem der status beider events abgebildet ist, nur fuhrwerke ich umständlich mit overflow:hidden und margin herum.

ich gehe mich nun selbst geißeln!


gruss chris

 

[wlive]

AW: Navigation Liste Bilder(Button)

Bin jetzt erst dazu gekommen es auszuprobieren. Vielen Dank,... es funktioniert.

 

[wlive]

AW: Navigation Liste Bilder(Button)

Ich habe doch noch ein Problem damit.

Grundgedanke ist ja von mir eine Navigation mit 5 Menüpunkten zu erstellen. Diese Menüpunkte sind Grafiken, wobei bei a:hover eine andere Garfik genutzt werden soll. Die Grafiken sind alle gleich groß. 193*23px. Ausser Menüpunkt 3, der ist 193*41px. Die Grafiken enthalten Text und die hovergrafik zusätzlich eine Schattierung unter der Schrift.

Im Firefox wird es mir fast richtig angezeigt. Bis auf Menüpunkt 3. Die Grafiken sind als Datei nur einmal vorhanden (technik.gif und technik_over.gif). Schaue ich mir die Grafiken einzeln an (Windows Bildervorschau) wurde alles korrekt von mir gespeichert. Nur im Menü selber erscheint die Grafik nicht korrekt. Bei a:hover Textzeile 1 ohne Schattierung und Zeile 2 mit Schattierung. Es gibt aber nur eine Grafik technik.gif als a ohne Schattierung und eine Grafik technik_over.gif fü a:hover mit Schattierung.

Zweite Problem das ich habe ist der IE.

Mit Menüpunkt 3 das gleiche wie im Firefox.
Hinzu kommt aber ich bekomme alle Menügrafiken doppelt angezeigt, mit einem kleinen Versatz um 3-4 px.

Meine Vermutung irgendetwas schlägt quer, weil ich ja im Html Code das Bild einfüge und noch einmal in der css als bg oder habe ich da einen kompletten Denkfehler drin?

Bitte um Hilfe!!!

<div id="nav">
        <div id="navpoint0"><a href="index.html"><img src="../images/firmenprofil.gif" /></a></div>
        <div id="navpoint1"><a href="leistungen.html"><img src="../images/leistungen.gif" /></a></div>
        <div id="navpoint2"><a href="produkte.html"><img src="../images/produkte.gif" /></a></div>
        <div id="navpoint3"><a href="technik.html"><img src="../images/technik.gif" /></a></div>
        <div id="navpoint4"><a href="kontakt.html"><img src="../images/kontakt.gif" /></a></div>
        <div id="navpoint5"><a href="impressum.html"><img src="../images/impressum.gif" /></a></div>
      </div>

.

#navpoint0 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint0 a{
 background:url(../images/firmenprofil.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint0 a:hover{
 background:url(../images/firmenprofil_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint1 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint1 a{
 background:url(../images/leistungen.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint1 a:hover{
 background:url(../images/leistungen_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint2 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint2 a{
 background:url(../images/produkte.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint2 a:hover{
 background:url(../images/produkte_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint3 {
 width: 193px;
 height: 41px;
 padding-bottom: 5px;
}
#navpoint3 a{
 background:url(../images/technik.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint3 a:hover{
 background:url(../images/technik_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint4 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint4 a{
 background:url(../images/kontakt.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint4 a:hover{
 background:url(../images/kontakt_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint5 {
 width: 193px;
 height: 23px;
 padding-bottom: 5px;
}
#navpoint5 a{
 background:url(../images/impressum.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#navpoint5 a:hover{
 background:url(../images/impressum_over.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}

..und hier css