zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden CSS: Menü, IE 6 und Drop down Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.10.2007, 23:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 29
HaraldMenza befindet sich auf einem aufstrebenden Ast
Standard CSS: Menü, IE 6 und Drop down Probleme

Hallo zusammen,

habe mir jetzt anhand von Little Boxes ein kleines Menü gebastelt. Das ist bisher nebeneinander (im Firefox und IE 7), im IE 6 leider nicht, da ist es irgendwie untereinander und ich weiß nicht, wieso.

HTML:
Code:
		<div id="navigation">
		<ul><li><a href="/" id="startseite">startseite</a></li>
 		<li><a href="/fotos.html" id="fotos">fotos</a></li>
		<li><a href="/mail.html" id="mail">mail</a></li>
		</ul>
		</div>
Und in der CSS Datei:

Code:
#navigation li {
float:left;
list-style-type:none;
padding:0;
}

#navigation li a {
background:transparent;
display:block;
color:#000;
height:20px;
line-height:20px;
padding:5px;
text-decoration:none;
}

#navigation li a:hover {
color:#fff;
height:25px;
text-decoration:underline;
}
Jetzt habe ich das Problem, dass die drei Links im FF und IE 7 korrekt rechts nebeneinander angezeigt werden. Im IE 6 hingegen ist dies nicht der Fall. Da werden die Links untereinander angezeigt. Weiß jemand, wie das ändern kann?

Dann habe ich noch eine kleinere Frage:
Ich möchte jetzt noch ein verschachteltes Menü daraus machen. Habe deshalb eine zweite <ul> eingefügt und dann im CSS auch mit den Display Varianten ausgeblendet und wieder eingeblendet. Soweit kein Problem.
ABER:
Ich kriege es nicht hin, dass die erscheinenden links genau unter dem Link sind, von dem aus sie aufgerufen werden. Die sind dann entweder ganz rechts am Bildschirm oder irgendwo anders.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.10.2007, 23:58
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Die Lösung für das erste Problem findest Du im viertletzten Absatz meines FAQ-Beitrages: http://xhtmlforum.de/40267-faq-haeuf...tml#post296439

Für das zweite Problem bitte Code und/oder Link.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.10.2007, 14:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 29
HaraldMenza befindet sich auf einem aufstrebenden Ast
Standard

Sorry, mir fällt gerade erst auf, dass ich das im XHTML Forum gepostet habe...sollte eigentlich zu CSS.

Danke dir erstmal und auch Peter für die PN. Stimmt jetzt soweit.

Dafür habe ich jetzt wieder ein anderes Problem
Hab davon auch mal einen Screenshot gemacht - links FF wieder richtig, rechts IE 7 - kagge:


Der Code oben ist geblieben, bis auf die Hover Angaben, die ich wie folgt per CSS erweitert habe:

Code:
#navigation li a:hover {
background:#fff;
border-bottom:3px #f45803 solid;
border-left:3px #f45803 solid;
border-right:3px #f45803 solid;
color:#f47c02;
}
Verstehe nicht, wieso der IE z.B. unten keinen Border macht (sieht man auf der Grafik)... ist mir ein Rätsel.

Edit: Ach und wegen dem 2. Problem, komme ich auf euch zurück, ich würde da gerne erst nochmal selbst probieren...
Mit Zitat antworten
  #4 (permalink)  
Alt 08.10.2007, 14:38
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von HaraldMenza Beitrag anzeigen
habe mir jetzt anhand von Little Boxes ein kleines Menü gebastelt.
Meinst du das Buch "Little Boxes"?
Da wird die horizontale Navigation in Kap. 8 mit display:inline erstellt, nicht mit float. Einen Abschnitt über eine float-Navigation habe ich gerade für Buch 02 geschrieben. Inklusive der genauen Unterschiede zu display:inline und der Konsequenzen daraus.

Ein Kapitel über eine horizontale Navi mit zweiter Ebene ist auch drin, wo die Unterpunkte wahlweise ganz außen oder direkt unter dem aktuellen Menüpunkt beginnen

Zitat:
Zitat von heiko_rs Beitrag anzeigen
im viertletzten Absatz meines FAQ-Beitrages: http://xhtmlforum.de/40267-faq-haeuf...tml#post296439
Du schreibst dort "Wenn #navi a sowohl display: block; als auch Layout hat. In diesem Falle schafft Abhilfe, außer <li> auch <a> zu floaten (natürlich ebenfalls ohne width)."

