Menü

:morgen: zusammen.

Ich möchte für meine Seite ein Menü machen, welches aus Bildern besteht. Ich habe immer 2 Bilder, eines, das immer angezeigt werden soll, und eines, das beim hovern und wenn der Menüpunkte gerade aktiv ist angezeigt werden soll.
Kann man das irgendwie per CSS regeln oder wie sollte ich das anstellen?

Das mit den hovern würde ich mit onmouseover/onmouseout ja hinbekommen, aber wie mach ich das, dass das eben auch bei dem aktiven Menüpunkt funktionierd?

Ich hab mal 2 Beispielbuttons angelegt:
<-Standart

<- hover & aktiver Menüpunkt

Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt…

mfg andi

CSS!

a.button {
    width: 120px;
    height: 20px;
    background-image: url(img/button.png);
}
a.button:hover, a.button:active {
    background-image: url(img/button_hover.png;
}

funktioniert auch ohne JS…du musst nur standard-text verwenden :wink:

[code]a.button {
width: 120px;
height: 20px;
background-image: url(img/button.png);
}
a.button:hover, a.button:active {
background-image: url(img/button_hover.png);
}

[/code]

Du hast die Klammer hinter button_hover.png Vergessen
Aber hätte er eigentlich merken müssen.

mfg

ichbin007

Keine Ahnung warum das nicht funktionierd, aber kann mir noch einmal wer helfen?
Also der HTML Teil sieht so aus:

[code]


News
Schule
Photos
Gästebuch
Links
Impressum
PHP
[/code]

müsste doch stimmen oder?!

in der CSS steht folgendes:

a.button { width: 120px; height: 20px; background-image: url(imgsrc/menu_button_1.png); } a.button:hover, a.button:active { background-image: url(imgsrc/menu_button_2.png); }

Bin jetzt echt planlos warum das nicht geht… :ps:

//anschaun könnt ihr euch das ganze hier: http://aschachinger.bplaced.net/ (menü)

////das mit den Hintergründen funktionierd jetzt doch, nur haben die buttons nicht die angegebene Höhe/Breit! :neutral_face:

ist ein Inline-Element, deshalb kannst du ihm keine Breite/Höhe zuweisen.
Musst in die CSS noch ein display:block; einbauen bzw. ein Block-Element verwenden.

also einfach den a in ein

packen und dem dan die Höhe/Breite zuweisen?!

…werd ich mal probieren…

//das funkt nich so wirklich…
kann man einer class eine Höhe und Breite zuweisen?

Erweitere das einfach:

a.button { width: 120px; height: 20px; background-image: url(imgsrc/menu_button_1.png); }
um die display: block Angabe, also:
a.button {
display: block;
width: 120px;
height: 20px;
background-image: url(imgsrc/menu_button_1.png);
}

Verwende lieber:

[code]

[/code]

Das ist korrekt, denn Code-Bedeutung (

    sind Listen) und Nutzung (du willst eine liste realisieren) stimmen so überein. Das sieht dann auch für Lynx-Nutzer gut aus und blinde können deine Homepage auch besser nutzen :slight_smile:

    Ich glaube, lis sind sowieso schon block, aber probiers trotzdem vorsichtshalber mal aus. Du kommst sowieso nicht drumrum :wink: Weise den lis die richtigen Maße zu, lass das a als block und weise dem a eine Breite von 100% zu

übertreibt doch nicht…natürlich ist ul/li standard für Listen, aber das a element muss sowiso die gesamte breite asufüllen.
Das ul/li ist dann nur noch eine Spielerei, die sich erst ab Untermenüs auszahlt :wink:

a.button {
  display: block;
  width: 120px;
  height: 20px;
  background-image: url(imgsrc/menu_button_1.png);
}

das sollte schon reichen :wink:

Das sind ja zwei unterschiedliche Probleme.
Bei dem CSS handelt es sich nur um Dekoration, insbesondere
wenn man die ganze Fläche anklickern können soll, wird man
da das a zum Blockelement machen müssen, oder neu wäre
auch display: inline-block (habe ich nicht getestet, welcher
browser das schon interpretiert, ist wohl mit CSS2.1
dazugekommen).

Ob Liste oder nicht, ist ein (X)HTML-Problem, also ein inhaltliches,
nicht nur dekoratives, hier scheint es sich ja um ein
Navigationsmenü zu handeln, also eine Liste, folglich ul, ol oder
dl drum herum und statt div dann eben li.
div an sich bedeutet gar nichts, das verwendet man mur dann,
wenn der Inhalt keine weitere Funktion hat oder rein gar kein
Element verfügbar ist, was eine ähnliche Funktion auszeichnet.
Salopp gruppiert das darin befindliche Elemente oder Text.
Meist bekommt solch ein div dann ein Attribut namens class,
dessen Wert grob beschreibt, was die Funktion des div ist.
Auch wenn das div nur verwendet wird, um CSS aus dekorativen
Zwecken aufzunehmen, ist das in Ordnung, auch da braucht man
dann in der Regel ein class-Attribut.

Man sollte aber so oft wie möglich Code verwenden, der auch Zweck vorgeschrieben hat, den er in der Seite erfüllen soll. Klar kannst du div-Container statt ul für Listen nehmen oder table statt ordentlichen div-Containern für das Seitendesign verwenden, das ist aber nicht schön und in xHTML nicht mehr erlaubt.