css listenformatierung

[joko88]

Hallo, mein erster Post hier, danke schonmal vorweg...
Mien Problem ich bekomme es einfach nicht hin, meine Liste richtig zu formatieren,
da ich zum Ersten noch nie mit Listen gearbeitet habe und zum Zweiten allg. noch ein HTML / CSS Neuling bin...
HTML:

<div id="navi"> 
        <ul>
           <li><a href="">Link1</a>
                  <ul>
                  <li><a href="">Sublink1</a></li>
                  <li><a href="">RiesenSublink2</a></li>
                  <li><a href="">Sublink3</a></li>
                  </ul>
           </li>           
           <li><a href="">Link1</a>
                <ul>
                  <li><a href="">Sublink4</a></li>
                  <li><a href="">Sublink5</a></li>
                  <li><a href="">Sublink6</a></li>
                </ul> 
          </li>
      </ul>                      
</div>

CSS:

#navi{
width:800px;
height:70px;
background-color:#0000ff;
list-style-type:none;
}       

#navi ul{
float:left;
width:100px;
height:35px;
margin:0px;
padding:0px;
line-height:35px;
text-align:center;
}

#navi ul a{
width:100px;
height:35px;
}

#navi ul a:hover{
width:100px;
height:35px;
background-color:#ffffff;
display:block;
}

#navi li{      
background-color:#346422;
width:100px;
height:35px;
float:left;
display:block;
}

#navi li a{
color:#000000;
text-decoration:none;   
display:block;
}

#navi li a:hover{
background-color:#ff0000;
text-decoration:none;    
width:100px;
height:35px;
display:block;
}

#navi ul li ul{
display:none;
}

#navi ul li:hover ul{
display:block;
position:absolute;
}

Gewollt ist halt, dass ein 70 px hoher div in 2 Teile zerlegt wird, oben und unten jeweils 35px, im Oberen Teil sind die ,,Hauptlinks'', überfährt man diese mit der Maus werden im Unteren Teil entsprechende Sublinks eingeblendet...
Funktioniert auch soweit, nur ich versteh nicht warum das float:left nicht umgesetzt wird, hängt das evtl. mit dem display:block zusammen?

und allg. eine Frage, ich hatte es anfangs damit probiert, um jeden Hauptlink ein ul mit eingeschlossenen li's für die Sublinks zu machen, da hat das mit dem Hover gar nicht funktioniert, fände ich strukturell aber sauberer, woran könnte das gelegen haben?

Also vielen Dank schonmal für eure Hilfe,

gruß joko

 

[Efchen]

float ist für Elemente, um die etwas rumfließen soll.
Üblicherweise bringt man so mehrere Block-Elemente nebeneinander. float impliziert display:block.

Du hast Deine Liste gefloatet, aber sonst keine Inhalte, die daneben dargestellt werden sollen. Daher siehst Du natürlich nichts.

Übrigens, wozu ist das div um die Liste? div und ul sind beides Block-Elemente, verhalten sich also gleich, und zudem bedeutet Inhalt mit div ausgezeichnet "Ich bin eine Gruppe". Dein div enthält aber nur ein Element, also ist hier keine Gruppe. Entferne das div. Mit dem hier vorgestellten Code ist das sinnlos.

Und für solche Fragen bietet es sich übrigens immer an, einen Link zur Seite zu geben.

Deine "allg. Frage" verstehe ich nicht.

 

[joko88]

ein Link zur Seite existiert leider nicht, ich probier ja gerade nur ein wenig herum...
der div ist da, damit das konstrukt eine feste Größe hat und mit einer Hintergrundfarbe versehen werden kann...
das mit deinen Inhalten versteh ich nicht ganz, gefloatet soll ja nur innerhalb des div's werden...
wenn ich Pseudocode mäßig ein konstrukt ähnlich wie folgendes definiere:

<div class="a">
       <div class="alinks">Bla</div>      ->mit float:left
       <div class="amitte">Bla</div>     ->mit float:left
       <div class="rechts">Bla</div>     ->mit float:right
</div>

werden mit ja auch alle 3 Div Container nebeneinander dargestellt...
was genau meinst du also mit ,,Inhalte'' ???

 

[Elroy]

ein Link zur Seite existiert leider nicht, ich probier ja gerade nur ein wenig herum...
der div ist da, damit das konstrukt eine feste Größe hat und mit einer Hintergrundfarbe versehen werden kann...

Grösse und Hintergrungfarbe kannst du auch direkt dem Menü zuweisen, dafür brauchst du kein div.

