Text ragt über DIV raus

Mariot · #1 (**permalink**) 06.10.2009, 21:09

So ich hab hier gleich nochmal eine Frage. Leider passiert mir das der Text über die divs rausragt. Ich hab schon überall gesucht, hab aber irgendwie nicht die passende Lösung gefunden.Ich hoffe ihr könnt mir weiterhelfen. Bei den div inhalt,navigation und seitenleiste soll das nicht mehr passieren.

Code:

html {
  padding:0px;
  margin:0px;

}

body {
  background-color: #123552;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;
  text-align:center;


}
/*  positioning-layers statisch und absolut */

#elternelement{
background-color:transparent;
width: 1000px;
height: 500px;
position: absolute;
top: 40%;
left: 50%;
margin-left: -500px;
margin-top: -250px;
}

#header{
height:200px;
width:1000px;
background-color:red;
float:left;
}

#elternelement1{
background-color:transparent;
width: 1000px;
height: 110px;
position: absolute;
top: 53%;
left: 50%;
margin-left: -500px;
margin-top: -55px;
}

#elternelement2{
background-color:green;
width: 664px;
height: 110px;
position: absolute;
top: 52%;
left: 50%;
margin-left: -332px;
margin-top: -57px;
}
#news{
height:94px;
width:150px;
margin:8px;
background-color:yellow;
float:left;
}
#news1{
height:94px;
width:150px;
margin:8px;
background-color:yellow;
float:left;
}
#news2{
height:94px;
width:150px;
margin:8px;
background-color:yellow;
float:left;
}
#news3{
height:94px;
width:150px;
margin:8px;
background-color:yellow;
float:left;
}
#elternelement3{
background-color:red;
width: 960px;
height: 100%;
position: absolute;
top: 290%;
left: 50%;
margin-left: -480px;
margin-top: -200px;
}
#navigation{
width:170px;
height:100%;
margin:8px;
background-color:yellow;
float:left;
}
#laufanzeige{
width:588px;
height:15px;
margin-top:8px;
background-color:yellow;
float:left;
}
#seitenleiste{
width:170px;
height:100%;
margin:8px;
background-color:yellow;
float:right;
}
#google{
width:588px;
height:25px;
background-color:yellow;
margin-top:5px;
float:left;
}
#inhalt{
width:588px;
height:500px;
margin-left:0px;
margin-top:5px;
background-color:yellow;
float:left;
}

Und hier HTML:

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><link href="css/screen.css" rel="stylesheet" type="text/css" />
<title>Globalbase-FM | We make the noise</title>
</head>
<body>
<div id="elternelement">
<div id="header">
<div id="elternelement1">
<div id="elternelement2">
<div id="news"></div>
<div id="news1"></div>
<div id="news2"></div>
<div id="news3"></div>
<div id="elternelement3">
<div id ="navigation"></div>
<div id ="laufanzeige"></div>
<div id="seitenleiste"></div>
<div id="google"></div>
<div id="inhalt"></div>

</div>
</div>
</div>
</div>
</div>

</body>
</html>

Danke schonmal für jegliche Hilfe

Pr0g · #2 (**permalink**) 06.10.2009, 21:34

Welcher Text/wo? Kannst du ein Beispiel online stellen.

Mariot · #3 (**permalink**) 06.10.2009, 21:52

Mommentan kann ich kein Beispiel online stellen. Aber sobald man bisschen mehr text zum Beispiel in den div container "inhalt" reinschreibt, ragt er über den Rand hinaus. Ist aber bei allen Containern so.

Pr0g · #4 (**permalink**) 06.10.2009, 22:09

Ich schätze einfach mal es liegt an den festen Maßangaben. Du hast für jeden Div feste Maße angegeben. Was soll der Browser nun machen wenn der Text zu viel für den Bereich wird?

Mariot · #5 (**permalink**) 06.10.2009, 22:23

In die naechste Zeile schreiben . Das macht er aber nicht. Er schreibt einfach ueber die komplette Seite ohne ueberhaupt das Ende des div Containers zu betrachten

andir · #6 (**permalink**) 07.10.2009, 08:41

Pr0G hats schon gesagt:
Position:absolute sorgt dafür, dass deine Container feste Maße erhalten - unabhängig, was drin ist, was draussen ist. Positionierungen haben einige Tücken - hier bietet sich das Floaten der elemente an. Schau mal in die Faqs, dort sind Beispieldateien zum Verwenden /Üben verlinkt.

Mariot · #7 (**permalink**) 07.10.2009, 14:43

Ich werd gleich nochmal in die faq schaun ob ich was finde. Aber was ich nicht verstehe, du empfhielst mir meine divs zu floaten, aber das sind sie doch, bis auf die elternelemente. Das einzige was mir nun einfallen würde, ein div mit position:absolute; um die elemente zu legen in die ich etwas reinschreiben will

Mariot · #8 (**permalink**) 07.10.2009, 17:45

Hab es mal versucht und in der FAQ habe ich auch nachgeschaut. Ich bin echt ratlos, bräuchte des aber schnell...Vielleicht weiß ja noch jemand bitte was.

MfG Mario

mantiz · #9 (**permalink**) 07.10.2009, 18:09

1. Wenn Du Text ohne irgendein Leerzeichen in den div schreibst, dann geht der Text natürlich seitlich aus den divs raus, der Browser findet ja keine Stelle, wo er den Text umbrechen könnte.

2. Wenn Du dem div #inhalt eine feste Höhe von 500px gibst, dann wird das div auch nur 500px hoch gezeichnet, auch, wenn mehr Inhalt drin ist, dann ragt der Inhalt halt dort heraus.

Bei 1. kann man nix machen, außer Leerzeichen einzufügen.

Bei 2. kannst Du entweder die height-Angabe komplett entfernen oder diese durch min-height ersetzen.

Mariot · #10 (**permalink**) 07.10.2009, 18:11

Ok..Das Problem war wirklich Zeit verschwendung. Ich hatte zum Testn der divs einfach nur Blindtext, ohen abstand eingefügt. War ein dummer Fehler ...dankeschön für deine Hilfe

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Auf-/Zuklappen mit JS	crimi	Javascript & Ajax	7	23.09.2008 16:27
Float hängt sich durch's padding durch.	nick	CSS	3	16.01.2008 19:24
Falsche Darstellung beim Internet Explorer	LordAvalon	CSS	4	09.04.2007 16:22
Tabellen in <div>-Tags	dexter2000	CSS	9	19.05.2005 09:53