Ich habe gerade mal den Code von Harald kurz getestet, und die Listenelemente stehen im IE<7 nur untereinander, wenn sie height bekommen. width etc. verändert nichts. Es scheint also nicht nur um hasLayout zu gehen, sondern mehr direkt um die feste Höhe. Kannst du das aus deiner Erfahrung bestätigen?
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #5 (permalink)  
Alt 08.10.2007, 14:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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 pmmueller Beitrag anzeigen
Ich habe gerade mal den Code von Harald kurz getestet, und die Listenelemente stehen im IE<7 nur untereinander, wenn sie height bekommen. width etc. verändert nichts. Es scheint also nicht nur um hasLayout zu gehen, sondern mehr direkt um die feste Höhe.
Das Problem des fehlerhaften Shrink-Wrapping tritt nicht auf, wenn das Element eine feste Breite hat -- denn dann muss es nicht "shrink-wrappen".

Geändert von fricca (08.10.2007 um 14:58 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.10.2007, 15:08
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Fricca,
danke für den Direktlink. Das beseitigt alle Fragen:
Zitat:
Doch wenn ein Element, das schrumpfen sollte, ein Block-Element mit »Layout« enthält, so dehnt sich in den meisten Fällen dieses Kindelement unabhängig von seinem Inhalt auf die volle verfügbare Breite aus und verhindert so den Schrumpfeffekt des Elternelements.
Ich kenne die Übersetzung des Artikels von Corina, ich kenne die Passage über Shrinkwrap, nur haben meine Synapsen irgendwie die Verbindung nicht hingekriegt
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Geändert von pmmueller (08.10.2007 um 15:14 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.10.2007, 15:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

@Peter: Das muß ich in dem Text deutlicher formulieren - bei width passiert die ungewollte Ausdehnung über die volle Breite natürlich nicht, denn dann schrumpft li natürlich korrekt auf die definierte Breite des enthaltenen a zusammen.

In dem Text ging ich automatisch davon aus, daß a in diesem Falle nicht per width Layout bekommt (zumal ich ja eh ständig davon abrate), da es absolut keinen Sinn ergäbe, li ohne width zu floaten, wenn a eine hat.

Aber das muß dem Leser des Textes nicht klar sein, also schreibe ich das gleich noch explizit dazu.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.10.2007, 15:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 29
HaraldMenza befindet sich auf einem aufstrebenden Ast
Standard

Verzeiht meine Unkenntnis, aber kann ich das letzte Problem mit dem Hover, dass IE unten keinen Border anzeigt auf einen Schrumpfmechanismus zurückführen? Habe davon bisher noch nie was gehört
Mit Zitat antworten
  #9 (permalink)  
Alt 08.10.2007, 15:49
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Bei Deinen Code-Schnipseln kommt die border bei mir auch im IE 6.

Unabhängig davon: Lasse border beim Hovern nie aus dem Nichts kommen, sondern gleiche ihren benötigten Platz durch padding im Normalzustand aus.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.10.2007, 16:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2007
Beiträge: 29
HaraldMenza befindet sich auf einem aufstrebenden Ast
Standard

Hmm, nee bei mir zeigt der IE 6 und 7 das so an, wie es oben auf dem Screenshot zu sehen ist. Oben ist rot anstatt weiß und unten ist gar kein Border.

Hä? Welchem Element gebe ich vorher denn das Padding? Wenn ich dem

#navigation li {
padding:0 3px 3px 3px;
}

gebe, weil ich ja rechts und links und unten 3px border hinzufüge, verschiebt es den Link trotzdem nach rechts, wenn ich drüber gehe.

Ebenso wenn ich dem a-Element das Padding gebe.
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Vertikales Drop Down Menü nach vorgabe aber trotzdem fehlerhaft dark4521 CSS 2 27.02.2009 08:45
Drop Down Menü IE6+7 Frost CSS 8 29.01.2009 13:36
Drop down menü geht im IE 6 nicht silverblack CSS 3 10.06.2007 21:36
Probleme mit drop down menu sky-frog Javascript & Ajax 2 17.10.2006 13:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:08 Uhr.