das mit deinen Inhalten versteh ich nicht ganz, gefloatet soll ja nur innerhalb des div's werden...
wenn ich Pseudocode mäßig ein konstrukt ähnlich wie folgendes definiere:

<div class="a">
<div class="alinks">Bla</div> ->mit float:left
<div class="amitte">Bla</div> ->mit float:left
<div class="rechts">Bla</div> ->mit float:right
</div>

werden mit ja auch alle 3 Div Container nebeneinander dargestellt...
was genau meinst du also mit ,,Inhalte'' ???

Du hast ein Menü und gibst diesem ein float: left. Da du aber keinen Inhalt hast der das Menü umfliesst kannst du die Umsetzung ja auch nicht sehen, oder ist da noch mehr HTML code den du uns nicht gezeigt hast.
Was willst du denn überhaupt mit diesem float erreichen?

Gruss
Elroy

 

[joko88]

also ich weiß echt nicht was ihr mit dem umfließen meint...
divs kann man auch ohne inhalt (vorrausgesetzt ihr meint mit inhalt text, links etc) floaten lassen,
der fehler warum es nicht nebeneinander angezeigt wurde war einfach, dass ich dem ul eine breite von 100px gegeben habe, den einzelnen li's aber auch, klar dass dann in dem ul nicht 3 * 100px angezeigt werden können...

erreichen will ich, dass die sublinks halt komplett nur auf einer linie unterhalb der hauptlinks angezeigt werden...

hab mal die komplette html datei wenn das so wichtig für euch ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title> TEST</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
<div id="navi"> 
        <ul><a href="">Link1</a>
                  <li><a href="">Sublink1</a></li>
                  <li><a href="">RiesenSublink2</a></li>
                  <li><a href="">Sublink3</a></li>
        </ul>
                               
        <ul><a href="">Link2</a>                
                  <li><a href="">Sublink4</a></li>
                  <li><a href="">Sublink5</a></li>
                  <li><a href="">Sublink6</a></li>
          </ul>                                     
</div>       
</body>
</html>

und css:

#navi{
width:800px;
height:70px;
background-color:#0000ff;
} 

#navi ul{
float:left;
height:70px;
margin:0px;
padding:0px;
line-height:35px;
text-align:center;
}

#navi ul a{
background-color:#ffffff;
width:100px;
height:35px;
display:block;
text-decoration:none;
}

#navi ul a:hover{
width:100px;
height:35px;
background-color:#ff0000;
display:block;
}

#navi li{      
background-color:#346422;
width:100px;
height:35px;
float:left;
display:block;
}

#navi li a{
color:#000000;
text-decoration:none;   
display:block;
}

#navi li a:hover{
background-color:#ff0000;
text-decoration:none;    
width:100px;
height:35px;
display:block;
}

#navi ul li{
display:none;
}

#navi ul:hover li{
display:block;
position:relative;
}

funktioniert jetzt soweit, einziges problem, beim Hovern der Sublinks verschiebt sich der Hauptlink 2 natürlich um die gesamtbreite der aufgeblobbten sublinks.
wie umgehe ich dieses Problem?

 

[Elroy]

also ich weiß echt nicht was ihr mit dem umfließen meint...
divs kann man auch ohne inhalt (vorrausgesetzt ihr meint mit inhalt text, links etc) floaten lassen,

float: left
Das mit float formatierte Element wird in ein Block-Element gewandelt und links von den Elementen plaziert, die es umfließen.

Eigentlich meinte ich das mit dem umfließen.
Das ein div ohne Inhalt keinen Sinn ergibt brauche ich wohl nicht extra zu sagen.

Gruss
Elroy

 

[joko88]

will mich jetzt nicht gleich an meinem ersten tag im forum unbeliebt machen, aber erstens war dieser beitrag ungefähr 0 hilfreich und zweitens sind leere div container mit definition inhalt=text nicht immer sinnlos, aber lassen wir diese unterhaltung, mir geht es ja nur darum mein problem zu lösen und dafür ist das ja belanglos...
danke trotzdem für deine antwort.

 

[Efchen]

war dieser beitrag ungefähr 0 hilfreich

Das liegt vielleicht auch an den schlechten Arbeitsvoraussetzungen (kein Link zur Seite!) und an Deinem noch nicht voll entwickelten HTML-Wissen, das Dich bremst und Dir jetzt noch nicht erlaubt, den Sinn in unseren Antworten zu erkennen.

und zweitens sind leere div container mit definition inhalt=text nicht immer sinnlos

Aus Sicht von HTML schon. Sie können in Einzelfällen ein wichtiges Instrument zur Gestaltung werden, z.B. zur Unterbringung einer Grafik, die lediglich zur Zierde da ist, aber die Regel ist das nicht. Die Regel ist leider, dass Anfänger um alles und jeden ein <div> packen und glauben, sie machen es richtig.

danke trotzdem für deine antwort.

Wir helfen doch immer wieder gerne!

 

[joko88]

hey,
ich fühle mich moralisch gepeitscht, schäme mich und bitte um Vergebung.
der div ist nicht sinnlos, da das Konstrukt später in eine andere HTML Seite integriert wird, ein Link zur Seite existiert wie bereits erwähnt nicht,
habe ja doch aber den kompletten Code gepostet, MEHR existiert einfach nicht..???

 

[Efchen]

ich fühle mich moralisch gepeitscht, schäme mich und bitte um Vergebung.

Was so viel heißt wie dass Du nichts verstanden hast und glaubst, wir erzählen Dir Märchen.

der div ist nicht sinnlos

Mit den Angaben die wir haben, ist das Element sinnlos, weil hier keine Gruppe vorliegt.

da das Konstrukt später in eine andere HTML Seite integriert wird

Da sehe ich noch keine Begründung für dieses Element.

ein Link zur Seite existiert wie bereits erwähnt nicht,
habe ja doch aber den kompletten Code gepostet, MEHR existiert einfach nicht..???

Wenn mehr nicht existiert, fehlt ja der Doctype und der gesamte Header und das HTML-Grunderüst.
Aber ich für meinen Teil bat um einen Link, weil man da mehr sieht, weil man da Developertools verwenden kann, weil Du da keine Fehler beim Kopieren Deines Codes machen kannst, weil Code lesen zu anstrengend ist, und weil ich der Meinung bin, dass der Fragesteller mehr Antworten bekommt, wenn er den Helfenden möglichst viel Arbeit abnimmt. Andere schaffen es auch, ihre Problemseite auf einem x-beliebigen, auch kostenlosen, Webspace abzulegen.

Das jetzt nicht als Vorwurf oder sonstwas, ich sag Dir nur wies ist, und wie Du Deine Chancen erhöhst, sinnvolle Antwortn zu bekommen.

 

[joko88]

okay, dann halt hier der online link...
TEST

funktionierend unter firefox 3.6 und opera 10.1 nicht valid, da nur ein test...

vielen Dank schonmal für die Hilfe

 

[Efchen]

Nur gut, dass wir mal nen Link haben, da sieht der Code nämlich ganz anders aus, als im UP.

Und wenn das nicht valide ist, dann kan nes auch nicht funktionieren. Das musst Du als erstes korrigieren.

1. Entferne das div. Das wird nicht benötigt.
2. Mach aus den zwei Listen nur eine.
3. Die Untermenüs werden als Liste ausgezeichnet, die in einem Listenelement steht (verschachtelte Listen).
4. Links in einer ul ohne ein li außen rum sind nicht erlaubt. Korrigiere das.
5. Nicht die ul muss floaten, sondern die Listenelemente.
6. Die inneren Listen bekommen absolute/relative Positionierung, damit sie nicht im Textfluss stehen und den "Link 2" nicht verschieben.

Schnell mal nen Link eingestellt, schon kann man Dir kompetent helfen. Hauptsache, wir haben mal eine Seite drüber philosophiert :-)

 

[joko88]

hey, danke für deine Antwort, ich bin gerade am rumprobieren und mir ist da jetzt eine Frage eingefallen,
ist es dann bei einer solch verschachtelten Liste besser, wenn man den einzelnen ul's und li's extra klassen zuweißt, weil beispielsweise
wenn ich folgenden aufbau habe:

<ul>
     <li>Test
           <ul>
                  <li>Bla</li>
                  <li>Bla</li>
           </ul> 
     </li>
</ul>

und dann dem ,,test'' eine border-bottom gebe mit ul li { border-bottom....
wird das ja auch für das ,,Bla'' übernommen (weil es ja gewissermaßen auch in einem ul li drin ist)... das lässt sich ja nur umgehen, wenn man jeweils klassen zuteilt oder?

 

[Efchen]

Nö, Du kannst das ja auch so machen:

ul li {
  border:1px solid black;
}
ul li ul li {
  border:0;
}

Ich würde sowieso nicht allen Listenelementen eine Klasse geben, sondern wenn dann nur der Liste selbst. Sonst schreibst Du Dich ja kaputt.

 

[joko88]

waah ok, das ist natürlich die elegantere variante, ich bin immer zu eifrig und erstelle für alle Elemente entsprechende Klassen :)
naja okay,
hier mal ein update:
TEST

