zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2005, 08:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 61
eRoZion befindet sich auf einem aufstrebenden Ast
Standard Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera

Ich habe hier folgende Navigation (von listmatic), wo sich das Sub-Ul nicht floeten lässt wenn es absolute positioniert wird:


Code:
<html>
 <head>
  <title>Test</title>

  <style type="text/css">
html, body
{
 padding: 0;
 margin: 0;
}

body
{
 color: #FFC000;
 background-color: #000000;
 font-family: verdana, sans-serif;
 font-size: 1em;
}

#navigation
{
 width: 100%;
 height: 17px;
 font-size: 11px;
 background-color: #000000;
 white-space: nowrap;
 position: relative;
 padding: 0;
 margin: 0;
}

#navigation li
{
 float: left;
 margin: 0 0 0 2px;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 border-color: #AAAAAA #555555 #FFC000 #999999;
 list-style-type: none;
}

#navigation li a
{
 width: 90px;
 height: 16px;
 color: #666666;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 border-color: #CCCCCC;
 background-color: #EEEEEE;
 text-decoration: none;
 text-align: center;
 position: relative;
 padding: 0 4px;
 display: block;
}

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

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

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

#navigation li#logout
{
 float: right;
 margin: 0 2px 0 0;
}

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

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

#navigation ul#subnavigation
{
 white-space: nowrap;
 position: absolute;
 top: 20px;
 left: 0;
 padding: 0;
 margin: 0;
}

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

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

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

#navigation ul#subnavigation li#subactive a
{
 background-color: #CCCCCC;
 text-decoration: none;
}

#subnavigation_placeholder
{
 height: 22px;
 font-size: 11px;
 background-color: #EEEEEE;
 border-top: 3px solid #FFC000;
 border-bottom: 3px solid #FFC000;
}
  </style>
 </head>

 <body>
  <ul id="navigation">[*]
    Startseite
   
 
   <li id="active">
    G&auml;stebuch
  
    <ul id="subnavigation">
     <li id="subactive">Eintrag erstellen[*]Eintr&auml;ge bearbeiten[/list]   
 [*]
    Benutzer
   
 [*]
    Einstellungen
   
 
   <li id="logout">Abmelden[/list]
  <div id="subnavigation_placeholder"></div>
 </body>
</html>
Hat einer von euch eine Idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2005, 12:14
Benutzerbild von netspy
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 13.08.2004
Ort: Leipzig
Beiträge: 1.953
netspy sorgt für eine eindrucksvolle Atmosphärenetspy sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Ul mit Sub-Ul Navigation macht Darstellungsprobleme im O

Zitat:
Zitat von eRoZion
Ich habe hier folgende Navigation (von listmatic), wo sich das Sub-Ul nicht floeten lässt wenn es absolute positioniert wird:
http://www.w3.org/TR/CSS21/visuren.html#float-position
Zitat:
It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.
Mario
__________________
AppDev Blog · AppDev Forum
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2005, 13:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 61
eRoZion befindet sich auf einem aufstrebenden Ast
Standard

Ganz toll von Dir, nur hilft mir das nicht weiter.

Wie soll ich das denn sonst mach, wenn ich es so dargestellt haben möchte?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2005, 14:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von eRoZion
Ganz toll von Dir
Das Wort, das du suchst, heißt "Danke"

Zitat:
Wie soll ich das denn sonst mach, wenn ich es so dargestellt haben möchte?
Was willst du wie dargestellt haben?
Was soll es dir bringen, wenn das ul#subnavigation gefloatet ist?
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2005, 14:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 61
eRoZion befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Was willst du wie dargestellt haben?
So wie auf dem Bild im Anhang soll die "Sub-Navigation" auch im Opera dargestellt werden.

Zitat:
Was soll es dir bringen, wenn das ul#subnavigation gefloatet ist?
Eine horizontale Navigation mit Sub-Navigation.
Angehängte Grafiken
Dateityp: gif bild.gif (3,5 KB, 126x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2005, 14:19
Benutzerbild von netspy
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 13.08.2004
Ort: Leipzig
Beiträge: 1.953
netspy sorgt für eine eindrucksvolle Atmosphärenetspy sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von eRoZion
Ganz toll von Dir
Gern geschehen.

Zitat:
Zitat von eRoZion
Wie soll ich das denn sonst mach, wenn ich es so dargestellt haben möchte?
Ich weiß natürlich nicht, wie du es dargestellt haben willst und kann dir darauf logischerweise auch keine Antwort geben. Das einfachste ist aber wohl, entweder das Floaten (nicht flöten ) oder die absolute Positionierung wegzulassen. Dass sich beides nicht verträgt, ist ja eigentlich auch logisch. Ein absolut positioniertes Element wird aus dem normalen Elemenfluss genommen und kann somit auch um keine anderen Elemente drumherum fließen.

Mario
__________________
AppDev Blog · AppDev Forum
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2005, 14:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
So wie auf dem Bild im Anhang soll die "Sub-Navigation" auch im Opera dargestellt werden.
Aha. Dir geht's also um einen Darstellungsfehler in Opera.

Zitat:
Zitat von eRoZion
Zitat:
Was soll es dir bringen, wenn das ul#subnavigation gefloatet ist?
Eine horizontale Navigation mit Sub-Navigation.
Dazu musst du aber nicht das ul floaten, sondern die darin enthaltenen Listenelemente. Das geht auch wenn das ul absolut positioniert ist.
Aber:
das absolut positionierte ul braucht eine Angabe für die Breite.
Ebenso alle gefloateten Listenelemente.
float ohne width macht _immer_ Probleme in Opera (in CSS2 war das noch nicht zulässig, erst seit 2.1)
Mit Zitat antworten
  #8 (permalink)  
Alt 15.09.2005, 14:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 61
eRoZion befindet sich auf einem aufstrebenden Ast
Standard

Aber wie mache ich die Liste horizontal und positioniere das Sub-Ul unter dem ersten Listenelement der Elternliste? Normalerweise wird ja das Sub-Ul immer unter dem Elternlistenelement positioniert.
Mit Zitat antworten
  #9 (permalink)  
Alt 15.09.2005, 14:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von eRoZion
Aber wie mache ich die Liste horizontal und positioniere das Sub-Ul unter dem ersten Listenelement der Elternliste? Normalerweise wird ja das Sub-Ul immer unter dem Elternlistenelement positioniert.
absolut positionierte Elemente richten sich immer nach dem letzten ebenfalls positionierten Elternelement aus.
Wenn #navigation li dieses Elternelement sein soll, dann musst du es ebenfalls positionieren (relative).

Ich verstehe deine Frage aber nicht wirklich.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.09.2005, 15:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 61
eRoZion befindet sich auf einem aufstrebenden Ast
Standard

Ich habe jetzt nochmal alles überarbeitet und bin auch zu einer "Verbesserung" gekommen, aber beim floaten des Sub-Uls gibt es immer noch Probleme. Ich weis jetzt wirklich nicht mehr weiter.

Könnt ihr bitte mal gucken:
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;
 border-bottom: 3px solid #FFC000;
 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;
 height: 1em;
 width: 10%;
}

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

#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 
{
 position: absolute;
 left: 0;
 margin: 3px 0;
 padding: 0;
 width: 100%;
} 

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

#navigation ul#subnavigation li a 
{ 
 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>
EDIT:

Wenn ich das width aus #navigation li entfernen floatet zwar alles richtig, aber die Elemente sind dann alle unterschiedlich groß.
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
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Navigation ist nicht mittig Schokokrapfen CSS 29 20.09.2011 00:19
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:56 Uhr.