Margin nach oben weg?!

[Albert]

Folgendes Problem, habe nun versucht ein ganz einfaches Layout mithilfe von CSS zu realisieren. Es gibt eine Divbox die hat die Hintergrundfarbe schwarz und darin liegt eine andere divbox (möchte damit einen schwarzen rand erzeugen) und in dieser anderen divbox liegen wiederum 2 divboxen die mithilfe von float:left und float:right angeordnet wurden innerhalb dieser box. Jedoch wird nun der schwarze rand oben irgendwie "abgeschnitten" oder ist zumindst nicht sichtbar im opera und firefox im IE7 funktioniert es sonderbarerweise... nunja hier ist der css code:

#mitarbeiterborder {
 width:404px;
 height:204px;
 margin:0px;
 margin-left:188px;
 padding:0px;
 background-color:#000000;
}
/*mitarbeiterbox*/
#mitarbeiter{
 width:400px;
 height:200px;
 margin:2px;
 padding:0px;
 background-color:#FFFFFF;
}
/*box fuer das foto des mitarbeiters */
#foto{
 float:left;
 width:100px;
 height:150px;
}
/*beschreibung des mitarbeiters */
#beschreibung{
 float:right;
 width:230px;
 height:150px;
}

und der dazugehörende HTML code:

<div id="mitarbeiterborder">
     <div id="mitarbeiter">
      <div id="foto">
       <img src="" width="112px" height="150px" />
      </div>
      <div id="beschreibung">
      beschreibung des mitarbeiters
      </div>
     </div>
    </div>

[Tobias]

Hallo,
irgendwie scheint es mir, verursachst du ne ganz schöne div-Suppe. Ich würd das anders realisieren.

#mitarbeiterborder streichst du komplett. Angaben wie breite, höhe, margin trägst du bei #mitarbeiter ein. Zusätzlich verpasst du #mitarbeiter ein border. #foto wendest du direkt auf das Bild an. Dementsprechend kann der div auch weg. Das floaten bei #beschreibung scheint mir auch irgendwie überflüssig. Außerdem würd ich das nicht in ein div sondern eher in ein <p> packen.

Tschau

Tobias

[Albert]

Danke für die hinweise! mir persönlich kam es auch etwas viel vor für die paar dinger so viel div boxen zu haben, doch unser lektor an der fh meinte eben "ja verwendet blos kein padding oder border damit gibts nur schwierigkeiten in manchen browsern ..."

[Gunnar Bittersmann]

@@Albert:

doch unser lektor an der fh meinte eben "ja verwendet blos kein padding oder border damit gibts nur schwierigkeiten in manchen browsern ..."

Und sowas darf unterrichten?

Lies nach, was "http://de.selfhtml.org/css/formate/box_modell.htm@title=Box-Modell" und "quirks mode" bedeutet, dann bist deinem Lektoren einen großen Schritt voraus.

Live long and prosper,
Gunnar

[Steel]

Danke für die hinweise! mir persönlich kam es auch etwas viel vor für die paar dinger so viel div boxen zu haben, doch unser lektor an der fh meinte eben "ja verwendet blos kein padding oder border damit gibts nur schwierigkeiten in manchen browsern ..."

Welche FH? Ich spiel grad mit dem Gedanken eine neuen Job anzufangen... Die scheinen ja Personal zu suchen, wenn der Hausmeister unterrichten darf.

[Gunnar Bittersmann]

@@Albert:

Jedoch wird nun der schwarze rand oben irgendwie "abgeschnitten" oder ist zumindst nicht sichtbar im opera und firefox im IE7 funktioniert es sonderbarerweise...

Der IE ist bekannt dafür, collapsing margins nicht richtig umzusetzen.

<div id="mitarbeiterborder">
     <div id="mitarbeiter">
      <div id="foto">
       <img src="" width="112px" height="150px" />
      </div>
      <div id="beschreibung">
      beschreibung des mitarbeiters
      </div>
     </div>
    </div>

Was soll diese 'div'-Suppe überhaupt? Du willst einen Rahmen? Dafür gibt es die 'border(-…)'-Eigenschaften.

Mehr Markup als

<div id="mitarbeiter">  
  <img src="JohnDoe" width="112px" height="150px" alt="Foto von John Doe" />  
  <label>Beschreibung des Mitarbeiters John Doe</label>  
</div>

sollte nicht erforderlich sein.

Live long and prosper,
Gunnar