zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden horizontales Menü 2 Zeilen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.10.2006, 13:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2006
Beiträge: 9
daniele1985 befindet sich auf einem aufstrebenden Ast
Standard horizontales Menü 2 Zeilen

Hallo zusammen,
ich hatte hier schonmal einen Beitrag geschrieben, dabei ging es um ein horizontales Menü, welches ich inzwischen auch hinbekommen habe. Weiter unten werdet ihr es gleich bewundern können.

Als erstes würde ich gerne mal den code posten und eure Meinung dazu wissen. Lasst ihr das so durchgehen oder habt ihr vielleicht einen verbesserungsvorschlag? Ich hab das Menü noch nicht in allen Browsern getestet bin also noch unsicher ob es auch wirklich überall funktioniert.

Hier der code:
CSS:
PHP-Code:
<style type="text/css">
#wrapGlobalNav {margin:0;padding:0;width:100%;min-width:753px;width:expression(document.body.clientWidth < 800 ? "753px" : "100%" );
  
background:url('globalNavBg.png'top left repeat-x;height:45px;}
#globalNavigation ul {margin:0;padding:0;}
#globalNavigation li {float:left;list-style:none;line-height:35px;margin:0 30px 0 0;padding:0 10px 1px 10px;}
#globalNavigation a {display:block;padding:0;margin:0;color:#D90081;text-decoration:none;}
#globalNavRight {float:right;width:25px;height:45px;padding:0;margin:0;background:url("globalNavRight.png") top left no-repeat;}
#globalNavLeft {float:left;width:25px;height:45px;padding:0;margin:0;background:url("globalNavLeft.png") top left no-repeat;}
#wrapGlobalNav .active{background:url('globalNavBgActive.png') top left repeat-x;}
</style
HTML:
PHP-Code:
<div id="wrapGlobalNav">
  <
div id="globalNavLeft"></div>
  <
div id="globalNavRight"></div>    
  <
ul id="globalNavigation"
      <
li><a href="indexLoggedIn.jsp">Start</a></li>
      <
li class="active"><a href="profile">Meine Seite</a></li>
      <
li><a href="events">Meine Termine</a></li>
      <
li><a href="friends">Meine Freunde</a></li>
      <
li><a href="messages">Postfach</a></li>
  </
ul>
</
div
So! Jetzt hätte ich da allerdings noch eine Frage, und zwar hat jeder der Links auch noch "Unterlinks". Diese sollen in einer zweiten Zeile erscheinen.(Im Bild der rote Text)
Wie kann ich das umsetzen? Hat da jemand eine Idee? Ich komme da kein Stück weiter! Würde mich über Hilfe wirklich sehr freuen!

Damit ihr es euch besser vorstellen könnt hier noch ein Bild:
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.10.2006, 14:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Du suchst ein Drop-Down Menu, Beispiele dazu hab ich neulich erst in den FAQ-Thread eingefügt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.10.2006, 14:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Als erstes solltest Du Dir abgewöhnen alles in eine Zeile zu schreiben. Das ist völlig unleserlich so.

Ich habe mal (weitgehend ungetestet) dein Code umgeschrieben. Unten folgen Kommentare dazu.

Code:
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#wrapGlobalNav {
			min-width:753px;
			width:expression(document.body.clientWidth < 800 ? "753px" : "100%" );
			background:url('globalNavBg.png') top left repeat-x; 				}

		#globalNavigation {
			background:url("globalNavRight.png") top right no-repeat;
			padding-right: 10px /* Breite der HG-Grafik */
		}

		#globalNavigation li {
			float:left;
			list-style:none;
			line-height: 35px;
			margin:0 30px 0 0;
			height: 45px;
		}
		#globalNavigation li.first {
			background:url("globalNavLeft.png") top left no-repeat;
			padding-left: 10px /* Breite der HG-Grafik */
		}
		#globalNavigation a {
			padding:0 10px 1px 10px; 
			display:block;
			color:#D90081;
			text-decoration:none;
		}
		#globalNavigation .active{
			background: white url('globalNavBgActive.png') top left repeat-x;
		}
	</style>
Code:
<div id="wrapGlobalNav">
  <ul id="globalNavigation"> 
      <li class="first"><a href="indexLoggedIn.jsp">Start</a></li>
      <li class="active"><a href="profile">Meine Seite</a></li>
      <li><a href="events">Meine Termine</a></li>
      <li><a href="friends">Meine Freunde</a></li>
      <li><a href="messages">Postfach</a></li>
  </ul>
</div>
Zum HTML: Die beiden DIVs für den linken und rechten Endgrafik sind unnötig. Die Grafiken können auf vorhandere Elemente gelegt werden (s.u.)

Zum CSS:
1) Universal-Selektor, der alle Margins und Paddings zurück setzt. Du hattest insbedonder beim UL noch die Default-Werte, was zu verschiedenen Positionierungen in Browsern führte. Dadurch werden die meisten anderen Margin/Padding-Angaben unnötig.
2) width: 100% ist in der regel unnötig. Block-Elemente haben eine Breite von "auto",welches (wenn Padding, margin, etc.) "100%" entspricht
3) Die Höhenangabe habe ich zum LI verschoben. So passen sich die "außeren" Elemente automatsich an eventuelle Änderungen an. Grundsätzlich sind aber fixe Höhenangaben keine gute Idee. Ich persönlcih würde das ganze möglichst mit flexibeler Höhe implementieren, was ist aber eine andrere Struktur und Grafiken, die in "oberen" und "unteren" Teil aufgeteilt sind nötig (angeleht an eine der vielen "runde Ecken"-Lösungen, die es gibt).
4) Das Padding habe ich in die A-Elemente geschoben, damit die Links größer werden.

Bezüglich der Untermenüpunkte:
Semantisch die richtige Lösung wäre eine Unter-UL-Liste innerhalb des entsprechenden LI, aber das würde bedeuten, das es absolute positioniert werden müsste, was - je nach dem Rest des Layouts - problematisch sein könnte. Ansonsten einfach eine weitere UL-Liste noch dem Hauptmenü einfugen und getrennt formatieren.

Robin
Mit Zitat antworten
  #4 (permalink)  
Alt 18.10.2006, 15:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2006
Beiträge: 9
daniele1985 befindet sich auf einem aufstrebenden Ast
Standard

Hallo! Erstmals vielen Dank für diese ausführliche Antwort!
Ich habe das jetzt mal soweit umgesetzt wie du beschrieben hast, doch leider sieht es noch nicht ganz so aus, wie es aussehen soll!
Zu den "Unterlinks" und dem vermeiden von festen Höhenangaben würde ich gerne später nochmals kommen. Ich habe hier jetzt also mal folgenden code:

PHP-Code:
<head>
    <
style type="text/css">
        
#wrapGlobalNav * {
            
margin0;
            
padding0;
        }
        
#wrapGlobalNav {
            
min-width:753px;
            
width:expression(document.body.clientWidth 800 "753px" "100%" );
            
background:url('globalNavBg.png'top left repeat-x;
        }
        
#globalNavigation {
            
background:url("globalNavRight.png"top right no-repeat;
            
padding-right10px /* Breite der HG-Grafik */
        
}
        
#globalNavigation li {
            
float:left;
            list-
style:none;
            
line-height35px;
            
margin:0 30px 0 0;
            
height45px;
            
background:url('globalNavBg.png'top left repeat-x;
        }
        
#globalNavigation li.first {
            
background:url("globalNavLeft.png"top left no-repeat;
            
padding-left25px /* Breite der HG-Grafik */
        
}
        
#globalNavigation li.last {
            
background:url("globalNavRight.png"top left no-repeat;
            
padding-left25px /* Breite der HG-Grafik */
        
}        
        
#globalNavigation a {
            
padding:0 10px 1px 10px
            
display:block;
            
color:#D90081;
            
text-decoration:none;
        }
        
#globalNavigation .active{
            
backgroundwhite url('globalNavBgActive.png'top left repeat-x;
        }
    </
style>
</
head
PHP-Code:
<div id="wrapGlobalNav">
  <
ul id="globalNavigation">
      <
li class="first"><a href="indexLoggedIn.jsp">Start</a></li>
      <
li class="active"><a href="profile">Meine Seite</a></li>
      <
li><a href="events">Meine Termine</a></li>
      <
li><a href="friends">Meine Freunde</a></li>
      <
li><a href="messages">Postfach</a></li
      <
li class="last"></li>     
  </
ul>
</
div
Das ganze sieht dann so aus:



Es scheint also schon ganz gut zu funktionieren. Wie du siehst habe ich das letzte Bild auch noch eingefügt klappt ja auch ganz gut nur dass eben das <li> element leer ist, stört ja aber eignetlich nicht weiter? Oder hast du hier einen besseren vorschlag?
Weiter siehst du dass das Hintergrundbild von wrapGlobalNav irgendwie nicht sichtbar ist...ich kann mir das nicht erklären, das ist auch der Grund weshalb da die Lücken entstehen...
Es wäre nett wenn du dir das nochmal anschauen könntest! Und zum Thema feste Höhenangeben vermeiden? Wie meinst du das? Ich kann die Grafiken auch anderst gestalten, das ist kein Problem!
Vielen Dank und Grüße!
Ach und was ich auch noch sagen wollte! Das Menü ist jetzt leider keine 100% mehr breit, und das ist eigentlich für das restliche Layout schon wichtig....es sollte immer über die ganze Seite gehen....

Daniele

Geändert von daniele1985 (18.10.2006 um 15:33 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 18.10.2006, 15:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von daniele1985 Beitrag anzeigen
nur dass eben das <li> element leer ist, stört ja aber eignetlich nicht weiter? Oder hast du hier einen besseren vorschlag?
vergib "first" und "last" doch dem ersten und letzten <li> mit Inhalt.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.10.2006, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2006
Beiträge: 9
daniele1985 befindet sich auf einem aufstrebenden Ast
Standard

dann sieht das ganze so aus:



mann mann ich bin noch am verzweifeln mit dem blöden Menü
Mit Zitat antworten
  #7 (permalink)  
Alt 18.10.2006, 15:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

first und last brauchen dann natürlich eine Hintergrundgrafik bestehend aus dem eigenen Hintergrund und dem jeweiligen Rand (musst Du Dir im Grafikprogramm zusammenschrauben) - und den nötigen Platz dafür. Dachte, das wäre selbsterklärend.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.10.2006, 16:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2006
Beiträge: 9
daniele1985 befindet sich auf einem aufstrebenden Ast
Standard

hmm sorry, aber das verstehe ich nicht...könntest du das ein bisschen genauer erläutern?
Vielen Dank...aber ich schein zu blöd dafür zu sein
Mit Zitat antworten
  #9 (permalink)  
Alt 19.10.2006, 09:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

nein, bist Du sicher nicht

Also: das Li-Element mit der Klasse first erhält eine etwas größere Breite und eine eigene, in diese Breite passende, Hintergrundgrafik, die aus dem linken Rand und dem Listen-Hintergrund besteht. Du musst also im Grafikprogramm den bisherigen linken Rand mit dem "normalen" Listen-Hintergrund zusammensetzen.

Dasselbe passiert mit last. Nur eben mit dem rechten Rand.

OK?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.10.2006, 00:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2006
Beiträge: 9
daniele1985 befindet sich auf einem aufstrebenden Ast
Standard

Hey!
Ich habs doch tatsächlich hinbekommen! Vielen Dank für deine zweite Erklärung. Jetzt habe ich nur noch diese hässliche eine Problem mit den Unterlinks...

Wie kriege ich da jetzt unterlinks hin so dass sie über dem Schatten liegen..?? Ich habe schon viel probiert, aber ich kriegs leider nicht hin....
Ich wäre für erneute Hilfe sehr dankbar!!



Hier mein Code:

CSS:
PHP-Code:
    <style type="text/css">
        
#wrapGlobalNav * {
            
margin0;
            
padding0;
        }
        
#wrapGlobalNav {
            
height:47px;
            
min-width:753px;
            
width:expression(document.body.clientWidth 800 "753px" "100%" );
            
background:url('globalNavBg.png'top left repeat-x;
        }
        
#globalNavigation {
            
background:url("globalNavRightBg.png"top right no-repeat;
            
padding-right100px;
            
height:47px;
        }
        
#globalNavigation li {
            
float:left;
            list-
style:none;
            
line-height35px;
            
margin:0 30px 0 0;
            
height47px;
            
background:url('globalNavBg.png'top left repeat-x;
        }
        
#globalNavigation li.first {
            
background:url("globalNavLeftBg.png"top left no-repeat;
            
padding-left15px;
        }    
        
#globalNavigation a {
            
padding:0 10px 1px 10px
            
display:block;
            
color:#D90081;
            
text-decoration:none;
        }
        
#globalNavigation .active{
            
backgroundwhite url('globalNavBgActive.png'top left repeat-x;
        }
        
#globalNavigation .activeFirst{
            
backgroundwhite url('globalNavLeftBgActive.png'top left repeat-x;
            
padding-left15px
        
}
    </
style
HTML:
PHP-Code:
<div id="wrapGlobalNav">
  <
ul id="globalNavigation">
      <
li class="first"><a href="indexLoggedIn.jsp">Start</a></li>
      <
li class="active"><a href="profile">Meine Seite</a></li>
      <
li><a href="events">Meine Termine</a></li>
      <
li><a href="friends">Meine Freunde</a></li>
      <
li><a href="messages">Postfach</a></li>    
  </
ul>
</
div

Geändert von daniele1985 (20.10.2006 um 00:54 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
horizontales Menü mit Subemenü ohne Listenelemente aber mit Grafiken metalmarder CSS 4 21.02.2009 20:38
horizontales Menü sarahg CSS 9 10.02.2009 14:25
Horizontales Menü, Zeilenumbruch verhindern? basti0071 CSS 10 01.12.2008 15:29
Horizontales Menü - zweizeilig franc CSS 11 13.10.2008 12:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:53 Uhr.