Navi geht im IE nicht

Unregistriert

Und zwar die von euch funktioniert bei mir nicht...

http://www.ohne-css.gehts-gar.net/0066.php

MrMurphy

Und weiter?

TanjaP.

Etwas genauer solltest Du es schon beschreiben.
Bei mir funktioniert das Beispiel im IE.
Was funktioniert bei Dir nicht? Link zur Seite?

Dodo

Also bei mir funktioniert http://www.ohne-css.gehts-gar.net/0066.php
Es kann nur an fehlerhafter Implementierung liegen.

Zeig mal deinen Code oder einen Link her.

Unregistriert

ich möchte natürlich das sinnlose div drumherum rausmachen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Horizontales Dropdownmen&uuml;</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<ul id="menu">
    <li>
        <h3>Thema 1</h3>
            <ul>
                <li><a href="">Thema 1.1</a></li>
                <li><a href="">Thema 1.2</a></li>
                <li><a href="">Thema 1.3</a></li>
            </ul>
    </li>
    <li>
        <h3>Thema2</h3>
            <ul>
                <li><a href="">Thema2.1</a></li>
            </ul>
    </li>
</ul>


<div style="clear: both;"> </div>
</body>
</html>

Alles anzeigen

Code

* {margin: 0; padding: 0;}


ul#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
ul#menu {
float: left;
width: 140px;
list-style-type: none;
}
ul#menu h3 { 
font-size: 1em; 
text-align: center; 
color: #000; 
border: 1px solid #003366; /*--erforderlich für IE 7--*/ 
background: #ff8000; 
} 
ul#menu a { 
text-decoration: none; 
display: block; 
border: 1px solid #ccc; 
text-align: center; 
background: #ff9224; 
color: #003366; 
}
ul#menu a:hover { 
color: #ff9224; 
background: #003366; 
} 
ul#menu li {
position: relative;
}
ul#menu ul {
position: absolute;
z-index: 2;
display: none;
} 
ul#menu li:hover ul {
display: block;
} 
*+ html ul#menu li {
float: left;
width: 100%;
}

Alles anzeigen

lieben dank

TanjaP.

Zitat von Unregistriert

... das sinnlose div ...

meinst Du nicht, das es einen Grund gibt, das es dort steht?
Ich denke, es ist der Grund warum das Originalbeispiel funktioniert und deines nicht...

Unregistriert

So ist der code orginal, ich habe lediglich Thema2 in HTML hinzugefügt, aber dann stehen die spalten untereinander und nicht nebeneinander..

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Horizontales Dropdownmen&uuml;</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="menu">
    <ul>
        <li>
            <h3>Thema 1</h3>
            <ul>
               <li><a href="#">Thema 1.1</a></li>
               <li><a href="#">Thema 1.2</a></li>
               <li><a href="#">Thema 1.3</a></li>
            </ul>
         </li>
         <li>
            <h3>Thema2</h3>
            <ul>
                <li><a href="#">Thema 2.1</a></li>
                <li><a href="#">Thema 2.2</a></li>
                <li><a href="#">Thema 2.3</a></li>
            </ul>
         </li>
   </ul>
</div>
<div style="clear: both;"> </div>
</body>
</html>

Alles anzeigen

Code

* {margin: 0; padding: 0;}


#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
#menu h3 { 
font-size: 1em; 
text-align: center; 
color: #000; 
border: 1px solid #003366;
background: #ff8000; 
} 
#menu a { 
text-decoration: none; 
display: block; 
border: 1px solid #ccc; 
text-align: center; 
background: #ff9224; 
color: #003366; 
}
#menu a:hover { 
color: #ff9224; 
background: #003366; 
} 


#menu li {position: relative;}


#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
} 
*+ html #menu ul li {
float: left;
width: 100%;
}

Alles anzeigen

Es geht sicherlich auch ohne das Div, eine Auflistung ist auch ein Blockelement. Ich hatte mir auch schon eine etwas schlichtere navi ohne div drumherum gebaut. Das auf det Seite ohne-css.gehts-gar.net ist schon etwas älter daher bestimmt noch so gebaut..

Tobse

Zitat

#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

Alles anzeigen

Also wenn das ohne den div gehen soll, dann musst du diese angaben irgendwo hinpflastern, denn bedeutungslos sind sie nicht. (Das heisst schon, ist eig. nur pixelarbeit bis auf font-size, line-height und float)

sejuma

Du hast das vergessen:

Zitat

<ul>
<li>
<h3>Thema 1</h3>
<ul>
<li><a href="#">Thema 1.1</a></li>
<li><a href="#">Thema 1.2</a></li>
<li><a href="#">Thema 1.3</a></li>
</ul>
</li>
</ul>

<ul>
<li>
<h3>Thema2</h3>
<ul>
<li><a href="#">Thema 2.1</a></li>
<li><a href="#">Thema 2.2</a></li>
<li><a href="#">Thema 2.3</a></li>
</ul>
</li>
</ul>

Alles anzeigen

