Baumstrukturmodus | Linearer Modus

Sam Fisher · 19.10.2007, 10:00

Hallo !

Ich habe schon wieder eine Frage bezüglich DIV-Containern. Ich habe eine Beispieldatei geschrieben, um das Problem besser zu veranschaulichen.

Ich habe einen DIV Container erstellt. Dieser beinhaltet zwei weitere DIV Container. Das ganze sieht so aus:

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foo</title>
<style type="text/css">
<!--
#box {
    width:400px;
    border: 1px solid #000000;
}

#links {
    float:left;
    width:100px;
}

#rechts {
    float:right;
    width:300px;
}
-->
</style>
</head>
<body>
<div id="box">
  <div id="links">links, links, links, links,links, links,links, links,links, links,links, </div>
  <div id="rechts">rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts</div>
</div>
</body>
</html> 

Der erste DIV-Container (#box) hat einen Rahmen definiert. Jedoch werden die beiden DIV-Container #links und #rechts nicht in diesen Rahmen gesetzt.
Ich vermute, dass es daran liegt, dass #box eigentlich keinen Inhalt enthält. Sondern nur 2 weitere DIV Container. Wenn ich folgenden Code benutze, wird die Seite richtig dargestellt.

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foo</title>
<style type="text/css">
<!--
#box {
    width:400px;
    border: 1px solid #000000;
}
#links {
    float:left;
    width:100px;
}
#rechts {
    float:right;
    width:300px;
}
-->
</style>
</head>
<body>
<div id="box">
  <div id="links">links, links, links, links,links, links,links, links,links, links,links, </div>
  <div id="rechts">rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts, rechts</div>
  foo </div>
</body>
</html> 

Geändert habe ich folgendes:

PHP-Code:

</div>
  foo </div> 

Ich verstehe nicht, warum foo als Inhalt für #box gilt und zum Beispiel das Wort links nicht.
Wie kann ich das lösen? Ich kann ja nicht einfach auf einer Seite irgend wo FOO schreiben. Das würde irgend wie doof aussehen.

Ich hoffe ich das das Problem genügend erklärt und hoffe, dass ihr mir helfen könnt. Ich glaube nämlich, dass ich nur eien kleinigkeit übersehen habe.

Vielen Dank im Voraus.
Gruß
Sam[/php]

Para · 19.10.2007, 13:19

Versuch mal, das Wort "foo" in ein span-Element zu packen und dieses dann mit display: block; oder visibility: hidden; auszublenden.

Sam Fisher · 19.10.2007, 13:30

Hallo !

Das wäre zwar eine Lösung, aber so was kann man nur temporär machen. Denn irgend wie ist das trotzdem nicht richtig. Das muss doch irgend wie "richtig" zu lösen sein.

Vielen Dank
Sam

dino · 20.10.2007, 11:36

Normalerweise gillt auch ein einfaches "leerzeichen" als Inhalt eines Div-Containers, als HTML-Entitie wird es als " " geschrieben.
So hab ich es immer gemacht, denn so ein leerzeichen fällt eigentlich nicht auf.

Sam Fisher · 24.10.2007, 08:31

Hallo !

Danke für die Antwort. So hat es funktioniert. Vielen Dank
Grüße
Sam