zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden es "dropped" nicht im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.02.2011, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2011
Beiträge: 7
happylee befindet sich auf einem aufstrebenden Ast
Standard es "dropped" nicht im IE

Vorne weg: ich bin Anfänger und versuche gerade mein ersten kleinen Tippelschritte im CSS.

Nun stehe ich gleich vor einem dicken ... nein, nicht das P-Wort, sagen wir, eine große Herausforderung: ich soll ein drop-down Menü bauen, das auch noch mit NOF redet.

Und darum bin ich hier. In einem Wort: Hilfe! Es funktioniert einfach nicht. Im FF sieht es gut aus, IE fährt das sub nicht aus und Opera zerschießt die Liste. Und wenn ich das Ganze dann im NOF einbaue, dann ... aber soweit bin ich noch nicht. Besser gesagt, es muss erst einmal überhaupt funktionieren.

Hier also meine konkreten Fragen: Hat das was mit dem z-index zu tun? Und an welcher Stelle muss dieser Quirks-Hinweis rein?

Das Script basiert auf einem Tutorial. Leider habe ich die Seite nicht gespeichert, kann sie aber finden, falls es wichtig ist.

HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navigation
{
width:100%;
height:20px;
background-color:#cfa86f;
}
#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{
height:20px;
float:left;
list-style:none;
margin-left:10px;
position:relative;
display:inline;
}

#navigation li a
{
color:#2b1712;
text-decoration:none;
}

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

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#cfa86f;
}

#navigation li:hover ul
{
display:block;
width:140px;
}

#navigation li li
{
list-style:none;
display:list-item;
}

#navigation li li a
{
color:#2b171;
text-decoration:none;
}

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

</style>
</head>

<body>

<div id="navigation">
        <ul>
            <li>
            <a href="#">Startseite</a>
            </li>

            <li>
            <a href="#">Seite 1</a>
                <ul>
					 <li><a href="#">Sub1</a></li><br>
					 <li><a href="#">Sub2</a></li><br>
					 <li><a href="#">Sub3</a></li><br>
					 <li><a href="#">Sub4</a></li><br>
					 <li><a href="#">Sub5</a></li><br>
                </ul>
            </li>

            <li>
            <a href="#">Seite 2</a>
            </li>

            <li>
            <a href="#">Seite 3</a>
            </li>

            <li>
            <a href="#">Extern 1</a>
            </li>

            <li>
            <a href="#">Seite 4</a>
            </li>
            <li>
            <a href="#">Extern 2</a>
            </li>
        </ul>
    </div>

</body>
</html>
Grüße aus dem immernoch zu kaltem Berlin, lee

Geändert von happylee (28.02.2011 um 11:56 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2011, 12:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2011
Beiträge: 7
happylee befindet sich auf einem aufstrebenden Ast
Standard

Ich bin's schon wieder. Zumindest habe ich jetzt bei IE eine Submenü-Anzeige! Allerdings (noch) nicht mit Zeilenumbruch. Was so ein bißchen Doctype alles bringt

Wie sage ich ihm jetzt, dass er einen Zeilenumbruch einfügen soll? Mit float?

Gruß, lee

Update:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navigation
{
width:100%;
height:20px;
background-color:#cfa86f;
}
#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{
height:20px;
float:left;
list-style:none;
margin-left:10px;
position:relative;
display:inline;
}

#navigation li a
{
color:#2b1712;
text-decoration:none;
}

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

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#cfa86f;
}

#navigation li:hover ul
{
display:block;
width:140px;
}

#navigation li li
{
list-style:none;
display:list-item;
}

#navigation li li a
{
color:#2b171;
text-decoration:none;
}

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

</style>
</head>

<body>

<div id="navigation">
        <ul>
            <li>
            <a href="#">Startseite</a>
            </li>

            <li>
            <a href="#">Seite 1</a>
                <ul>
					 <li><a href="#">Sub1</a></li><br>
					 <li><a href="#">Sub2</a></li><br>
					 <li><a href="#">Sub3</a></li><br>
					 <li><a href="#">Sub4</a></li><br>
					 <li><a href="#">Sub5</a></li><br>
                </ul>
            </li>

            <li>
            <a href="#">Seite 2</a>
            </li>

            <li>
            <a href="#">Seite 3</a>
            </li>

            <li>
            <a href="#">Extern 1</a>
            </li>

            <li>
            <a href="#">Seite 4</a>
            </li>
            <li>
            <a href="#">Extern 2</a>
            </li>
        </ul>
    </div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2011, 22:23
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ääähh nein,

bitte lies Dir Little Boxes online durch.

Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Im konkreten Beispiel dürfte display:block bei den verschachtelten Li's das sein, was die "Untereinanderdarstellung" ("Zeilenumbruch") hervorruft.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 01.03.2011, 10:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2011
Beiträge: 7
happylee befindet sich auf einem aufstrebenden Ast
Standard

Danke! Ich hatte mir den Artikel schon durchgelesen, aber wie gesagt, ich sehe den Wald vor lauter Bäumen nicht.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.03.2011, 10:59
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

Der verlinkte "Artikel" ist ein ganzes Buch. Darin werden Grundlagen vermittelt. Damit solltest du beginnen.
Für die ersten "Tippelschritte" ist eine Dropdown-Navigation ungeeignet -- es hat einen Grund, dass Peter Müller dieses Thema erst in Band 2 bringt. Wenn du eine neue Sprache lernst schreibst du doch auch nicht als erstes einen Roman.

Zu deinem Code: Du darfst keine BRs irgendwo in Listen verteilen. Validieren!
Mit Zitat antworten
  #6 (permalink)  
Alt 03.03.2011, 10:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2011
Beiträge: 7
happylee befindet sich auf einem aufstrebenden Ast
Standard

Genau die Motivation, die ich brauche, aber trotzdem danke.

Das mit den BRs war eine Verzweiflungstat. Habe sie inzwischen wieder entfernt, musste allerdings feststellen, dass das Ergebnis sowohl mit als auch ohne das Gleiche ist.

Noch habe ich nicht aufgegeben
Mit Zitat antworten
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



Alle Zeitangaben in WEZ +2. Es ist jetzt 20:49 Uhr.