margin problem mit gefloateter box von michaah, 20.05.2007 18:29

margin problem mit gefloateter box

michaah 20.05.2007 18:29

Hi,

danke für deine antworten, ich saß etwas auf kohlen, da ich mich weiter oben wohl durch meine over-flüssigen doppelpostings etwas aus dem elementfluß genommen habe, wobei overflow in html in der version "hidden" dann doch wieder ganz hilfreich sein kann ... wenn ich das irgendwann auch wirklich verstehe.

Du hast ein Problem mit collapsing-margins (zusammenfallenden Rändern).

Agrrr, das ist leider nicht das erste mal, und an sich war mir das problem bekannt ... nur eben nicht bewußt in dem augenblick, wo es sinnvoll gewesen wäre. Danke fürs draufstubbsen. Grundsätlich: Müte ich nicht beiden boxen eine rhamen geben, weil die rahmenhöhe sich ja zum margin addiert udn es somit eine unterschied zwischen den beiden boxen gäbe?

( Auch dass die rote box nicht mehr die höhe der schwarzen box bestimmt ist mir ein rätsel. Vor allem da sich der wert für den unteren rand auch nicht auf den abstand auswirkt. )

Gefloatete Elemente werden aus dem Elementfluss genommen, sie haben keinen Einfluss mehr auf andere Blockelemente, es sei denn, nachdem das Float aufgehoben wurde (clear), oder dieses Element selbst einen Block formatting context erzeugt (im IE - Hashlayout).

Das ist noch etwas verwirrend, ich mache jetzt mal learning by antwortschreibing:

Interessant war die feststellung, dass die rote box die höhe der schwarzen box dann bestimmt, wenn ich der schwarzen box auch den wert "float:left" zuweise. Aber genau dies bewirkt nun eine komplette begriffsverwirrung. Was ist mit "gefloatete element" gemeint, das element, die box, in deren style "float:wasauchimmer" definiert ist, oder die (nachfolge) box, die dadurch ja eigentlich aus dem normalen elementfluß genommen wird. Aber genau die definiert entgegen (?) deienr beschreibung ja die höhe der schwarzen box... wie eben auch die rote box, wenn ich wie weiter ober erwähnt vorgehe.

So, zu guter letzt auch noch eine erweiterung des float boxen problems. Die neu dazugekommene kleine box ganu unter links ist eigentlich meine navi box. Die war bislang mit position:absolute ganz nach rechts geklebt worden, unter den kopf bereich. Das klappt aber nur dan gut, wenn der kopfbereich eine feste höhe auf allen unterseiten hat ... was auf grund verschiedenzeiliger überschriften nicht der fall ist ... also möchte ich sie um die schwarze box floaten lassen. Sie floatet nicht! Ich befürchte, dass ich nur damit weiterkomme, diese box auf 100% auszudehnen und den inhalt mit padding an der rechten ran zu drücken und zu haffen dass es dann klappt. Nur wird mir dann jetze schon übel bei dem gedanken, dass ich sämtlichen boxfehler ja anschließend noch IE tauglich von 5.x bis 7.0 machen muß und keine ahnung habe, wele klöpse ich mir hier nun selber in den weg lege.

Für eine hinweis zur grundsätzlichen strategie diesbezüglich wäre ich sehr dankbar. Heir nun der cod für das erweiterte layout:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  
<style type="text/css" media="screen">
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

html {
height: 100%;
}

body {
     height: 100%;
     background: #FBEDC1;
     font-size: 100.01%;
}

#inhalt { width: 85%; color: #000; background-color: green; float:left;}

#inhalt p {
   font-size: 1em;
   line-height: 1.5em;
   color: black;
/*der marginwert "2" ist hier das problem. Ist er auf "0", sind jeweils die erste zeile in der blauen und in der roten box auf gleicher höhe. Ist der wert ungleich "0", wirkt er sich auf die oberste zeile der blauen box NICHT aus, warum?*/
   margin: 2em 0em 2em 0em ;
   }
#navi { background: #001058; width: 15%; height: auto; color: #ffffff; padding: 0em 0em 0em 0em; }

ul#navih {
    width: 100%;
    height:auto;
    margin: 0; padding: 0.3em;
    text-align: center;
    background-color: #001058;
  }

ul#navih li { color: #FBEDC1; display: inline;}
</style>
</head>

<body>

<h1 style="text-align:left;
   font-weight:bolder;
   font-size:150%;
   letter-spacing:0.2em;
   color: #f60;
   margin: 0.7em 0 0.3em 1.5em;">Über-<br>Schrift<br>keyword</h1>

<div id="inhalt">

<h1 style="width:100%;">Unser Angebot an <strong>bli bla blub</strong></h1>
<div style="width:90%; margin:5em auto; background-color: white;">
<div style="width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;">
<p>nur ausnahmsweise finden werden. </p>
<p>Folgen sie einfach dieser kleinen Tour </p>
<p>einige Informationen und Eindrücke</p>
<p>Als ganz besondernen Service</p>
<p><img src="1.jpg" height="137" width="191" style="padding:0 0 0em 0"><br>
<img src="2.jpg" height="128" width="191" style="padding:0 0 0em 0"><br>
<img src="3.jpg" height="103" width="191" style="padding:0 0 0em 0"><br>
<img src="4.jpg" height="122" width="191" style="padding:0 0 0em 0"></p>
</div>

<div style="margin:0em 0em 0em 0em; background-color:blue;;">
<p>inhalt: eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o  oivn ioj on</p>
<p>  ojio odoohio</p>
<p> iohiodfh  ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
</div>
</div>

<div id="navi">
<p>Navigation</p>
<p>o  oivn ioj on</p>
<p>  ojio odoohio</p>
<p> iohiodfh  ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>

</div>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

michaah: margin problem mit gefloateter box

Beitrag lesen

margin problem mit gefloateter box

float: WAS ist das nachfolgende element???

margin problem mit gefloateter box