riesiger Abstand wegen clear:both

[Flexi]

Guten Abend,

ich habe seit längerem ein Problem, dass immer mal wieder auftaucht und das ich mir nur sehr schwer zu helfen weiß.

Ich habe mal eine Testseite gebastelt, an der man das sehr gut erkennen kann.
Vielleicht hat ja einer ne Ahnung, wie man es Umgehen kann.

Also ein 2 spaltiges Layout, in dem im Inhalt einige clears zu finden sind und deshalb ein großer Abstand bis zur Höhe des linken Menüs entsteht:
http://www.no-magic.de/0test.html

Danke für eure Antwort.
Gruß
Felix

[sejuma]

Reduziere bei h1 den padding-top-Wert:

Code: Alles auswählen

h1 {
   padding: 0 25px 15px 25px;
   margin:0;
}

[Flexi]

Reduziere bei h1 den padding-top-Wert:

Code: Alles auswählen

h1 {
   padding: 0 25px 15px 25px;
   margin:0;
}

Hallo Sejuma
Ok habe ich gemacht, es hat sich leider nicht wirklich etwas geändert. padding ind margin sind auf 0px.
Gruß
Felix

[sejuma]

Setze noch die Liste auf Null mit

Code: Alles auswählen

ul {margin: 0;}

[Flexi]

Ich habe bei li und ul padding und margin entfernt. Leider ist keine Verbesserung sichtbar.

Ist echt schon komisch, das sowas niemandem bisher passiert ist.

[sejuma]

Mit Ausnahme bei Hotels in Al Ain ist bei mir alles ohne Abstand.
Aktualisiere mal deinen Browsercache.

[Flexi]

Hallo,
um diesen Abstand geht es doch. Normalerweise dürfte dort kein Abstand sein.

[Laus]

Hallo

Dein Problem hängt mit dem clear Div zusammen, da du hier ja das float wieder aufhebst und deshalb der nachfolgende Text unter deinem div left weitergeht. Entweder Du verwendest für die Links die Du jetzt in den Listen im Content hast einfach nur links ohne liste die du floaten musst, oder du baust die Seite um und lässt den content rechts floaten, dann kannst du die floats von der Liste mit clear:left wieder auflösen. Ich hoffe das war jetzt einigermaßen verständlich formuliert.

Gruß Xaver

[sejuma]

Puh, hat lange gedauert, aber die Ursache ist jetzt klar und logisch:

Dein #left ist links gefloatet.
Nach der ersten ul clearst du deren li's, was grundsätzlich richtig ist.
Allerdings bewirkt dies ebenso auch ein clear in Bezug auf #left.
Folglich wird die nächste h1 an der Unterkante von #left angeordnet.

Abhilfe:
Entferne bei li die Float-Angabe und ersetze sie mit

Code: Alles auswählen

display: inline;

Dann kannst du im Bereich von #content auch überall das Clear löschen.

[Flexi]

Danke für eure Arbeit mit meinem blöden Problem.

Das ist aber schon ein ganz schöner Bug finde ich. Das float sollte ja eigentlich nur für #content gelten und nicht für andere div's gleich mit.

Mit dem inline geht das zwar auch, aber dann hat die Breite der li-Elemente kein Wirkung mehr. So kann man jetzt keine Spalten mehr erstellen. Es wirkt durcheinander.
http://www.no-magic.de/0test.html

Oder gibt es doch irgendwie eine Möglichkeit eine Breite anzugeben?

[sejuma]

Ein Bug ist das nicht, sondern standardkonformes Verhalten. Der FF macht es übrigens richtig - mit ungewünschter Darstellung, während es der IE falsch macht - mit gewünschter Darstellung

Du könntest für die li's noch

Code: Alles auswählen

display: inline-block;

verwenden; klappt aber nicht in allen Browsern.

Dann bliebe nur noch, die Seite umzustricken:
Den rechten content-Teil rechts floaten und in #left das float entfernen, sozusagen eben umgekehrt wie es momentan ist unter Anpassung der Abstände, Breiten etc.
Dann die li's wieder links floaten (im rechts gefloateten #content) und mit

Code: Alles auswählen

clear: left;

clearen.

[Laus]

Warum benutzt Du für diese Tabellarisch aufgeführten Links nicht eine Tabelle? Die ist doch dafür da. Tabellenloses Layout besagt ja nicht dass man Tabellen grundsätzlich nicht verwenden soll, sondern nur nicht für die optische Gestaltung der Seite. Deine Links sollen aber Tabellen-artig gesetzt werden, und dafür ist eine Tabelle doch die beste Möglichkeit. Oder eben dann als alternative der Umbau der Seite so wie ich und sejuma es dir schon oben beschrieben haben.

Gruß Xaver

[Flexi]

Ich machs jetzt so, dass ich statt der div.clear-Elemente Tabellen nehme. Das hat den selben Effekt und braucht nur ein paar Zeichen mehr.
Auf die li-Elemente kann ich nicht verzichten, weil diese von TYPO3 automatisch erzeugt werden.