404

Design made in Germany

Deutsches Design

CSS: Float- und Breitenproblem


Design Magazin Design Agenturen Designer Design Weblogs Design Magazine Design Portale Design Communities Design Hochschulen Design Organisationen Design Ressourcen Design Shops Grafikdesigner Schriftdesigner Webdesigner Interfacedesigner Flashdesigner Motiondesigner Sounddesigner Fotodesigner 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Hi zusammen,

ich habe unter http://www.fifty-nine.de/_stuff/css/lay.html ein Layout gebastelt. Das CSS-File ist hier http://www.fifty-nine.de/_stuff/css/lay.css zu finden.
Ich steh wie der Ochs vorm Wald, denn wenn ich zum Beispiel keine Breiten angebe, dann sieht's so aus: http://www.fifty-nine.de/_stuff/css/1.jpg (Nur die horizontalen Abstände stimmen irgendwie nicht) Gebe ich Breiten an, stimmen zwar die Abstände, aber die Breite explodiert: http://www.fifty-nine.de/_stuff/css/2.jpg

Hab ich da vielleicht zu viele Floats drin? Bzw. ich hab es an 100 Stellen versucht zu clearen, aber kein Erfolg. Kein Plan wo hier der Hase im Pfeffer liegt. Hat jemand Lust mal drüber zu schauen???


Deutsches Design: CSS: Float- und Breitenproblem

Hi Moritz,

ein clear-Problem kann das meiner Ansicht nach nicht sein. Die Bilder sehen doch ganz ordentlich aus.
Wenn ich dich richtig verstehe geht es dir um den unteren Scrollbalken.
Auf die Schnelle würde ich sagen, dass der bei Firefox aus der Kombination von width:100%; und padding:20px; resultieren dürfte. Firefox rechnet nämlich den Innenabstand auf die Weite drauf.


probiers doch mal mit festen px breiten statt mit 100% angaben, die fliegen eh immer auseinander


ich komme nicht dazu mir das genau anzusehen, aber im safari ist es total zerschossen...


Hi,

danke für den Tipp mit der festen Breite. Nun sieht es im IE so aus, wie ich es gerne hätte http://www.fifty-nine.de/_stuff/css/ie.jpg aber Firefox macht oben einen Margin und zentriert nicht, ansonsten auch okay http://www.fifty-nine.de/_stuff/css/ff.jpg .

Hier die Datei mit neuem Markup: http://www.fifty-nine.de/_stuff/css/css.html

Update: Das Zentrieren hab ich rausbekommen: Die zentrierten Elemente brauchen: margin: 0px auto;


Du verwendest viel zu viele DIVs. Ersetze mal

<div id="clear-pageoptions"></div>

durch ein simples:

<br style="clear: both;" />

dann paßt es. Und schau mal nach, das auch selbtschließende TAGs per /> geschlossen werden. Zumindest wenn Du weiterhin XHTML 1.0 verwenden willst.

Was unabhängig davon auch Punkte bringt, ist ein generelles "Initial Stylesheet" alá http://kurafire.net/log/archive/2005/07/26/starting-css-revisited

Damit hast Du erst mal vorm Loslegen eine einheitliche Grundlage in allen Browsern, was margins und paddings angeht.


Wow, was so ein div ausmachen kann. Aber danke für die Tipps!!! Es geht jetzt :) Und das mit dem initial CSS ist ne gute Idee!!! Danke nochmal!


Seitentitel: CSS: Float- und Breitenproblem