zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Liste überlappt wegen float in div!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2007, 22:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard Liste überlappt wegen float:left in div!

Hallo,

hier die Live-Demo von dem Problem:
http://rockmusikforum.com/non/suff.html

Relevanter Quelltext:

Code:
<br />

<div id="header">

<ul>
<li><a href="index.php" title="" id="gelb"></a></li>
<li><a href="technik.php" title="" id="blau"></a></li>
<li><a href="referenzen.php" title="" id="rot"></a></li>
<li><a href="auftrag.php" title="" id="gruen"></a></li>
</ul>

</div>
CSS:

Code:
div#header {
margin:0;
padding:0;
border:0;
width:50%;
}

div#header ul {
margin:0;
padding:1em;
border:1px solid black;
list-style-type:none;
}

div#header ul li {
float:left;
margin:0 2em 0 0;
padding:0;
border:0;
}

Ihr seht ja, dass das ul-Element einen 1px schwarzen Rand hat...im CSS-code fett markiert. Das ist es auch, welches Probleme bereitet. Die listenelemente, die in dieser Liste immer links gefloatet werden, haben sich durch das floaten aus dem ul-Element rausgedrückt, wie auf dem Screen zu sehen!

Möchte das verhindern, dass die sich rausdrücken, brauche eure Hilfe!

Gruß
RS
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.08.2007, 22:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

FAQ Punkt 2.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.08.2007, 22:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

Also so:

Code:
<br />

<div id="header">

<ul>
<li><a href="index.php" title="" id="gelb"></a></li>
<li><a href="technik.php" title="" id="blau"></a></li>
<li><a href="referenzen.php" title="" id="rot"></a></li>
<li><a href="auftrag.php" title="" id="gruen"></a></li>

<div id="clear">sss</div>

</ul>

</div>
CSS:

Code:
div#clear {
clear:left;
margin:0;
padding:0;
border:1px solid black;
}
Ergebnis:
http://rockmusikforum.com/non/suff.html

Vergleich FF <--->IE (7) ?!?!
Mit Zitat antworten
  #4 (permalink)  
Alt 02.08.2007, 22:36
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Ja, allerdings geht's auch ohne Zusatz-Element: Da das umgebende div eine Breite hat, kannst Du's ebenfalls floaten (am saubersten wäre, außerdem auch ul zu floaten, mit width: 100%;, damit es die volle Breite des divs einnimmt).

Außerdem siehe in den FAQ die Punkte "CSS-Prolog" und Doctype.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.08.2007, 22:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank schonmal!
Doch wenn ich es so mache wie du gesagt hast...also das ul-element floaten und dann width:100% verzerrt das ul-element nach rechts und nach unten...liegt wahrscheinlich daran, dass das umfassende div KEINE feste breite hat, wie oben in meinem code geschrieben stand, denn ich hatte die width:50% nur hingeschrieben, dass man das problem besser sieht. in meinem echten code hat das div keine feste breite, daher wahrscheinlich auch der fehler, warum es nicht geht.

habe es jetzt so gelöst, dass ich ein leeres div vor das </ul> gesetzt habe mit folgenden attributen:

div#clear {
clear:left;
margin:0;
padding:0;
border:0;
}

dann habe ich dem ul-element folgendes im css-code hinzugefügt:

display:inline-block;

das ist anscheinend explizit für den IE7...ich teste nachher mal den IE 6 und Opera..da geht wahrscheinlich wieder alles den Bach runter...
Mit Zitat antworten
  #6 (permalink)  
Alt 02.08.2007, 23:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Das ergibt leider alles keinen Sinn, poste später mal den Code
Mit Zitat antworten
  #7 (permalink)  
Alt 02.08.2007, 23:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

OK; hier der aktuelle, ausführliche Stand:

HTML:

Code:
<div id="header">

<ul>
<li><a href="index.php" title="" id="gelb"></a></li>
<li><a href="technik.php" title="" id="blau"></a></li>
<li><a href="referenzen.php" title="" id="rot"></a></li>
<li><a href="auftrag.php" title="" id="gruen"></a></li>
</ul>

</div>
CSS:

Code:
div#header {
margin:0;
padding:0;
border:0;
}

div#header ul {
display:inline-block;/* Funktioniert prima im IE 7! */
margin:0;
padding:1em;
border:1px solid black;
list-style-type:none;
}

div#header ul li {
float:left;
margin:0 2em 0 0;
padding:0;
border:0;
}
Wie es schon im CSS-Code steht...display:inline-block genügt, damit es im IE 7 genau richtig ausschaut.

Doch sowohl im Firefox, als auch im Opera ist das Problem damit nicht gelöst!
Mit Zitat antworten
  #8 (permalink)  
Alt 03.08.2007, 00:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

ALTERNATIVE:

HTML:

Code:
<div id="header">
<ul>
<li><a href="index.php" title="" id="gelb"></a></li>
<li><a href="technik.php" title="" id="blau"></a></li>
<li><a href="referenzen.php" title="" id="rot"></a></li>
<li><a href="auftrag.php" title="" id="gruen"></a></li>
<div id="clear"><!-- --></div>
</ul>
</div>
CSS:

Code:
div#header {
margin:0;
padding:0;
border:0;
}

div#header ul {
margin:0;
padding:1em;
border:1px solid black;
list-style-type:none;
}

div#header ul li {
float:left;
margin:0 2em 0 0;
padding:0;
border:0;
}

div#clear {
clear:left;
margin:0;
padding:0;
border:1px solid black;
}

Ergebnis: FF und Opera machen es zu 100% richtig, beim IE 7 tritt das bekannte Problem auf, dass es überlappt!
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2007, 01:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

Fehlen dir noch irgendwelche Informationen @heiko_rs?
Wenn ja sag bitte Bescheid.

Gruß
RS
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2007, 02:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Zitat:
Zitat von RollingStones Beitrag anzeigen
display:inline-block genügt, damit es im IE 7 genau richtig ausschaut.
Aber auch nur dort, wie Du ja auch bereits gemerkt hast. Wirf display wieder raus. Und Deine Alternativlösung mit dem div innerhalb von ul ist nicht valide. Immer hier überprüfen: The W3C Markup Validation Service

So wie Du es momentan hast, kannst Du ul nicht wirklich eine Breite geben, daher würde ich "Easy Clearing" auf ul anwenden (siehe FAQ Punkt 2).
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
Div Float Clear usw... Ich dreh durch ;) buggix CSS 14 11.02.2010 09:42
Kriegs nicht hin: Liste in einem DIV bei IE unten ausrichten velli CSS 12 02.09.2008 03:03
Dringende Float / Ausrichtungsprobleme Houdini CSS 1 04.02.2008 10:28
div / float / clear / FF / IE - blicke nicht mehr durch Rahjana CSS 7 20.07.2006 23:15
Abstand von Liste in div ändern N!KO CSS 2 04.01.2005 00:50


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