habe versucht deine tips umzusetzen, so funktionieren wie ich es will tut es aber dennoch nicht, jemand 'ne Ahnung warum?
ps. sowohl Haupt-, als auch Sublinks sollen floaten (bzw. nebeneinander dargestellt werden..)

gruß joko

 

[Efchen]

Also zum einen hast Du in Deinen Unterlistenelementen sowohl float, als auch position drin. Das geht nicht, das widerspricht sich.
display:block brauchst Du bei float nicht, das wird impliziert.
Und irgendwo brauchst Du dann nochmal ein width für Deine absolut positionierte Ursprungsliste, damit nicht nur zwei Untermenupunkte nebeneinander stehen, weil durch position ist das Block-Element nur noch so breit, wie der Inhalt.

Ich habs eben hinbekommen, mit Firebug rumprobiert, kann Dir aber grad nicht mehr sagen, was ich alles geändert habe ;-) und muss jetzt weg...

 

[joko88]

Hey ho,
also ich hab jetzt geschafft, dass sich die beiden Zeilen nicht überlagern, es lag wie du schon erwähnt hast,
daran dass keine explizite width Angabe vorhanden war,
100% bin ich aber noch nicht zufrieden, da der Hover der Hauptlinks nicht erhalten bleibt, wenn ich auf die Sublinks
gehe...
Ich denke, dass liegt daran, dass die Liste noch nicht richtig verschachtelt ist, beispielsweise kann ich auch
aktuell nicht beiden 35px hohen Zeilen unterschiedliche Standart Hintergrund Farben geben,
da sich das << ul li >> immer auf beide Zeilen gleichzeitig auswirkt...

Was mir auch unklar ist, ist, dass wenn ich mit der Maus von unten an die Hauptlinks herangehe, die Subnavi's schon
aufbloppen, bevor ich auf dem Link bin, quasi sobald ich auf der Höhe der Sublinks bin...

Was genau überseh ich jetzt wieder, dass es noch nicht so funktioniert, wie es soll.

TEST

Vielen Dank schonmal für deine bisherige Hilfe,

gruß joko

 

[Efchen]

beispielsweise kann ich auch
aktuell nicht beiden 35px hohen Zeilen unterschiedliche Standart Hintergrund Farben geben,
da sich das << ul li >> immer auf beide Zeilen gleichzeitig auswirkt.

Dann verwende eindeutige IDs oder Klassen.

Was mir auch unklar ist, ist, dass wenn ich mit der Maus von unten an die Hauptlinks herangehe, die Subnavi's schon aufbloppen

Das liegt daran, dass Deine Liste schon da ist.
Du blendest nur die Listenelemente der zweiten Liste aus, nicht die zweite Liste selber, Du musst also "ul li ul" display:none geben, und nicht dem "ul li ul li".

da der Hover der Hauptlinks nicht erhalten bleibt, wenn ich auf die Sublinks gehe...

Auch das ist einfach. Du hoverst den Link und nicht das Listenelement. Wenn Du von oben nach unten gehst, bist Du auf dem Untermenü, aber hoverst ja nicht mehr den Link. Es muss "li:hover" sein, denn das gesamte Untermenü ist ja Teil des li und der hover ist somit erfüllt.

Und mit dem li:hover sind wir dann an der Stelle, an der es im IE6 nicht mehr funktioniert, weswegen man da eine JavaScript-Alternative benötigt.

 

[joko88]

hey ho, sorry, dass ich jetzt erst wieder schreibe, war etwas eingespannt und bin jetzt erst dazu gekommen, hier wieder zu lesen...
deine tips haben wunderbar funktioniert und ich hoffe du hast auch für folgendes problem eine lösung, mir ist nämlich mal wieder keine bekannt...
wie immer der link:
TEST

ich will quasi durch eine klasse active, je nachdem auf welcher seite man sich grad befindet immer den dazugehörigen punkt in der navigation einblenden...
problem ist nur, wie mach ich es dann, dass dieses display block der active klasse aufgehoben wird, sobald man einen anderen punkt in der navi hovert ???
gibt es da mit css und html only eine lösung?

riesen dank schonmal!

 

[Efchen]

Nein, weil weder HTML noch CSS die aktuelle Seite kennen. Der Browser bekommt ja eine statische HTML-Seite vom Server ausgeliefert, die verschiedenen Zustände, also die Markierung der aktiven Seite, musst Du serverseitig machen. Ein serverseitiges Script markiert den aktuellen Menüpunkt z.B. durch eine ID oder Klasse und auch die Auszeichnung der anderen Menüpunkte geschieht serverseitig so, dass Dein Stylesheet hinterher die Unterpunkte automatisch ausklappt.