✔ Inhalt bricht aus DIV-Container aus

Status
Nicht offen für weitere Antworten.
P

phlux

Grünschnabel
Hi!
Folgendes Problem: Ich habe eine HTML Datei bestehend aus 3 DIV Containern, der 1te spielt den Hauptcontainer und ist 760px breit und hat eine maximale Höhe von 100%
Der 2te hat auch eine höhe von 100% ist allerdings 128px nach rechts verschoben und hat ne breite von 632px. Dieser ist für einen andersfarbigen Hintergrund gedacht, der 3te container beinhaltet Text, jedoch habe ich das Problem, dass wenn der Text zu lang wird er aus dem Container ausbricht und der Hintergrund die Farbe aus dem 1ten Container hat und nicht mehr aus dem 2ten, ich poste hier mal den Code:
HTML: 
<html style="height: 100%">
<head>
  <title></title>
  <style type="text/css"><!--
   body {
     margin: 0px;
   }
   div {
     font-family: Arial;
     font-size: 12px
   }
  //--></style>
</head>
<body style="height: 100%">
  <div style="width: 760px; height: 100%; background: #ccccad;">
   <div style="width: 632px; height: 100%; left: 128px; position: absolute; z-index: 0; background: white">          <div>asd<br><br><br><br><br><br><br><br><br><br><br><br> asd<br><br><br><br><br><br><br><br><br><br><br><br>asd <br><br><br><br><br><br><br><br><br><br><br><br>asd <br><br><br><br><br><br><br><br><br><br><br><br>asd</div>
   </div>
  </div>
</body>
</html>

Wisst ihr wo der Hund begraben liegt? Ich komm dem fehler nämlich nicht auf die schliche :(

mfg phlux/chris
 
Hallöchen :-)
ich glaube zunächst, dass es nicht sonderlich "gesund" ist eine height in % und die width in Pixeln anzugeben. Weiterhin, wenn es eine MAXIMALE HÖHE wäre, dann müsste der Befehl max-height heißen. CSS Befehle findest Du aber auch z.B. hier in einer Übersicht:
Nun, http://www.drweb.de/ressourcen/css_befehle.shtml

Aber grundsätzlich, wenn Du es über Layer löst und

overflow-x:hidden;overflow-y:auto;
einstellst, läuft der Text nicht mehr aus dem gewünschten Bereich

Über den: z-index:
Den Abstand nach links - left: 20px (Bsp.-Breite)

usw., aber ich denke, dass die angegebene Seite schon sehr hilfreich sein wird.

PS: Die Formatierung des Textes kannst Du dann auch gleich dort vornehmen, so musst Du nicht immer mit "Font-Face" arbeiten

Viele Grüße
Nadine
 
Hallöchen,

erstmal haben styles in <html> nichts zu suchen! Das height:100% im <body> kannst Du Dir auch ersparen, bringt nix, denn der ist rein theopraktisch immer das volle Fenster groß, wenn nicht größer...

...desweitern reichte ein kleines "overflow:auto" im entsprechenden <div> um ihm beizubringen, dass er den Text immer innerhalb des <div> halten soll.

HTML: 
<html>
 <head>
 <title></title>
 <style type="text/css">
 <!-- 
 body { margin: 0px; } 
 div { font-family: Arial; font-size: 12px } 
 //-->
 </style> 
 </head>
<body>
<div style="width: 760px; height: 100%; background: #ccccad;">
<div style="width: 632px; height: 100%; left: 128px; position: absolute; z-index: 0; background: white; overflow:auto;">
<div>
	asd<br><br><br><br><br><br><br><br><br><br><br><br>
	asd<br><br><br><br><br><br><br><br><br><br><br><br>
	asd <br><br><br><br><br><br><br><br><br><br><br><br>
	asd<br><br><br><br><br><br><br><br><br><br><br><br>
	asd<br><br><br><br><br><br><br><br><br><br><br><br>
	asd <br><br><br><br><br><br><br><br><br><br><br><br>
	asd <br><br><br><br><br><br><br><br><br><br><br><br>
	asd
</div>
</div>
</div>
</body>
</html>
 
Hi!
Die Height von Html und Body auf 100% zu setzen hat schon sinn, allerdings wird die größe dann nur auf den sichtbaren bereich des Browserfensters gesetzt, naja ich habs jetzt mit einfachem padding in nem simplen Div Container gelöst, sogar ohne hintergrundbild. Trotzdem danke für eure Hilfe!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück