Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera - Seite 2

fricca · #11 (**permalink**) 15.09.2005, 14:47

Das absolut positionierte ul-Element hat noch immer keine Angabe für die Breite.
Und überprüfe deine Höhenangaben für die li-Elemente - 1em ist zu wenig.

Außerdem braucht dein Dokument dringend eine Doctype-Angabe

eRoZion · #12 (**permalink**) 15.09.2005, 15:16

Soweit funktioniert jetzt auch alles (oben ist ein aktualisierter Code), aber wenn ich den Elternlistenelementen eine "width" gebe, hat das auch Auswirkung auf das Sub-Ul und seinen gefloateten Listenelementen.

http://scripts.hackfleischbrothers.de/test.htm

Ist echt kompliziert.

fricca · #13 (**permalink**) 15.09.2005, 15:41

Zitat:

Zitat von eRoZion

Soweit funktioniert jetzt auch alles (oben ist ein aktualisierter Code), aber wenn ich den Elternlistenelementen eine "width" gebe, hat das auch Auswirkung auf das Sub-Ul und seinen gefloateten Listenelementen.

Ja sicher.
Wenn du dort eine andere Breite willst, dann schreib diese bei #subnavigation li rein.

Wenn du keine festen Breiten vergeben willst, dann kannst du deine Listen mit display:inline nebeneinander bringen.

eRoZion · #14 (**permalink**) 15.09.2005, 16:20

Es ist mir absolut nicht möglich, das Ganze zum Laufen zu bringen. Im Mozilla wird es genau so dargestellt, wie ich es möchte, aber im Internet-Explorer wird die Kindliste nicht auf 100% ausgeweitet und im Opera werden die Elemente der Kindliste nicht gefloatet.

Ich brauche bitte praktische Hilfe komme so keinen schritt weiter.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Test</title> 

  <style type="text/css">
body
{
 color: #FFC000;
 background-color: #000000;
 font-family: verdana, sans-serif;
 font-size: 1em;
}

#navigation
{
 font-size: 0.7em;
 position: relative;
 width: 100%;
 padding: 0;
 margin: 0;
}

#navigation li
{
 float: left;
 white-space: nowrap;
 list-style-type: none;
 background-color: #EEEEEE;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 border-color: #AAAAAA #555555 #EEEEEE #999999;
 margin: 0 0 0 2px;

}

#navigation li a
{
 display: block;
 color: #666666;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 border-color: #CCCCCC;
 text-decoration: none;
 text-align: center;
 padding: 2px;
 width: 80px;
}

#navigation li a:hover
{
 text-decoration: underline;
}

#navigation li#active
{
 background-color: #FFC000;
}

#navigation li#active a
{
 color: #000000;
 font-weight: bold;
 border-color: #FFD45F #AA7C22 #694E0A #FFE396;
}

#navigation li#active a:hover
{
 text-decoration: none;
}

#navigation li#logout
{
 float: right;
 background-color: #FFC000;
 margin: 0 2px 0 0;
}

#navigation li#logout a
{
 color: #000000;
 font-weight: bold;
 border-color: #FFD45F #AA7C22 #694E0A #FFE396;
}

#navigation ul#subnavigation 
{
 border-top: 3px solid #FFC000;
 border-bottom: 3px solid #FFC000;
 background-color: #EEEEEE;
 position: absolute;
 left: 0;
 margin: 0;
 padding: 0;
 width: 100%;
} 

#navigation ul#subnavigation li 
{
 border: 0; 
 margin: 0;
 padding: 0;
}

#navigation ul#subnavigation li a 
{
 width: 80px;
 color: #000000; 
 font-weight: normal;
 border: 0;
} 

#navigation ul#subnavigation li a:hover 
{ 
 text-decoration: underline; 
} 

#navigation ul#subnavigation li#subactive
{ 
 background-color: #CCCCCC;
}

#navigation ul#subnavigation li#subactive a
{ 
 text-decoration: none; 
}
  </style> 
 </head> 

 <body> 
  <ul id="navigation"> [*] 
    Text 
    
  
   <li id="active"> 
    Text 
  
    <ul id="subnavigation"> 
     <li id="subactive">Text [*]Text [*]Text [*]Text [/list]    
  [*] 
    Text 
    
  [*] 
    Text 
    
  
   <li id="logout">Text [/list] </body> 
</html>

fricca · #15 (**permalink**) 15.09.2005, 17:16

Zitat:

im Opera werden die Elemente der Kindliste nicht gefloatet.

Sie werden schon gefloatet - nimm eine nicht-%-Breite.
width:100% für die Subnavigation hat keine Auswirkung (zumindest im Opera), da das Elternelement keine Breite hat. Darauf würde sich die Breite in % beziehen.

Kannst du nicht diesen durchgehenden Balken über ein gekacheltes Hintergrundbild realisieren?

eRoZion · #16 (**permalink**) 15.09.2005, 18:51

Diese Lösung ist mir heute vormittag auch durch den Kopf geschwirrt, aber dann müsste ich die font-size für den Kopf und die Navigation in pixel angeben.

derda · #17 (**permalink**) 15.09.2005, 21:49

schau dir mal das Beispiel http://css.maxdesign.com.au/listamat...rizontal02.htm auf listamatic an. das funktioniert auch im opera.
Im wesentlichen wurde bei a die eigenschaften position: relative und display: block weggelassen sowie beim li das float:left. der einzige nachteil, der mir aufgefallen ist, ist, dass die elemente in der ersten ebene nun nicht mehr alle gleich breit sind.

mal eine kombination von beidem, getestet in ff, ie6 netscape und opera:

Code:

*{
padding:0;
margin:0;
}

body{
background:#fff url(ivbl.gif) scroll no-repeat;
background-position:0 4.05em;
padding-top:3em;
}

div#navcontainer ul ul{visibility:hidden;}
div#navcontainer li#active ul{visibility:visible;}

#navcontainer a { text-decoration: none; }

#navcontainer li { display: inline; }

/*1st level elements*/
#navcontainer ul
{
position: relative;
height:1.05em;
margin-left:120px;
list-style-type: none;
white-space: nowrap;
}

div#navcontainer ul li
{
margin: 0 0 0 2px;
}

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
padding: 1px 0.4em 2px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
color: #900;
font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
color: #000;
text-decoration: underline;
}

/*current Link*/
#navcontainer ul #active a,
#navcontainer ul #active a:link,
#navcontainer ul #active a:visited { 
font-weight: bold;
background-color: #fc0;
color: #990000;
border-color: #f90 #c00 #fc0 #fc0;
}

#navcontainer ul a#current:hover
{
color: #fff;
}

/*Second and subsequent levels*/
#navcontainer ul ul
{
position: absolute;
left: 0;
top: 1.05em;
height: 0.95em;
margin:0;
padding: 0 0 4px 0;
width: 100%;
border-top: none;
background-color: #fc0;
white-space: nowrap;
border:0;
}

#navcontainer ul ul li { 
display: inline; 
width: auto;
margin: 0;
border: 0;
}

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color:none;
width: auto;
padding: 0.06em 1em;
border: 0;
font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
color: #00c;
text-decoration: underline;
font-weight: 400;
}

/*current Link*/
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited
{
background-color: #fc0;
color: #000;
}

Grüße
Bernhard

eRoZion · #18 (**permalink**) 16.09.2005, 09:30

Genau diese Liste hatte ich auch schon umgebaut.

Leider tritt dann aber, wie du schon sagtest, dass Problem mit der Unterschiedlichen breite der Elemente auf; und damit kann ich leider nicht leben.

Ich habe jetzt erstmal auf Semantik geschissen und die Sub-Navigation von der Hauptnavigation abgetrennt. So funktioniert es jetzt wenigstens und ich kann die Schrift wieder relativ angeben.

Das einzigste Problem was ich jetzt noch habe, ist, dass der Internet-Explorer bei der Positionierung der Elemente der Hauptnavigation mit "margin", jeweils 2 Pixel zu viel an den äußeren Rändern einrückt.

Ich habe hier "ul#navigation li" und hier "ul#navigation li#right" eigentlich angegeben, dass er nur 2 Pixel einrücken soll und der Internet-Explorer macht 4 Pixel an den äußeren Rändern.

Hier mal ein Link:
http://scripts.hackfleischbrothers.de/test3.htm

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29