mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mi 24.04.2024 20:49 Benutzername: Passwort: Auto-Login

Thema: div-margin-Boxmodell Problem vom 04.12.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div-margin-Boxmodell Problem
Autor Nachricht
Quake
Threadersteller

Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 04.12.2006 12:54
Titel

div-margin-Boxmodell Problem

 Antworten mit Zitat Zum Seitenanfang
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.
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 04.12.2006 13:09
Titel

Antworten mit Zitat Zum Seitenanfang
Wieso machst Du aus dem Div ein Inlineelement?
display: block; hilft Dir schon mal weida.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Quake
Threadersteller

Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 04.12.2006 13:26
Titel

Antworten mit Zitat Zum Seitenanfang
Weil "box_content" und "box_two" ohne inline nicht nebeneinander.
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 04.12.2006 14:11
Titel

Antworten mit Zitat Zum Seitenanfang
float:left; hilft dir da weida.
  View user's profile Private Nachricht senden
Quake
Threadersteller

Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 04.12.2006 14:47
Titel

Antworten mit Zitat Zum Seitenanfang
Im IE ist es dann wie gewünscht aber Opera und FireFox stellen das anders dar.
  View user's profile Private Nachricht senden
haselnusstafel

Dabei seit: 27.06.2006
Ort: -
Alter: 57
Geschlecht: Weiblich
Verfasst Mo 04.12.2006 15:59
Titel

Antworten mit Zitat Zum Seitenanfang
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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 04.12.2006 16:04
Titel

Antworten mit Zitat Zum Seitenanfang
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.
  View user's profile Private Nachricht senden
Quake
Threadersteller

Dabei seit: 04.12.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 04.12.2006 17:23
Titel

Antworten mit Zitat Zum Seitenanfang
Vielen Dank, jetzt sieht das so aus, wie ich mir das vorgestellt habe. * Applaus, Applaus * * huduwudu! *
  View user's profile Private Nachricht senden
 
Ähnliche Themen Problem mit dem IE-Boxmodell-Bug
margin-top und <li> Problem
CSS Problem mit Margin nd top
IE margin problem
IE7 margin Problem CSS
CSS padding/margin-top-Problem
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB