Zeile unten zentriert, nicht mit position:fixed
0 0 
Detlef G.
Zeile unten zentriert, nicht mit position:fixed
Hallo Detlef,
Sorry erstmal, ich habe auf den alten Thread nicht mehr antworten können, da er schon ins Archiv gerutscht ist.
Was erwartest du, bei margin-top:0px; für body?
Du müsstest dem Link selbst einen oberen Rand geben, dazu musst du ihn aber auch seinem Inlinedasein befreien. Entweder durch einen geeigneten Wert für display und eine passende Breite, oder durch float:left, wobei dieses dann für h1 mittels clear wieder aufgehoben werden muss.
Eigentlich habe ich erwartet, dass der Link direkt am oberen Rand liegt und nicht noch hochrutscht, aber OK, man lernt ja immer dazu.
Gibt es Elemente innerhalb von body, die einen oberen oder unteren Rand haben, der direkt an den (auf 0 gesetzten) von body anstößt?
Soweit ich das überblicke, ist das nur <h1>
Genau, und was hat <h1> in den Browsern üblicherweise?
(vielleicht einen oberen und unteren Rand?)
Das verstehe ich noch nicht ganz. Der obere Rand von H1 soll ja bleiben wie er ist und der untere dürfte doch keinen Einfluss auf den unteren Rand des body haben, da darunter ja noch andere Elemente sind (d.h. der untere Rand soll eigentlich auch bleiben wie er ist, damit sich H1 von den anderen Elementen absetzt).
Dabei dürfte der obere Rand von <h1> eigentlich keine Rolle spielen
Naja - eigentlich und wie ist es uneigentlich? ;)
Hast du mal versucht dies einzugrenzen, indem du body einmal nur border-bottom und einmal nur border-top gibst?
Hmm, mit border-top rutscht die Zeile auf die richtige Höhe (wie mit border), hat aber noch einen Abstand zum unteren Rand (sprich man kann noch ein Stückchen runterscrollen). Mit border-bottom ist sie wieder nach unten gerutscht (so wie ohne border), liegt dafür aber am unteren Rand an.
(mit/ohne Hilfsrahmen ändert nur den unteren Teil der Seite)
Was sollte sich denn sonst ändern, etwa die Seite oberhalb des Browserfensters angezeigt werden?
Ob sich der Rand eines Elements oben oder unten zur Höhe von body addiert, sollte für die sich daraus ergebenden Höhe, und damit auch für die Position von .kleingedr doch unerheblich sein.
Ich habe gedacht, dann müsste sich die Position von H1 bzw. dessen Abstand zum oberen Fensterrand ändern. Aber stattdessen ändert sich ja nur die Höhe von body. Und das ist es, was mir diese Verständnisprobleme bereitet.
Wenn ich jetzt einfach hinnehme, dass da jetzt Ränder zusammenfallen, wüsste ich trotzdem nicht, was ich dagegen tun soll... einen Rahmen mit transparenter Farbe? Oder kann man das irgendwie "normal" beheben?
Viele Grüße,
Tlyman
-
Hallo!
Hallo Detlef,
Wenn die anderen dir auch helfen sollen, dann wäre ein Link zum Beitrag im Archiv nicht schlecht.
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)-
Hallo!
Hallo Detlef,
Wenn die anderen dir auch helfen sollen, dann wäre ein Link zum Beitrag im Archiv nicht schlecht.
ciao, ww
Ja stimmt, das ist natürlich sinnvoll, also hier der Nachtrag: http://forum.de.selfhtml.org/archiv/2007/3/t148196/.
Ich bin wohl irgendwie automatisch davon ausgegangen, dass es für andere etwas zu komplex werden könnte, da Detlef bisher als einziger mit dem Problem vertraut genug war.
Aber danke, dass du es sagst, solche Feinheiten muss ich mir hier noch angewöhnen.Viele Grüße,
Tlyman
-
-
Hallo Tlyman
Eigentlich habe ich erwartet, dass der Link direkt am oberen Rand liegt und nicht noch hochrutscht, aber OK, man lernt ja immer dazu.
Wie bereits geschrieben ist der Link ein Inlineelement. Es hat nur die Zeilenhöhe, es nimmt sich keinen zusätzlichen Platz. Wenn jetzt die Zeile oben direkt an den Rand des Browserfensters stößt, dann ist dort kein Platz mehr für den Border.
Genau, und was hat <h1> in den Browsern üblicherweise?
(vielleicht einen oberen und unteren Rand?)Das verstehe ich noch nicht ganz. Der obere Rand von H1 soll ja bleiben wie er ist und der untere dürfte doch keinen Einfluss auf den unteren Rand des body haben,
Natürlich hat der untere Rand keinen Einfluss. Der obere Rand von H1 fällt aber mit dem Rand (auch wenn dieser 0 ist) zusammen. Das führt dazu, dass dann praktisch Body diesen Rand hat und Body damit um diesen Rand höher als 100% wird.
Hmm, mit border-top rutscht die Zeile auf die richtige Höhe (wie mit border), ...
Damit erkennst du, dass der Body durch oben zusammenfallende Ränder zu hoch wird.
hat aber noch einen Abstand zum unteren Rand (sprich man kann noch ein Stückchen runterscrollen).
Wohl um die Breite des Borders.
Mit border-bottom ist sie wieder nach unten gerutscht (so wie ohne border), liegt dafür aber am unteren Rand an.
Bei border-bottom (ohne border-top) ist das Verhalten wie ganz ohne border, womit du siehst, dass dein Problem oben und nicht unten entsteht.
Ich habe gedacht, dann müsste sich die Position von H1 bzw. dessen Abstand zum oberen Fensterrand ändern.
Mit border-top hat Body oben keinen Rand und H1 hat einen oberen Rand Und ohne border-top fällt der obere Rand von H1 mit dem Rand von body zusammen, das führt dazu, dass Body den breiteren der Ränder übernimmt. Der Abstand den H1 zum oberen Fensterrand hat bleibt dabei gleich, denn dafür ist es unerheblich, ob der selbe Rand Body oder H1 gehört.
Aber stattdessen ändert sich ja nur die Höhe von body.
Ja, denn wenn Body den Rand übernimmt ist es dadurch insgesamt 100% + Randbreite hoch.
Wenn ich jetzt einfach hinnehme, dass da jetzt Ränder zusammenfallen, wüsste ich trotzdem nicht, was ich dagegen tun soll... einen Rahmen mit transparenter Farbe? Oder kann man das irgendwie "normal" beheben?
Muss H1 denn unbedingt ein margin-top haben? (_du_ hast es zwar nicht definiert, aber das Browser-CSS)
Könntest du margin-top nicht einfach auf 0 setzen und dafür ein passendes padding-top setzen?Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
hat aber noch einen Abstand zum unteren Rand (sprich man kann noch ein Stückchen runterscrollen).
Wohl um die Breite des Borders.
Border war nur 1px breit, es waren aber noch gute 15px nach unten übrig.
Aber stattdessen ändert sich ja nur die Höhe von body.
Ja, denn wenn Body den Rand übernimmt ist es dadurch insgesamt 100% + Randbreite hoch.
Ah, jetzt kam erst einmal eine große Portion Erkenntnis. Ich bin davon ausgegangen, dass 100% auch immer 100% sind, aber mit dieser Begründung wird einiges klarer. Die "CSS-Erfinder" machen's einem aber auch nicht einfach :)
Wenn ich jetzt einfach hinnehme, dass da jetzt Ränder zusammenfallen, wüsste ich trotzdem nicht, was ich dagegen tun soll... einen Rahmen mit transparenter Farbe? Oder kann man das irgendwie "normal" beheben?
Muss H1 denn unbedingt ein margin-top haben? (_du_ hast es zwar nicht definiert, aber das Browser-CSS)
Könntest du margin-top nicht einfach auf 0 setzen und dafür ein passendes padding-top setzen?Stimmt, das hattest du ja schon erklärt, das versuche ich mal.
Viele Grüße,
Tlyman
-