|
[CSS] Inhalt bricht aus DIV-Container aus
Servus, ich habe also folgende HTML Datei (vereinfacht):
Code:
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.
<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> 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:
|
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:
Achtung Augenkrebsgefahr ;)
<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> |
| Alle Zeitangaben in WEZ +1. Es ist jetzt 22:12 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz