Problematik Menü

[Ilse Müller]

Hallo zusammen,

seit Ewigkeiten versuche ich nun meinen Horizont an der ein- oder anderen Stelle ein wenig zu erweitern. Bislang ohne Erfolg.

Derzeit scheitere ich an der Erstellung einer Navigationsbar, die eigentlich relativ einfach strukturiert sein soll.
Beispiel:
Ich verfüge über diverse Menüpunkte.
• mit Klick auf Menüpunkt 1 öffnen sich die Untermenüpunkte
• Klick auf z.B. Menüpunkt 2 lässt die Untermenüpunkte von Menüpunkt 1 wieder einfahren und die Untermenüpunkte von Menüpunkt 2 öffnen sich
• Alle Hauptmenüpunkte sind mit einer anderen Hintergrundgrafik belegt
• Die Untermenüpunkte sind jeweils mit einer anderen Hintergrundfarbe und einem Rahmen belegt

Die Funktion an sich habe ich auf dieser Seite gefunden:
http://web-nova.com/ezmenu.asp (Cascading)
Dazu die Funktion des "Floating" wäre perfekt für meine Navigationsbar.

Leider verstehe ich diese Realisierung nicht so wirklich und wüsste nun auch nicht, wie ich hier einen Hintergrund einfügen könnte.

Hat jemand von euch eine Idee und könnte mir ein wenig behilflich sein?

Viele Grüße
Petra

 

[FredNase]

http://www.tutorials.de/tutorials211060.html

 

[Ilse Müller]

Erst einmal vielen Dank für den Hinweis! Ich habe mich da durchexperimentiert, da ich noch relativ wenig mit CSS gemacht habe.

Jetzt steht die Navigation soweit, nur Kleinigkeiten sind mir noch nicht ganz klar. :-( (so sieht es aus)

CSS:
div {
width: 147px;
}

#master1 {
background-image: url(hintergrund.jpg);
position: relative;
margin: 2px 0px 0px 10px;
padding-left: 9px;
color: #6E6E6E;
font-weight: bold;
font-family:f rutiger,arial,helvetica;
font-size: 11px;
}

.sub {
position: relative;
background-image: url(hintergrund1.jpg);
margin: 2px 2px 0px 10px;
background-color: #F8F8F8;
font-weight: bold;
color: #6E6E6E;
font-family: frutiger,arial,helvetica;
font-size: 11px;
padding-left: 10px;
}

.thema {
position: relative;
margin: 2px 2px 0px 10px;
background-color: #F8F8F8;
line-height: 16px;
text-valign: middle;
color: #6E6E6E;
font-family: frutiger,arial,helvetica;
font-size: 11px;
}

HTML (zusammengefasst)
<div id='master1' onClick="open_close_sub('sub_master1')"> <a href="#">Menü</a></div>
<div id='sub_master1' style='display:none;'>
<div id='sub1' class='sub_lokal' onClick="open_close_sub('thema_sub1')"> <a href="#">Untermenü</a></div>
<div id='thema_sub1' style='display:none;'>
<div> <a href='#'>UnterUntermenü</a></div>
</div>

<div id='sub2' onClick="open_close_sub('thema_sub2')">
<a href="#">Untermenü</a></div>

Mein Problem:
1.) Das Menü an sich ist immer (egal wie ich die Body oder auch TD-Einstellungen vornehme) immer zu weit rechts. Es soll insgesamt nur 4px vom linken Rand entfernt sein.
2.) Die Menüpunkte sollen alle 147px breit sein. Beim UnterUntermenü ist dem so, alle anderen sind 156px breit, ich weiss nicht wie ich das abschalten kann bzw. wie das zu Stande kommt
3.) Ich habe die Navigationsdatei erst ausgelagert und dann via include in meine eigentliche Datei eingebunden. Die zugehörige (ebenfalls ausgelagerte Menü-CSS) habe ich im Body der Hauptdatei mit laden lassen und nun passierte was passieren musste. Alle DIV-Tags (z.B. für Überschriften, etc.) in der Hauptdatei wurden verschoben. Kann ich die Anweisung:

div {
width:147px;
}

In etwas anderes umbenennen, dass dann keinen Einfluss mehr auf das Gesamt-Layout meiner Seite hat?

4.) Sobald man einen Menüpunkt anklickt verschiebt sich die Gesamtseite ca. 2px nach rechts. Wenn ich den Menüpunkt wieder schliesse wieder die 2px nach links zurück. Das sieht man aber auch nur am Inhalt. Die Menüpunkte der Navigationsbar verschieben sich nicht sichtlich. Wie kann das sein?

Sorry, dass ich hier mit derart vielen und vielleicht auch unverständlichen Fragen auffahre, aber ich stehe (für mich) vor einem echten Problem, dass ich gern verstehen und beheben würde.

Petra

 

[FredNase]

Hallo Ilse Müller,

1.) Das Menü an sich ist immer (egal wie ich die Body oder auch TD-Einstellungen vornehme) immer zu weit rechts. Es soll insgesamt nur 4px vom linken Rand entfernt sein.

Schau mal die margin - Werte der Master, der .Sub und der .Thema im CSS an und ändere den vierten Wert auf 4px bzw. auf was du brauchst. (der Wert gibt den Abstand zum Linken Rand an; es gehen auch negative Angaben wie z.B. -4px).

2.) Die Menüpunkte sollen alle 147px breit sein. Beim UnterUntermenü ist dem so, alle anderen sind 156px breit, ich weiss nicht wie ich das abschalten kann bzw. wie das zu Stande kommt
3.) Ich habe die Navigationsdatei erst ausgelagert und dann via include in meine eigentliche Datei eingebunden. Die zugehörige (ebenfalls ausgelagerte Menü-CSS) habe ich im Body der Hauptdatei mit laden lassen und nun passierte was passieren musste. Alle DIV-Tags (z.B. für Überschriften, etc.) in der Hauptdatei wurden verschoben. Kann ich die Anweisung:

div {
width:147px;
}

In etwas anderes umbenennen, dass dann keinen Einfluss mehr auf das Gesamt-Layout meiner Seite hat?

Übernimm die width - Angabe mal in die Master, .Sub und .Thema im CSS, dann bezieht es sich nur auf diese div´s. Vielleicht löst das auch Problem Nr.2 .

4.) Sobald man einen Menüpunkt anklickt verschiebt sich die Gesamtseite ca. 2px nach rechts. Wenn ich den Menüpunkt wieder schliesse wieder die 2px nach links zurück. Das sieht man aber auch nur am Inhalt. Die Menüpunkte der Navigationsbar verschieben sich nicht sichtlich. Wie kann das sein?

Ändere den zweiten Wert der margin - Angabe bei .sub und .thema auf 0px und es sollte sich nichts mehr verschieben (der zweite Wert bestimmt den rechten Abstand).

Hoffe es hilft was...

Grüße