Im Prinzip kannst du den Div #menu weglassen; dann aber ebenfalls bei allen CSS-Angaben.
Er dient hier für einen Hintergrundfarbstreifen über die gesamte Breite.
Ferner dient er dazu, das Dropdown-Menu eindeutig zu definieren. Das heißt: Falls es noch andere ul-Listen auf der gleichen Seite gäbe, wären die dann von den Dropdown-Definitionen nicht betroffen.
Insofern hat er schon seinen Sinn.

Unregistriert

Danke sejuma, ist echt ne super liste ohne das ev. Javascript vom Benutzer deaktiviert ist und das menu nicht richtig funktioniert:-p

Code

<div id="menu">
<ul>
    <li><h3>Thema 1</h3>
        <ul>
            <li><a href="#">Thema 1.1</a></li>
            <li><a href="#">Thema 1.2</a></li>
            <li><a href="#">Thema 1.3</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><h3>Thema 2</h3>
        <ul>
            <li><a href="#">Thema 2.1</a></li>
        </ul>
    </li>
</ul>
</div>
<div style="clear: both;"></div>

Alles anzeigen

Code

* {margin: 0; padding: 0;}


#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
#menu h3 { 
font-size: 1em; 
text-align: center; 
color: #000; 
border: 1px solid #003366;
background: #ff8000; 
} 
#menu a { 
text-decoration: none; 
display: block; 
border: 1px solid #ccc; 
text-align: center; 
background: #ff9224; 
color: #003366; 
}
#menu a:hover { 
color: #ff9224; 
background: #003366; 
} 


#menu li {position: relative;}


#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
} 
*+ html #menu ul li {
float: left;
width: 100%;
}

Alles anzeigen

P.s. Ich denke ich werde das div weglassen, wenn ich woanders noch eine Liste habe benenne ich sie einfach anders:-p

Das clear: both; packe ich einfach ins nachfolgende div

Unregistriert

Was mir bei dem Codeauschnitt noch aufgefallen ist: Wenn man das Fenster zu klein zieht kommt man an die Themen 1+2 von allen 3 gar nicht mehr dran. Ausgangscode ist so:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Horizontales Dropdownmen&uuml;</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="menu">
<ul>
    <li><h3>Thema 1</h3>
        <ul>
            <li><a href="#">Thema 1.1</a></li>
            <li><a href="#">Thema 1.2</a></li>
            <li><a href="#">Thema 1.3</a></li>
            <li><a href="#">Thema 1.4</a></li>
            <li><a href="#">Thema 1.5</a></li>
            <li><a href="#">Thema 1.6</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><h3>Thema 2</h3>
        <ul>
            <li><a href="#">Thema 2.1</a></li>
            <li><a href="#">Thema 2.2</a></li>
            <li><a href="#">Thema 2.3</a></li>
            <li><a href="#">Thema 2.4</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><h3>Thema 3</h3>
        <ul>
            <li><a href="#">Thema 3.1</a></li>
            <li><a href="#">Thema 3.2</a></li>
            <li><a href="#">Thema 3.3</a></li>
            <li><a href="#">Thema 3.4</a></li>
        </ul>
    </li>
</ul>
</div>
<div style="clear: both;"></div>
<!-- ###########################################################################
Beim einfügen in die eigene Site: Div's um liste entfernen und das clear in das nachfolgende divelement packen
############################################################################ --> 
</body>
</html>

Alles anzeigen

Code

* {margin: 0; padding: 0;}


#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
margin: 50px 0 0 0;
}
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
#menu h3 { 
font-size: 1em; 
text-align: center; 
color: #000; 
border: 1px solid #003366;
background: #ff8000; 
} 
#menu a { 
text-decoration: none; 
display: block; 
border: 1px solid #ccc; 
text-align: center; 
background: #ff9224; 
color: #003366; 
}
#menu a:hover { 
color: #ff9224; 
background: #003366; 
} 


#menu li {position: relative;}


#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
} 
*+ html #menu ul li {
float: left;
width: 100%;
}

Alles anzeigen

Wenn mal wer zeit hat, code übernehmen und fenster kleiner ziehen das die navispalten umbrechen. Dann kommt man nämlich nicht mehr an alle Themen ran. Lösung ist den width wert im #menu auf einen Pixelwert zu setzen, dann ist mein Design aber nicht mehr Liquide...

Unregistriert

Gibts da was für das es auch dann noch funktioniert, logisch kann ich mir gar nichts vorstellen, weitere möglichkeit ist den breitenwert fest zu setzen aber das hilft mir so nicht weiter?

sejuma

Wenn's nicht mehr in die Breite passt, dann muss es eben in die Länge.
Das ist ein ganz normales Verhalten.

Du kannst aber #menu einen width-Wert oder min-width (dann in px) geben. Dann kann man horizontal scrollen.

Unregistriert

Zitat von sejuma

Wenn's nicht mehr in die Breite passt, dann muss es eben in die Länge.
Das ist ein ganz normales Verhalten.

ok danke, is halt schade das man dann nicht bei zu klein die anderen menupunkte anklicken kann... trotzdem superding

Navi geht im IE nicht

Tags

Benutzer online in diesem Thema