nicht angemeldet
Danke für deine erste antwort, hatte mich zwar schon dafür bedankt, aber irgendwie dieses posting wohl ins nirvana geschickt. Nurn gibt es eine nachfolgefrage:
Die oberste zeile in der roten und in der blauen box sind als absatz formatiert. Der abstand, wie im styles bereich definiert, wirkt sich auf die oberste zeile der blauen box nicht aus. ( 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. )
Warum ist das so und wie ist damit sinnvoll umzugehen? Ich will ja nicht bie jeder floatenden box meine stylesheet überarbeiten müssen. Danke für hilfreiche tipps!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<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;}
#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 ;
}
</style>
</head>
<body>
<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>