| Autor |
Nachricht |
Quake
Threadersteller
Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 04.12.2006 11:54
Titel div-margin-Boxmodell Problem |
  |
|
Hallo,
ich habe mir gerade mal das mit dem div-Boxmodell angeschaut, da ich bis jetzt immer Tabellen verwendet habe. Dabei bin ich auch gleich auf ein Problem mit folgendem Code gestossen.
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<style type="text/css" media="screen">
#box_layout {border: 2px solid gray; width: 500px; height: 500px; background: silver;}
#box_content {margin: 10px; background: magenta; width: 100px; display: inline;}
#box_two {margin: 10px; background: lime; width: 100px; display: inline;}
#box_three {margin: 20px 2px; background: yellow; width: 150px}
</style>
</head>
<body>
<div id="box_layout">
<div id="box_content">
Inhalt
</div>
<div id="box_two">
Inhalt
</div>
<div id="box_three">
Inhalt
</div>
</div>
</body>
</html> |
Eigendlich hatte ich mir gedacht, dass die Boxen "box_content" und "box_two" oben einen 10 Pixel Abstand zur übergeordneten Box "box_layout" haben, da ein Margin von 10px angegeben ist. Links wird das Margin korrekt interpretiert. Bei "box_three" wird Margin so interpretiert wie ich mir das gedacht habe. Dies ist beim IE6, FF2 und Opera 9 identisch.
Wie kann ich nun die Boxen "box_content" und "box_two" am saubersten um 10 Pixel nach unten schieben.
|
|
| |
  |
 |
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 04.12.2006 12:09
Titel
|
|
|
Wieso machst Du aus dem Div ein Inlineelement?
display: block; hilft Dir schon mal weida.
|
|
| |
|
|
Quake
Threadersteller
Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 04.12.2006 12:26
Titel
|
|
|
|
Weil "box_content" und "box_two" ohne inline nicht nebeneinander.
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 04.12.2006 13:11
Titel
|
|
|
|
float:left; hilft dir da weida.
|
|
| |
|
|
Quake
Threadersteller
Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 04.12.2006 13:47
Titel
|
|
|
|
Im IE ist es dann wie gewünscht aber Opera und FireFox stellen das anders dar.
|
|
| |
|
|
haselnusstafel
Dabei seit: 27.06.2006
Ort: -
Alter: 44
Geschlecht: 
|
Verfasst Mo 04.12.2006 14:59
Titel
|
|
|
ein Div ist ein Blockelement und das sollte es auch bleiben. Ein Inlineelement kannst Du keine Größenangaben und Abstände definieren weil es wirklich nur für den Textfluss gedacht ist.
Du solltest am besten hier mal reinschauen. Da ist alles schön erklärt.
http://www.css4you.de
|
|
| |
 |
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 04.12.2006 15:04
Titel
|
|
|
Hmm, eher anders rum, der IE hat ja dann
auch noch mit seinem doubled-float-margin-bug
zu kämpfen. Hier mal eine Lösung mit 'IE<7'
Hack (-> also doch mit display:inline bei den
floatenden elementen - der ie ist halt einfach
zu verbugt):
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
DIV#box_layout {
border: 2px solid gray;
width: 500px;
height: 500px;
background: silver;
}
DIV#box_content {
width:100px;
margin: 10px 0 0 10px;
background: red;
float:left;
display: inline;
}
DIV#box_two {
width:100px;
margin: 10px 0 0 10px;
background: lime;
float:left;
display: inline;
}
DIV#box_three {
margin: 20px 0 0 2px;
background: yellow;
width: 150px;
float:left;
clear: both;
}
</style>
</head>
<body>
<div id="box_layout">
<div id="box_content">
Inhalt
</div>
<div id="box_two">
Inhalt
</div>
<div id="box_three">
Inhalt
</div>
</div>
</body>
</html> |
...oder aber Du schreibst es besser sauber und
verwendest eine <!--[if lt IE 7]> Weiche für die Hacks.
|
|
| |
|
|
Quake
Threadersteller
Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 04.12.2006 16:23
Titel
|
|
|
Vielen Dank, jetzt sieht das so aus, wie ich mir das vorgestellt habe.  
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit dem IE-Boxmodell-Bug
IE7, verschachtelte DIV mit Float, ein verschwundener Margin
IE margin problem
problem mit padding/margin
Margin-Problem im Opera
margin-top und <li> Problem
|
|
Willkommen auf dem Portal für Mediengestalter
