<div> im <div>

[FSommer]

Moin, moin

ich habe ein kleines/großes Problem ;) ich habe folgende <div> konstruktion
Da ich zum erstenmal mit div's arbeite bin ich also Anfänger.

hier erstmal mein Code:

  
<div id="content">  
  <div id="links">Links  
    <div id="content_links></div>  
  </div>  
  <div id="rechts">Rechts  
    <div id="content_rechts></div>  
  </div>  
</div>  
  

und nun der CSS bereich:

  
#content {  
  width: 855px;  
  height: auto;  
  background-image:url('../images/content_bg.png');  
  background-repeat: repeat-y;  
}  
  
#links {  
  margin: 0px auto;  
  float: left;  
  width: 555;  
}  
  
#links_content {  
  font-family: Arial....  
  font-size: 9pt;  
  color: ....;  
}  
  
#rechts {  
  margin: 0pt 0pt 0pt 555pt; //Diese Zeile weiß ich nicht was sie bringt  
  float: right;  
  width: 300px;  
}  
  
#rechts_content {  
  font-family: Arial....  
  font-size: 9pt;  
  color: ....;  
}  

Ich habe also wenn ich alles richtig gemacht habe ein ebene erstellt in der das Hintergrundbild content_bg.png erscheint. In diesem Div erzeuge ich zwei weitere divs die nebeneinander (links und rechts) angeordnet sind. Wenn ich nun etwas in die linke Spalte schreibe (content_links) erscheint kein Hintergrundbild. Wenn ich in die Rechte Spalte etwas schreibe (content_rechts) erscheint die Hintergrund grafik. Wenn ich in der Rechten Spalte etwas schreibe und in der linken Spalte ein längerer Text steht, geht die hintergrundgrafik des content-divs nur bis zum ende des rechten Textes, der linke Text schießt darüber hinaus.

Was mache ich verkehrt??

Danke für eure Hilfe ;)

[ChrisB]

Hi,

ich habe ein kleines/großes Problem ;)

Eins? Mehrere.

ich habe folgende <div> konstruktion

Zum einen kochst du da vermutlich eine ziemliche DIV-Suppe. Nimm nicht DIV für "alles", sondern das von der Struktur her jeweils geeignetste Element.

Und zum anderen wählst du IDs, die mindestens ungünstig sind. "links" und "rechts" beziehen sich auf die *derzeit* gewünschte Darstellung - sollte die sich mal ändern, wird die Wahl dieser IDs sinnfrei. Zeichne also Elemente nach ihre Funktion mit IDs/Klassen aus, nicht nach dem aktuellen Darstellungswunsch.

Ich habe also wenn ich alles richtig gemacht habe ein ebene erstellt in der das Hintergrundbild content_bg.png erscheint. In diesem Div erzeuge ich zwei weitere divs die nebeneinander (links und rechts) angeordnet sind. Wenn ich nun etwas in die linke Spalte schreibe (content_links) erscheint kein Hintergrundbild. Wenn ich in die Rechte Spalte etwas schreibe (content_rechts) erscheint die Hintergrund grafik. Wenn ich in der Rechten Spalte etwas schreibe und in der linken Spalte ein längerer Text steht, geht die hintergrundgrafik des content-divs nur bis zum ende des rechten Textes, der linke Text schießt darüber hinaus.

Übliches Anfängerproblem - Auswirkungen von float nicht verstanden.

Lese dir den SELFHTML Weblog-Eintrag Grundlagen für Spaltenlayout mit CSS komplett und aufmerksam durch.

MfG ChrisB

[Jonathan_]

<div id="content">
  <div id="links">Links
    <div id="content_links"></div>
  </div>
  <div id="rechts">Rechts
    <div id="content_rechts"></div>
  </div>
</div>

  
Hey,  
bei dir fehlen beispielsweise die Anführungszeichen hinter content\_links und content\_rechts.  
  
Abgesehen davon hat mein Vorredner recht du solltest dir nochmal grundlegendes zu css anschauen.  
Hier findest du z.B. vieles. (hat mir auch geholfen ;))  
http://www.thestyleworks.de/index.shtml  
  
Gruß  
Jonathan

[Gunnar Bittersmann]

@@Jonathan_:

nuqneH

<div id="content">
  <div id="links">Links
    <div id="content_links"></div>
  </div>
  <div id="rechts">Rechts
    <div id="content_rechts"></div>
  </div>
</div>

Hey,
bei dir fehlen beispielsweise die Anführungszeichen hinter content_links und content_rechts.

Nein, bei ChrisBs Code fehlten sie nicht. Antworte bitte auf das Posting, auf das du dich beziehst.

Und Verweise einbinden.

Qapla'