Verschachtelte Div-Elemente

[Maddi]

Guten Morgen zusammen.

Ich möchte eine Liste mittels einem Div-Bereich darstellen. In dieser Liste befinden sich Elemente(auch in einem Div-Bereich dargestellt). Und diese Elemente sind aufgeteilt in eine Bereich für den Bereich Projektnamen und Firmenanschrift, weil die Firmenanschrift soll etwas vom Projektnamen versetzt sein. Zur besseren Verständnis habe ich das ganze mal als Bild hochgeladen, wie ich es mir so denke:
http://img87.imageshack.us/my.php?image=projektlistemb4.png

Nun ist mein Problem das der Bereich der Firmenanschrift gar nicht angezeigt wird. Ich glaube es liegt an der Definition der Abstände mittels margin-top und margin-left. Hier mein Code dazu:

#projektliste {
 width: 650px;
 height: 800px;
 background-color: #ffffff;
 overflow: hidden;
}

#projekteintrag {
 width: 645px;
 height: 50px;
        border:1px solid #606060;
        border-bottom-color:#ffffff;
 background-color: #ffffff;
 overflow: hidden;
}

#projekteintrag_projektname {
 width: 450px;
 height: 50px;
        margin-top: 0px;
        margin-left: 0px;
 background-color: #000000;
 overflow: hidden;
}

#projekteintrag_firmenanschrift {
 width: 180px;
 height: 50px;
        margin-top: 20px;
        margin-left: 0px;
 background-color: #808080;
 overflow: hidden;
}

Die Background-Farben habe ich Testhalber so gewählt, damit ich erkennen kan, ob die Bereiche angezeigt werden oder nicht. WÜrde mich über jede Hilfe freuen.

Mit freundlichen Grüßen
Maddi

[Michael Schulz]

Hallo Maddi,

nimm mal das "overflow: hidden" raus. Dann bekommst Du bestimmt mehr angezeigt. Ich vermute mal, das die Daten mit Randabstand etc. schlicht zu gross sind und entsprechend nicht eingeblendet werden, da "hidden".

Michael

[Maddi]

Hallo Maddi,

nimm mal das "overflow: hidden" raus. Dann bekommst Du bestimmt mehr angezeigt. Ich vermute mal, das die Daten mit Randabstand etc. schlicht zu gross sind und entsprechend nicht eingeblendet werden, da "hidden".

Michael

Danke Michael für dein Hilfe.

Nun habe ich das "overflow: hidden" rausgenommen jedoch habe ich dennoch einen komischen Fehler drinnen, bei dem ich nicht weiß, wieso er da ist. Das ganze wieder als Bild zuerst gezeigt:
http://img216.imageshack.us/my.php?image=listect2.png

Die Farben der Div-Bereiche sind nur aus Testzwecken so gewählt :). Wie man erkennen kann setzt er den ersten grauen Bereich rechts in die zweite Zeile und den zweiten grauen Bereich in die dritte Zeile, die es eigentlich gar nicht gibt. Zuerst möchte ich den CSS-Code aufführen:

#projektliste {
 width: 650px;
 height: 800px;
 background-color: #ffffff;
}

#projekteintrag {
 width: 645px;
 height: 50px;
        border:1px solid #606060;
        border-bottom-color:#ffffff;
 background-color: #ffffff;
}

#projekteintrag_projektname {
 width: 450px;
 height: 50px;
        margin-top: 0px;
        margin-left: 0px;
 background-color: #000000;
}

#projekteintrag_firmenanschrift {
 width: 180px;
 height: 50px;
        margin-top: 0px;
        margin-left: 500px;
 background-color: #808080;
}

Und dann noch meinen HTML-Code dazu:

<div id='projektliste'>
<div id='projekteintrag'>
 <div id='projekteintrag_projektname'>
  <a href='index.php?option=com_projektboerse&Itemid=26&pid=1'>Projektmanager im Automotive Umfeld (m/w)</a>

<br>
2007-12-07 07:10:04
 </div>
 <div id='projekteintrag_firmenanschrift'>
2007-12-07 07:10:04
 </div>
</div>
<div id='projekteintrag'>
 <div id='projekteintrag_projektname'>
  <a href='index.php?option=com_projektboerse&Itemid=26&pid=2'>Browser Add-On</a>
  <br>

2007-12-10 07:20:03
 </div>
 <div id='projekteintrag_firmenanschrift'>
2007-12-10 07:20:03
 </div>
</div>
</div>

Ich würde mich wirklich über jede Hilfe freuen.

MfG
Maddi

[Michael Schulz]

Hallo Maddi,

nach Deinen CSS-Vorgaben ist das sehr wohl richtig. Du musst Dich mal mit mit Reihenfolge von Elementen und auch dem Bereich positionsart (positionierung) auseinandersetzen. Vergiss bitte nicht, das erstmal alle Elemente "hintereinander" gehängt werden! Ja, auch StyleSheets

Für Dein Beispiel kannst Du übrigens leichter mit einer Tabelle Arbeiten (Tabelle) und hier die entsprechenden Zellen über css Klassen formatieren. Da bist Du bestimmt mit weniger Schreibarbeit schneller und leichter am Ziel und Du hast ein Aussehen, was sich an den Inhalten orientiert.
Bei dem Fixen vorgehen mit Bereichen passiert es schnell mal, das Text zu lang wird und über den Bereich heraus läuft. Tabelle "formatieren" sich da "selbstständig".

Michael