• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Boxmodell

P

Powerslave

New member
Moin,

hätte mal ne allgemeine Frage zum Boxmodell:

HTML: 
<html>
<head>
<style type="text/css">
 body {
	margin:20px;
}

 #box {
	border:3px solid #000;
	width:133px;
}
 .innerbox {
	float:left;
	margin-left:1px;	
}
 .inner {
	background-color:#ff0000; 
	width:62px; 
	height:62px;
}
</style>
</head>
<body>
 <div id="box">
  <div class="innerbox">
   <p class="inner"></p>
  </div>
  <div class="innerbox">
   <p class="inner"></p>
  </div>
 </div>
</body>
</html>

Soweit ich weiß wäre es ja in diesem beispiel so:
die Breite der "box" müsste doch eigentlich 132px minimal sein, und nicht 133px, da ja Breite = Elementbreite + Rahmenbreite + Innenabstand [(62+62) + (3+3) + (1+1) = 132px]. Wenn ich aber 132px als breite für "box" nehme ist die zweite "innerbox" unter der ersten anstatt daneben. wo kommt denn der übrige Pixel her? (Auf der Seite erkennbar, der innenabstand der linken "innerbox" ist 2px und nicht 1px. Aber ich frage mich wieso?

Und warum zeigts der Firefox total komisch an?
Könnte mir das jemand abändern das es im IE + Firefox ok ausschaut? Nur damit ich mal weiß wie das mit margin und padding gemeint ist...

danke schonmal
 
Powerslave schrieb:
Jo hab schon viel versucht komm einfach nicht drauf...
Zum Vergrößern anklicken....
Deswegen habe ich den Link gepostet.
Es ist durchaus nicht trivial mit dem Boxmodell.
Es gibt extra Hacks für den IE.
Lies es Dir mal durch, dann kommst Du von allein drauf...
 
Ja ok ich les es mir durch.

Allerdings hoffe ich du kannst mir folgende Frage nur kurz so beatntworten:
Wenn ich folgendes Dokument im IE ausführe wird es dargestellt wie gewollt.
Im Firefox macht er das div einfach 0px hoch. Was muss ich denn da ändern? Wenn ich height mit angebe macht er's ja genau so hoch wie ichs angebe, er soll aber die höhe praktisch automatisch berechnen, geht das nicht?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
 body {
	margin:20px;
}

 #box {
	width:760px;
	margin:0px auto;
	text-align:left;
	background-color:#bdbec6;
	border:1px solid #000000;
}
 .innerbox {
	float:left;
	padding:20px;
	width:340px;	
}
</style>
</head>
<body>
 <div id="box">
  <p class="innerbox">
   nec hendrerit purus eros nec elit. Etiam mattis, urna nec tempor mattis, neque leo ultrices justo, eu convallis purus odio eu augue. Cras blandit pharetra metus. Nam leo justo, sodales eget, volutpat ut, imperdiet vitae, nibh. Fusce blandit arcu ut nulla. Donec congue nonummy leo. Cras libero arcu, lacinia id,  
  </p>
  <p class="innerbox">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porttitor dapibus quam. Nunc mauris arcu, sodales vel, vehicula dictum, molestie at, justo. Quisque iaculis, odio sit amet placerat varius, quam nisi dignissim augue,
  </p>
 </div>
</body>
</html>
 
Du machst nach dem letzten </p> und dem </div> das Rote da rein:
Code: 
</p>[COLOR=Red]<br style="clear:both;">[/COLOR]</div>
Das nennt man 'entfloaten'... ;)
 
danke sehr, brauch ich das immer wenn ich float benutze?

noch eine frage bitte:

habs jetzt bissl erweitert:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
 body {
	margin:10px;
	background-color:#836FFF;
	font-family:Verdana;
}
 h2 {	
	width:146px;
	padding:20px 307px;
}


 #header {
	color:#836FFF;
	background-color:#000000;
}

 #box {
	width:760px;
	margin:0px auto;
	text-align:left;
	background-color:#87CEFF;
	border:1px solid #000000;
	font-size:small;
}
 .innerbox {
	float:left;
	padding:20px;
	width:340px;	
}
</style>
</head>
<body>
 <div id="box">
  <div id="header">
   <h2>Lorem Ipsum</h2>
  </div>
  <p class="innerbox">
   nec hendrerit purus eros nec elit. Etiam mattis, urna nec tempor mattis, neque leo ultrices justo, eu convallis purus odio eu augue. Cras blandit pharetra metus. Nam leo justo, sodales eget, volutpat ut, imperdiet vitae, nibh. Fusce blandit arcu ut nulla. Donec congue nonummy leo. Cras libero arcu, lacinia id, iaculis nec, faucibus vitae, erat. In pretium lacus sit amet dui. Donec massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse congue velit. Integer convallis mauris ut augue. Curabitur consequat turpis. Fusce imperdiet, ligula eu luctus bibendum, risus pede dapibus neque, consectetuer placerat dolor mauris in magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer mollis nunc sed    nibh. 
  </p>
  <p class="innerbox">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porttitor dapibus quam. Nunc mauris arcu, sodales vel, vehicula dictum, molestie at, justo. Quisque iaculis, odio sit amet placerat varius, quam nisi dignissim augue,
  </p>
  <br style="clear:both;">
 </div>
</body>
</html>

Warum wird der "header" im IE direkt oben an den Rand der "box" angeschlossen und im firefox sind ca 10px abstand zwischen box-border-top und header-border-top. Versteh ich wieder mal nich.... :whacky:
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben