XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Anordnung von Submenüelementen... (http://xhtmlforum.de/showthread.php?t=34990)

sAt. 02.04.2005 02:55

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;}

HTML:
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>


wahsaga 02.04.2005 12:30

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]

- bestensfalls als "suboptimal" zu bezeichnen, oder?
auf die leeren listenelemente zu verzeichten, und stattdessen position oder margin-left oder padding-left zu benutzen, erscheint mir doch um einiges sinnvoller ...

sAt. 02.04.2005 14:41

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;}

HTML:
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>


knister 02.04.2005 20:02

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]
also die liste in eine zeile schreiben und schon sollte der bug von ie überrumpelt sein.

gruß knister 8)

sAt. 04.04.2005 13:59

war das ein verspäteter aprilscherz? ;)

Flocke 04.04.2005 14:19

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.

sAt. 04.04.2005 17:27

habs jetzt mit hilfe dieser seite hinbekommen: http://www.tjkdesign.com/articles/dropdown/demo.asp

trotzdem danke für alle antworten!


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022