|
|||
Anordnung von Submenüelementen...
Kurz und bündig:
Das ist die Seite: http://satdot.com/projekt/test/ie/layout1.htm Im FF werden die Untermenüelemente richtig nebeneinander dargestellt, im IE werden sie untereinander dargestellt. Kann mir jemand sagen, wie ich es auch im IE schaffe, diese nebeneinander darstellen zu lassen? CSS: Code:
html { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:rgb(209,205,193); font-size:76%; font-family:Verdana,Arial,Helvetica,sans-serif; } body { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:rgb(209,205,193); } #content { display:block; overflow:auto; position:absolute; z-index:3; top:125px; bottom:52px; width:750px; margin-left:-376px; left:50%; border-left:1px solid #000; border-right:1px solid #000; background:#fff; } * html #content { top:0; bottom:0; height:100%; width:752px; border-top:129px solid #fff; border-bottom:50px solid #fff; } #head { background-image:url(header.jpg); position:absolute; margin-left:-376px; left:50%; top:0; width:750px; min-width:750px; height:125px; background-color:lightblue; font-size:1em; z-index:5; border:1px solid #000; } * html #head { top:2px; width:752px; height:98px; } * html #space {width:750px; height:25px; padding:0; position:absolute; margin:0; background-image:url(header.jpg); background-repeat:no-repeat; background-position:0% 100%; border-bottom:1px solid black;} #menu { background-image:url(header.jpg); position:relative; margin-top:75px; margin-left:-375px; left:50%; top:0; width:750px; height:50px; background-color:lightblue; background-image:url(header.jpg); background-repeat:no-repeat; background-position:0% 100%; font-size:1em; z-index:5; } * html #menu { width:750px; height:50px; margin-left:-375px; } #navlist { background:lightblue; height:25px; border-top:1px solid black; border-bottom:1px solid black; margin:0; padding:0; margin-top:0px; } #navlist ul { padding:0; margin:0; list-style:none; } #navlist li { float: left; margin: 0px; padding: 0px; list-style: none; display:inline; } #navlist li a:link, #navlist li a:visited { font-size:1em; font-weight:bold; color:#000; text-decoration:none; text-align:center; line-height:25px; height:25px; display:block; overflow:hidden; text-align:center; width:150px; } #navlist li a:hover, #navlist li a:active { background:orange; width:150px; } #navlist li:hover ul {left:0;} #navlist li.msieFix ul {left:0;} #navlist li ul { position:absolute; left:-2000px; width:100%; } .space2 { display:inline; float:left; height:25px; width:150px; } #navlist ul a:link, #navlist ul a:visited { } #navlist ul a:hover, #navlist ul a:active { background:blue; } #foot { text-align:center; position:absolute; margin-left:-376px; left:50%; bottom:0; width:750px; min-width:750px; height:50px; background:url(header2.jpg); background-position:0 100px; font-size:1em; z-index:5; border:1px solid #000; font-family: trebuchet MS, tahoma, verdana, arial, sans-serif; font-weight:bold; color:#000; } * html #foot { bottom:2px; width:752px; height:48px; } #content p { padding:5px; text-align:justify; } .boldhead { font-size:1.5em; font-weight:bold; } .bold {font-weight:bold;} .left {float:left; margin:10px; border:1px solid #000;} .right {float:right; margin:10px; border:1px solid #000;} .lefttext {float:left; width:300px; text-align:justify;} .righttext {float:right; width:300px; text-align:justify;} * html .lefttext {float:left; width:310px; text-align:justify;} * html .righttext {float:right; width:310px; text-align:justify;} Code:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <title>Layout 1</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /> <style type="text/css" media="screen"> </style> <link rel="stylesheet" href="msie.css" type="text/css" /> <script type="text/javascript"> <!-- if(document.styleSheets) document.styleSheets[1].disabled=true //--> </script> <script type="text/javascript"> <!--// Setting the Event Handlers Dinamically function swap(){this.className="msieFix"} function swapBack(){this.className="trigger"} function TJKSetEvents(){ var l = document.getElementsByTagName("li"); var lA= l.length; for(var i=0;i<lA;i++){ if(l[i].className=="trigger"){ l[i].onmouseover=swap; l[i].onfocus=swap; l[i].onmouseout=swapBack; l[i].onblur=swapBack; } } } //--> </script> <!--[if IE 5]> <style type="text/css" media="screen"> * html #navlist li ul {top:2.2em} * html #navlist li ul li a {line-height:1.4em;height:1.4em} </style> <![endif]--> </head> <body onload="TJKSetEvents()"> <noscript> <!--[if IE 5]> <style type="text/css" media="screen"> * html #navlist li ul {top:0} * html #TJKDDM #current ul {top:0} * html #navlist ul a:hover {line-height:17px} </style> <![endif]--> </noscript> <div id="head"> <div id="menu"> <ul id="navlist"> [*]Aktuelles <li class="trigger">Ressorts <ul> [*]Bildende Kunst [*]Literatur [*]Musik [*]Film [*]<span class="space2"></span> [/list] [*]Künstler [*]Projekte <li class="trigger">Information <ul> [*]<span class="space2"></span> [*]<span class="space2"></span> [*]Grundsätze [*]Entstehung [*]Kontakt</style> [/list] [/list] </div> </div> <div id="content"> Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt ...</p> </div> <div id="foot"> Menü </div> </body> </html> |
Sponsored Links |
|
|||
Re: Anordnung von Submenüelementen...
hm, ziemliche suppe, die du da gekocht hast ...
das problem scheint mit der absoluten positionierung zusammenzuhängen, die du benutzt um die unterpunkt-ULs "auszublenden" - sobald ich diese ein-/ausblendung durch veränderte displays ersetze, klappt's (was die horizontale darstellung angeht, die position der unterpunkte stimmt dann natürlich nicht mehr) - zumindest für ressorts, bei information geht's immer noch nicht. aber generell erscheint mir die struktur überdenkenswürdig - Code:
<li class="trigger">Information <ul> [*]<span class="space2"></span> [*]<span class="space2"></span> [*]Grundsätze [*]Entstehung [*]Kontakt</style> [/list] auf die leeren listenelemente zu verzeichten, und stattdessen position oder margin-left oder padding-left zu benutzen, erscheint mir doch um einiges sinnvoller ... |
Sponsored Links |
|
|||
erstmal danke für die antwort.
habe die platzhalter im untermenü nun rausgenommen und die untermenüs mit 'margin-left' platziert. allerdings war das ja nur ein schönheitsfehler und hängt nicht direkt mit der anordnung der listenelemente zusammen. habe deshalb noch bisschen mit 'position' der liste herumgespielt und diese mal auf 'relative' gesetzt und durch ein 'float:right' ergänzt. nun werden immerhin schonmal die untermenüpunkte nebeneinander dargestellt. das ganze sieht so aus: http://satdot.com/projekt/test/ie/position/layout1.htm. kennt jemand eine möglichkeit nun die obermenüelemente wieder nebeneinander zu platzieren und das design im IE wieder zu korrigieren? CSS: Code:
html { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:rgb(209,205,193); font-size:76%; font-family:Verdana,Arial,Helvetica,sans-serif; } body { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:rgb(209,205,193); } #content { display:block; overflow:auto; position:absolute; z-index:3; top:125px; bottom:52px; width:750px; margin-left:-376px; left:50%; border-left:1px solid #000; border-right:1px solid #000; background:#fff; } * html #content { top:0; bottom:0; height:100%; width:752px; border-top:129px solid #fff; border-bottom:50px solid #fff; } #head { background-image:url(header.jpg); position:absolute; margin-left:-376px; left:50%; top:0; width:750px; min-width:750px; height:125px; background-color:lightblue; font-size:1em; z-index:5; border:1px solid #000; } * html #head { top:2px; width:752px; height:98px; } * html #space {width:750px; height:25px; padding:0; position:absolute; margin:0; background-image:url(header.jpg); background-repeat:no-repeat; background-position:0% 100%; border-bottom:1px solid black;} #menu { background-image:url(header.jpg); position:relative; margin-top:75px; margin-left:-375px; left:50%; top:0; width:750px; height:50px; background-color:lightblue; background-image:url(header.jpg); background-repeat:no-repeat; background-position:0% 100%; font-size:1em; z-index:5; } * html #menu { width:750px; height:50px; margin-left:-375px; } #navlist { background:lightblue; height:25px; border-top:1px solid black; border-bottom:1px solid black; margin:0; padding:0; margin-top:0px; } #navlist ul { padding:0; margin:0; list-style:none; } #navlist li { float: left; margin: 0px; padding: 0px; list-style: none; display:inline; } #navlist li a:link, #navlist li a:visited { font-size:1em; font-weight:bold; color:#000; text-decoration:none; text-align:center; line-height:25px; height:25px; display:block; overflow:hidden; text-align:center; width:150px; } #navlist li a:hover, #navlist li a:active { background:orange; width:150px; } #navlist li:hover ul {left:0;} #navlist li.msieFix ul {left:0;} #navlist li ul { position:relative; left:-2000px; width:100%; float:right; } #navlist ul a:link, #navlist ul a:visited { } #navlist ul a:hover, #navlist ul a:active { background:blue; } #foot { text-align:center; position:absolute; margin-left:-376px; left:50%; bottom:0; width:750px; min-width:750px; height:50px; background:url(header2.jpg); background-position:0 100px; font-size:1em; z-index:5; border:1px solid #000; font-family: trebuchet MS, tahoma, verdana, arial, sans-serif; font-weight:bold; color:#000; } * html #foot { bottom:2px; width:752px; height:48px; } #content p { padding:5px; text-align:justify; } .boldhead { font-size:1.5em; font-weight:bold; } .bold {font-weight:bold;} .left {float:left; margin:10px; border:1px solid #000;} .right {float:right; margin:10px; border:1px solid #000;} .lefttext {float:left; width:300px; text-align:justify;} .righttext {float:right; width:300px; text-align:justify;} * html .lefttext {float:left; width:310px; text-align:justify;} * html .righttext {float:right; width:310px; text-align:justify;} Code:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <title>Layout 1</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /> <style type="text/css" media="screen"> </style> <link rel="stylesheet" href="msie.css" type="text/css" /> <script type="text/javascript"> <!-- if(document.styleSheets) document.styleSheets[1].disabled=true //--> </script> <script type="text/javascript"> <!--// Setting the Event Handlers Dinamically function swap(){this.className="msieFix"} function swapBack(){this.className="trigger"} function TJKSetEvents(){ var l = document.getElementsByTagName("li"); var lA= l.length; for(var i=0;i<lA;i++){ if(l[i].className=="trigger"){ l[i].onmouseover=swap; l[i].onfocus=swap; l[i].onmouseout=swapBack; l[i].onblur=swapBack; } } } //--> </script> <!--[if IE 5]> <style type="text/css" media="screen"> * html #navlist li ul {top:2.2em} * html #navlist li ul li a {line-height:1.4em;height:1.4em} </style> <![endif]--> </head> <body onload="TJKSetEvents()"> <noscript> <!--[if IE 5]> <style type="text/css" media="screen"> * html #navlist li ul {top:0} * html #TJKDDM #current ul {top:0} * html #navlist ul a:hover {line-height:17px} </style> <![endif]--> </noscript> <div id="head"> <div id="menu"> <ul id="navlist"> [*]Aktuelles <li class="trigger">Ressorts <ul> [*]Bildende Kunst [*]Literatur [*]Musik [*]Film [/list] [*]Künstler [*]Projekte <li class="trigger">Information <ul style="margin-left:300px;"> [*]Grundsätze [*]Entstehung [*]Kontakt</style> [/list] [/list] </div> </div> <div id="content"> Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt ... </div> <div id="foot"> Menü </div> </body> </html> |
|
|||
hi,
es gibt eine ganz einfache lösung: anstatt: Code:
<ul>[*]Bildende Kunst[*]Literatur[*]Musik[*]Film[*]<span class="space2"></span>[/list] Code:
<ul>[*]Bildende Kunst[*]Literatur[*]Musik[*]Film[*]<span class="space2"></span>[/list] gruß knister |
|
|||
Ich kann mir gut vorstellen, daß das Problem darin liegt, daß die umfassenden Listenelemente links floaten und die eingebetteten Listenelemente (Submenüs) rechts floaten. Und das ohne jegliches Clearing. Zudem gibt es keine Notwendigkeit dafür.
Also lösch doch mal das clear: right. Eine funktionierende Navigation findest Du beispielsweise bei Maxdesign. (Wo sonst?) Bekannt ist auch der Kalsey-Ansatz.
__________________
Grüße aus Mainz, Jens ------------------------------------------------------ [webkrauts.de] [blog.grochtdreis.de] |
|
|||
habs jetzt mit hilfe dieser seite hinbekommen: http://www.tjkdesign.com/articles/dropdown/demo.asp
trotzdem danke für alle antworten! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Frage zur Anordnung von div´s | blamaster | CSS | 2 | 11.05.2011 14:38 |
Probleme DIV Höhe, Anordnung | kran | CSS | 4 | 07.11.2010 11:23 |
Bildergallerie - Anordnung | reeky | CSS | 3 | 08.08.2010 14:00 |
Gleichmäßige, browserübergreifende Thumbnail Anordnung | Lizzylein | CSS | 10 | 15.01.2010 20:31 |
css dropdown navi mit js -- Probleme mit Anordnung d. Listen | Nars | CSS | 3 | 15.03.2008 20:24 |