Delphi-PRAXiS - [CSS] Inhalt bricht aus DIV-Container aus

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [CSS] Inhalt bricht aus DIV-Container aus (https://www.delphipraxis.net/41975-%5Bcss%5D-inhalt-bricht-aus-div-container-aus.html)

[CSS] Inhalt bricht aus DIV-Container aus

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 :hi:

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

Hallo phlux,

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

overflow an...

Greetz
alcaeus

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

Hi alca :hi:
Nein das hats nicht gebracht :( overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber :x

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

Zitat:

Zitat von phlux

Hi alca :hi:
Nein das hats nicht gebracht :( overflow:hidden geht, will ich aber nicht, overflow:visible geht nicht sowas brauch ich aber :x

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

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

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

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

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

mfg phlux :hi:

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

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

Liefert folgendes das gewünschte Ergebnis?

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>

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

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

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

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

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

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

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 ;)

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

Schön, Danke :mrgreen:

Ein Tipp noch:
Statt immer wieder die ellenlangen style-Beschreibungen zu schreiben, würde ich diese lieber in die globale Style-Definition bringen. Wenn Stil nur einmal (für ein Element) verwendet werden soll, kannst du es als id definieren:

Code:

			<style type="text/css">

#roterText {

  color: red;

  }

</style>

<div id="roterText">Dieser Text ist rot!</div>

Wenn ein Stil mehrfach verwendet werden soll, vergibst du eine Klasse:

Code:

			<style type="text/css">

#roterText {

  color: red;

  }

.blauerText {

  color: blue;

  }

</style>

<div id="roterText">Dieser Text <span class="blauerText">ist</span> rot!</div>

<div class="blauerText">Und das "ist" ist sogar blau :)</div>

Dann kannst du die CSS-Definitionen auslagern und sparst Traffic, weil die Seiten kleiner werden. Nebenbei werden die Seiten schneller aufgebaut :)

Mamphil

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

hi mamphil!
ich bin grad erst am start mit dem design, da definier ich immer alles "vor ort" weil ich gerne mal mit den werten experimentier, sobald das design dann abgeschlossen ist, werden die id's und classes definiert und dann noch in ein externes css ausgelagert ;)
nur da ich jetzt erst angefangen habe designs auf basis von div's und nicht mehr mit tables zu machen steh ich des öfteren mal aufn schlauch :mrgreen: falls du dir mal den momentanen stand der dinge ansehen willst schick mir ne pm dann kriegste die url aufs template ;)

mfg phlux :hi:

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

kleine anmerkung:

bitte an die bugs mit margin,border und padding denken.
der ie stellt das nicht richtig da bzw. berechnet falsch.

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

generic: Das stimmt nur zur Hälfte! Der IE stellts falsch dar, ja. Aber auch nur wenn er im Quirks-Mode ist. Sobald du deine Page W3C-konform machst und ne DTD mit einfügst wird es richtig berechnet.

mfg, mh166