✔ Problem mit CSS Positionierung

  • Themenstarter Themenstarter ByeBye 242513
  • Beginndatum Beginndatum
ist mir aufgefallen, dass der gesamte Grüne Balken länger war als der zulässige Bereich und dadurch ist der Fehler passiert.
Zum Vergrößern anklicken....
Ah ja, und warum hat es dann dennoch bei mir funktioniert?

Oder hast du hier eingangs den falschen CSS-Code gezeigt?

Denn wo ist deiner Meinung nach .box_titel_inhalt zu lang (breit), als die zulässige Breite von .box_titel?

Gemäß dem Box-Modell beträgt dessen Breite in der Addition von width:820px und je 10px für den linken u. rechten Innenabstand 840px, die seinem Elternelement .box_titel entspricht.

Und auch dieses ist gegenüber seinem Elternelement .content_middle bzw. .content nicht zu breit, wie man unschwer auf meinen Schnappschüßen anhand der roten Linie erkennen kann, die ich für .content_top als unteren Rahmen definiert hatte.

Oder ist für dich "Länge" mit der Höhe gleichbedeutend?

Dann wüsste ich gerne, wie eine zu größe Höhe für .box_titel_inhalt dazu führen soll, dass selbiges Element vom Browser im Dokumentfluß nach unten verschoben wird, und einen Abstand zum Vorgängerelement erzeugt, denn auch dieses Verhalten konnte ich bei mir in den Browsern nicht registrieren.

mfg Maik
 
Hallo Maik,

ich habe dir doch nicht den falschen CSS-Code gezeigt, ich denke mal das hier einiges durcheinander gerät.
Habe das Problem jetzt mal sehr vereinfacht, erstelle dir mal folgende Datei und du müsstest das selbe Problem haben wie ich im Screenshot.

Index-Datei
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html>
<head>
  <title>Testseite</title>  
  <style type="text/css"><!--
    html, body	{ margin: 0px; padding: 0px; background: #E3E1D7; font-family: helvetica, sans-serif; font-size: 14px; color: #7C7C7C; }
    .box		{ width: 100%; background: #88C425; }
  --></style>
</head>
<body>
<div class="box">
  <h1>Hallo</h1>
</div>
</body>
</html>

Wie du siehst ist das DIV nicht ganz oben am Bildschirmrand (egal welcher Browser) und genau das ist mein Problem.
Wie bekomme ich das DIV nach ganz oben ohne float und top zu benutzen? Wieso setzt er Text ganz nach oben am Bildschirmrand, aber dieses DIV nicht?
Genau dieses Problem hatte ich zuvor beschrieben.

Entschuldigung wenn ich mich unpräzise ausgedrückt habe, war nicht meine Absicht.
 

Anhänge

  • Screenshot.jpg
    Screenshot.jpg
    72,5 KB · Aufrufe: 7
Tja, dann bin ich eingangs des Themas doch nicht mit meiner Vermutung falsch gelegen, dass der Abstand aus dem voreingestellten Außenabstand des <h1>-Elements resultiert, den du nicht im CSS explizit auf null zurückgesetzt hast ;-)

CSS: 
.box h1 {  margin:0; }

Um solche Probleme von Beginn an zu vermeiden, empfiehlt es sich, folgende Regeln zu Beginn eines Stylesheets anzugeben:
CSS: 
* {
margin:0;
padding:0;
}

Die meisten Blockelemente (<h1-6>, <form>, <p>, <ul>) besitzen diese "Polsterungseigenschaften", wenn sie im Textfluß einen automatischen Absatz erzeugen, die in den Browsern einen Initialwert besitzen, der sich zum Teil in ihnen voneinander unterscheidet, insbesondere zwischen IE und der Rest der Welt.

Der Universalselektor * bezieht alle Elemente ein, die in dem Dokument enthalten sind, und setzt deren Initialwerte auf null zurück. Dort wo im Dokumentfluß einer dieser Abstände erwünscht ist, wird er für das entsprechende Element explizit festgelegt.

mfg Maik
 
Ja, da ist irgendwas schief gelaufen, aber danke.

Gehst du auch mal schlafen? Wenn ich deine Online-Zeiten so anschaue, kommt mir das nicht so vor :D
 
Schlafen kann ich noch ausgiebig genug, wenn ich zwei Meter tiefer liege :suspekt:

Wusste übrigens garnicht, dass Benutzer neuerdings Einblick in meine Stechuhr am Foreneingang haben :-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück