Autor |
Nachricht |
fragile
Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht:
|
Verfasst Fr 02.09.2005 12:25
Titel
|
|
|
Aeh..wie mach ich das bei mehreren Buttons ? Muss ich dann in jedem Button nen style-Attribut definieren und was nehm ich als Lnikbeschriftung ? Gar nix ? Könnte mal jemand den HTML/CSS-Mischtext für nen konkreten Rollover posten ?
Thx..
|
|
|
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Fr 02.09.2005 12:30
Titel
|
|
|
HTML-Menü:
Code: | <div id="navi">
<ul>
<li><a href="index.html" class="startActive"><span>Startseite</span></a></li>
<li><a href="ueber_uns.html" class="ueberuns"><span>Wir über uns</span></a></li>
<li><a href="fahrzeuge.html" class="fahrzeuge"><span>Fahrzeuge</span></a></li>
<li><a href="schulungsraum.html" class="schulungsraum"><span>Schulungsraum</span></a></li>
<li><a href="ausbildung.html" class="ausbildung"><span>Ausbildung</span></a></li>
<li><a href="seminare.html" class="seminare"><span>Seminare</span></a></li>
<li><a href="aktuelles.html" class="aktuelles"><span>Aktuelles</span></a></li>
<li><a href="kontakt.html" class="kontakt"><span>Kontakt</span></a></li>
<li><a href="anfahrt.html" class="anfahrt"><span>Anfahrt</span></a></li>
<li><a href="impressum.html" class="impressum"><span>Impressum</span></a></li>
</ul>
</div> |
Definition der Tags:
Code: | div#navi ul {
list-style-type: none;
}
div#navi ul a span {
display: none;
font-size: 1px;
vertical-align: middle;
}
div#navi li {
font-size: 1px;
line-height: 1px;
}
div#navi a {
display: block;
width: 128px;
height: 20px;
text-decoration: none;
} |
Definition der Menüpunkte:
Code: | a.start {
width: 128px;
height: 20px;
background: url(../images/navi/button_start.jpg) no-repeat -128px 0px;
}
a.start:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_start.jpg) no-repeat 0px 0px;
}
a.startActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_start.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.ueberuns {
width: 128px;
height: 20px;
background: url(../images/navi/button_ueberuns.jpg) no-repeat -128px 0px;
}
a.ueberuns:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_ueberuns.jpg) no-repeat 0px 0px;
}
a.ueberunsActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_ueberuns.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.fahrzeuge {
width: 128px;
height: 20px;
background: url(../images/navi/button_fahrzeuge.jpg) no-repeat -128px 0px;
}
a.fahrzeuge:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_fahrzeuge.jpg) no-repeat 0px 0px;
}
a.fahrzeugeActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_fahrzeuge.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.schulungsraum {
width: 128px;
height: 20px;
background: url(../images/navi/button_schulungsraum.jpg) no-repeat -128px 0px;
}
a.schulungsraum:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_schulungsraum.jpg) no-repeat 0px 0px;
}
a.schulungsraumActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_schulungsraum.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.ausbildung {
width: 128px;
height: 20px;
background: url(../images/navi/button_ausbildung.jpg) no-repeat -128px 0px;
}
a.ausbildung:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_ausbildung.jpg) no-repeat 0px 0px;
}
a.ausbildungActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_ausbildung.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.seminare {
width: 128px;
height: 20px;
background: url(../images/navi/button_seminare.jpg) no-repeat -128px 0px;
}
a.seminare:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_seminare.jpg) no-repeat 0px 0px;
}
a.seminareActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_seminare.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.aktuelles {
width: 128px;
height: 20px;
background: url(../images/navi/button_aktuelles.jpg) no-repeat -128px 0px;
}
a.aktuelles:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_aktuelles.jpg) no-repeat 0px 0px;
}
a.aktuellesActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_aktuelles.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.kontakt {
width: 128px;
height: 20px;
background: url(../images/navi/button_kontakt.jpg) no-repeat -128px 0px;
}
a.kontakt:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_kontakt.jpg) no-repeat 0px 0px;
}
a.kontaktActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_kontakt.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.anfahrt {
width: 128px;
height: 20px;
background: url(../images/navi/button_anfahrt.jpg) no-repeat -128px 0px;
}
a.anfahrt:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_anfahrt.jpg) no-repeat 0px 0px;
}
a.anfahrtActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_anfahrt.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.impressum {
width: 128px;
height: 20px;
background: url(../images/navi/button_impressum.jpg) no-repeat -128px 0px;
}
a.impressum:hover {
width: 128px;
height: 20px;
background: url(../images/navi/button_impressum.jpg) no-repeat 0px 0px;
}
a.impressumActive {
width: 128px;
height: 20px;
background: url(../images/navi/button_impressum.jpg) no-repeat 0px 0px;
} |
Ansonsten such mal nach CSS-Menüs
Zuletzt bearbeitet von way2hot am Fr 02.09.2005 12:31, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
fragile
Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht:
|
Verfasst Fr 02.09.2005 12:39
Titel
|
|
|
Jo danke, habs grad auch ausprobiert und funzt wunderbar ! thx !
|
|
|
|
|
fragile
Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht:
|
Verfasst Fr 02.09.2005 13:08
Titel
|
|
|
Ah, noch eine kleine Frage : Meine Menueelemente sind horizontal angeordnet, einfach die <a>-Tags in einem div-tag untereinander geschrieben. Wie verhindere ich, daß sie auf einmal beim Verkleinern des Browserfensters untereinander rutschen ?
Gruß
FraGiLe
|
|
|
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Fr 02.09.2005 17:27
Titel
|
|
|
fragile hat geschrieben: | Ah, noch eine kleine Frage : Meine Menueelemente sind horizontal angeordnet, einfach die <a>-Tags in einem div-tag untereinander geschrieben. Wie verhindere ich, daß sie auf einmal beim Verkleinern des Browserfensters untereinander rutschen ?
Gruß
FraGiLe |
Wenn kein Platz ist in der Breite, dann ist kein Platz.
Wie hast du denn den DIV definiert, in dem die Navi platziert ist?
// Du kannst übrigens die Liste aus meinem Beispiel auch benutzen, um eine horizontale Navi zu realisieren (Listenelemente inline floaten). Sinn der Liste sind die zusätzlich vorhandenen Textlinks, für den Fall, dass beispielsweise CSS ausgeschaltet ist.
Zuletzt bearbeitet von way2hot am Fr 02.09.2005 17:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 02.09.2005 20:07
Titel
|
|
|
im code da oben steht viel zu viel unnützes zeug.
einfach mal
#navi a {width: 128px; height: 20px; }
machen, dann musste das nich bei jedem link einzeln machen. die scheinen ja eh immer alle gleich groß zu sein.
|
|
|
|
|
fragile
Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht:
|
Verfasst Sa 03.09.2005 18:54
Titel
|
|
|
Hab deinen code weitgehend übernommen, Bildgrößen angepasst und die div#navi - Konstruktion so gelassen. Die Elemente sollen halt fixed stehen bleiben, so daß der User das Fenster weiter aufziehen muss und es soll mir nicht das Design zerhauen....
|
|
|
|
|
fragile
Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht:
|
Verfasst Mo 05.09.2005 07:42
Titel
|
|
|
Code: | div#navi {
margin-left : 280px;
margin-top : 65px;
position : absolute;
}
div#navi a {
width: 132px;
height: 32px;
text-decoration: none;
}
/* -----------------------------------------*/
a.start {
width: 132px;
height: 32px;
background: url(but_home.jpg) no-repeat;
}
a.start:hover {
width: 132px;
height: 32px;
background: url(but_home_over.jpg) no-repeat;
}
a.start:active {
width: 132px;
height: 32px;
background: url(but_home_pressed.jpg) no-repeat;
}
a.produkte {
width: 132px;
height: 32px;
background: url(but_produkte.jpg) no-repeat;
}
a.produkte:hover {
width: 132px;
height: 32px;
background: url(but_produkte_over.jpg) no-repeat;
}
a.produkte:active {
width: 132px;
height: 32px;
background: url(but_produkte_pressed.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.kontakt {
width: 132px;
height: 32px;
background: url(but_kontakt.jpg) no-repeat;
}
a.kontakt:hover {
width: 132px;
height: 32px;
background: url(but_kontakt_over.jpg) no-repeat 0px 0px;
}
a.kontakt:active {
width: 132px;
height: 32px;
background: url(but_kontakt_pressed.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.wir {
width: 132px;
height: 32px;
background: url(but_wir.jpg) no-repeat;
}
a.wir:hover {
width: 128px;
height: 20px;
background: url(but_wir_over.jpg) no-repeat 0px 0px;
}
a.wir:active {
width: 128px;
height: 20px;
background: url(but_wir_pressed.jpg) no-repeat 0px 0px;
}
/* ------------------------------------ */
a.impressum {
width: 132px;
height: 32px;
background: url(but_impressum.jpg) no-repeat;
}
a.impressum:hover {
width: 128px;
height: 20px;
background: url(but_impressum_over.jpg) no-repeat 0px 0px;
}
a.impressum:active {
width: 128px;
height: 20px;
background: url(but_impressum_pressed.jpg) no-repeat 0px 0px;
} |
So das is mein derzeitiger, angepasster Code. Funzt im IE wunderbar.
Das Problem : FireFox zeigt GAR NIX an, die Grafiken sind unsichtbar, wenn ich ins a-tag als Linktitel Text schreibe tauchen sie auf. Hat jemand eine browserunabhaengige Lösung ?
gruß
FraGILe
|
|
|
|
|
|
|
|