[CSS] Inhalt bricht aus DIV-Container aus

**phlux**

Servus, ich habe also folgende HTML Datei (vereinfacht):

Code:

			<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

 asd

asd 

asd 

asd</div>

   </div> 

  </div>

 </body>

</html>

So, also ich habe eine HTML Datei erstellt mit nem Ober-Div-Container der 760 px breit ist und maximale höhe hat, dann habe ich darin nochmal einen erstellt der einen abstand von 128px von links hat, in dem Container habe ich jetzt den Container mit inhalt, das einzige problem ist, dass der Inhalt aus dem Containern ausbricht und der Hintergrund nicht mehr über die ganze Seite geht, es fehlt also unten ein stück Farbe, ich weiß nicht wo der Fehler liegt, vllt kann einer von euch mir mal nen Tipp oder so geben.

mfg phlux

**alcaeus**

Hallo phlux,

normalerweise sollten die divs auf die benoetigte Groesse ausgedehnt werden. Sieh dir aber mal die selfHTML-Beschreibung zu

overflow an...

Greetz
alcaeus

**phlux**

Hi alca

Nein das hats nicht gebracht

overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber

**Meflin**

Zitat von phlux:

Hi alca

Nein das hats nicht gebracht

overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber

also afaik gibts doch da noch overflow:auto, und das solte dir helfen...

**Mamphil**

Hi!

Der Fehler liegt im height:100%. Das wird als Höhe des Browserfensters interpretiert und nicht als Höhe der gesamten Seite.

Tipp: Wenn es dir nur um den farbigen Balken geht, nimm einfach eine Hintergrundgrafik (GIF, 128x1px, einfarbig) und setze sie als Hintergrund für den Body ein: style="background-image:ulr(deinbild.gif);background-repeat:repeat-y"

Mamphil

**phlux**

nee overflow: auto tuts leider auch nicht, ich werds dann wohl den old fashioned way tun wie mamphil es schon vorgeschlagen hat.

mfg phlux

height:100% bezieht sich nicht auf die Höhe des Inhaltes, sondern die Höhe des sichtbaren Bereichs.

Liefert folgendes das gewünschte Ergebnis?

markieren

Code:

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title></title>

   <style type="text/css">

   /*<![CDATA[*/

   html,body{height:100%;margin:0;padding:0}

   #content{border-left:128px solid #ccccad;height:100%;min-height:100%}

   div[id]#content{height:auto}

   /*]]>*/

   </style>

</head>

<body>

   <div id="content">

      asd

      asd

      asd

      asd

      asd

   </div>

</body>

</html>

**phlux**

Hi Marco!
Leider nein, habs aber anders gelöst, dank padding usw

**Mamphil**

Und eigentlich gehört es sich, die Lösung dann auch hier zu posten...

**phlux**

Alles klärchen popärchen, nur mal eben das design rausnehmen

markieren

Code:

			<html>

 <head>

  <title>blubb</title>

  <style type="text/css"><!--

   body {

     background: #ccccad;     

     margin: 0px;

   }

   div {

     font-family: Arial;

     font-size: 12px

   }

  //--></style>

 </head>

 <body>

  <div style="width: 760px; background: black">

   <div style="width: 128px; height: 96px; background: red; top: 60px; position: absolute; z-index: 2"></div>

   <div style="width: 632px; height: 96px; background: ivory; top: 60px; left: 128px; position: absolute; z-index: 2">  

    <div style="position: absolute; left: 10px; top: 50px; font-family: impact; color: white; font-size: 20px">Blubb/div>

    <div style="position: absolute; left: 15px; top: 72px; font-family: impact; color: white; font-size: 14px">Lecker Veronas Blubb</div>    

   </div>

   <div style="width: 632px; left: 128px; top: 0px; height: 60px; position: absolute; z-index: 1; background: yellow"></div> 

   <div style="position: absolute; width: 632px; left: 128px; top: 156px; background: pink">

    <div style="width: 485px; padding-left: 132px; padding-top: 15px; padding-bottom: 15px; text-align: justify; color: orange; z-index: 2">

     <div style="position: relative; z-index: 2; top: 0px;">

        TEXT

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque luctus, elit nec posuere euismod, tortor felis

   volutpat quam, vel pulvinar felis orci vel odio. Integer tristique lectus quis pede pellentesque ultricies. 

   Suspendisse convallis quam et purus. Aliquam non ligula. Suspendisse ac leo. Duis eu sapien eu sapien consectetuer 

   sagittis. Nullam a massa vel ipsum blandit congue. Suspendisse enim pede, euismod fermentum, tempus sed, malesuada 

   auctor, lacus. Proin accumsan rutrum eros. Integer scelerisque, est ac cursus facilisis, urna mi facilisis risus, 

   malesuada vestibulum nisl tortor sit amet neque. Nulla congue. Nulla facilisi. Etiam pharetra leo vel erat. Ut eu 

   ante sit amet diam feugiat nonummy.

     </div>   

     <div style="left:0px; width: 632px; height: 499px; position: absolute; bottom: 0px; z-index: 0; background-color: gray">

     </div>   

    </div>

   </div>

  </div>

 </body>

</html>

Achtung Augenkrebsgefahr

[CSS] Inhalt bricht aus DIV-Container aus

[CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Re: [CSS] Inhalt bricht aus DIV-Container aus

Forumregeln

alcaeus Registriert seit: 11. Aug 2003 Ort: München 6.537 Beiträge	#2 Re: [CSS] Inhalt bricht aus DIV-Container aus 11. Mär 2005, 13:53 Hallo phlux, normalerweise sollten die divs auf die benoetigte Groesse ausgedehnt werden. Sieh dir aber mal die selfHTML-Beschreibung zu overflow an... Greetz alcaeus Andreas B. Die Mutter der Dummen ist immer schwanger. Ein Portal für Informatik-Studenten: www.infler.de
	Zitat

phlux Registriert seit: 4. Nov 2002 Ort: Witten 1.335 Beiträge Delphi 6 Personal	#3 Re: [CSS] Inhalt bricht aus DIV-Container aus 11. Mär 2005, 13:57 Hi alca Nein das hats nicht gebracht overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber Christian "phlux" Arndt
	Zitat

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#4 Re: [CSS] Inhalt bricht aus DIV-Container aus 11. Mär 2005, 14:47 Zitat von phlux: Hi alca Nein das hats nicht gebracht overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber also afaik gibts doch da noch overflow:auto, und das solte dir helfen... Leo S. https://github.com/leoschweizer
	Zitat

phlux Registriert seit: 4. Nov 2002 Ort: Witten 1.335 Beiträge Delphi 6 Personal	#6 Re: [CSS] Inhalt bricht aus DIV-Container aus 11. Mär 2005, 14:56 nee overflow: auto tuts leider auch nicht, ich werds dann wohl den old fashioned way tun wie mamphil es schon vorgeschlagen hat. mfg phlux Christian "phlux" Arndt
	Zitat

phlux Registriert seit: 4. Nov 2002 Ort: Witten 1.335 Beiträge Delphi 6 Personal	#8 Re: [CSS] Inhalt bricht aus DIV-Container aus 12. Mär 2005, 00:37 Hi Marco! Leider nein, habs aber anders gelöst, dank padding usw Christian "phlux" Arndt
	Zitat

Mamphil Registriert seit: 17. Jul 2004 Ort: Garching b. München 149 Beiträge Delphi 7 Professional	#9 Re: [CSS] Inhalt bricht aus DIV-Container aus 12. Mär 2005, 11:22 Und eigentlich gehört es sich, die Lösung dann auch hier zu posten... The laws of physics are the canvas God laid down on which to paint his masterpiece. “Leonardo Vetra” in Dan Brown’s “Angels & Demons”
	Zitat