✔ CSS Layout

Status
Nicht offen für weitere Antworten.
kevkev

kevkev

Erfahrenes Mitglied
Hi,

Mein Problem:
Ich habe eine Seite, in der ein Div zentriert ist.
Dieses Div besitzt einen Hintergrund, der von oben nach unten des Divs fließen soll.

Soweit alles klar.
Dieses Div das zentriert ist, hat die Höhe 100%.

Doch:
Wenn nun Text im Div ist, das mehr Platz braucht, bleibt praktisch der Div Hintergrund genau bei 100% stehen.

Ok, das habe Ich auch gelößt, jedenfalls wird bei Text, das im zentriertem Div steckt, das zentrierte Div nach unten gezogen, sofern der Text mehr braucht.

Nun das Problem:
Wenn Ich nun aber _noch_ ein Div _in_ das zentrierte Div lege, und dieses Div mehr Platz braucht, zieht es nicht das zentrierte Div mitrunter, sondern überlapt (siehe Bild).

Ich hoffe Ich habe es einigermaßen gut erklärt :)!

So, wie bekomme Ich es nun hin, dass das Div, das im zentriertem Div liegt das zentrierte Div bei mehr Inhalt auch nach unten zieht?

Gruß Kevin
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    22,6 KB · Aufrufe: 93
Der HTML- und CSS-Code der Seite wäre aufschlussreicher, als die angehängte Grafik.
 
Hi,

Ahh, stimmt, dachte doch Ich hab was vergessen ^^.

Code: 
	html {
		height:100%;
	}

	body {
		margin:0px;
		padding:0px;
		height:100%;
	}

	#main {	
		width:700px;
		min-height:100%;
		padding-left:15px;
		padding-right:15px;
		margin:auto;
	}
	
	#content {
		width:700px;
		padding-top:5px;
	}
	
	* html #content { 
		width:700px;
	}
	
	* html #main { 
		height:100%;
		width:730px;
	}

PHP: 
<body>
	<div id="main">
		<div id="content">
			zentrierte Div
			<div style="das div dass das zentierte div mitziehen soll">
				123
			</div> 

		</div>
	</div>
</body>
 
kevkev hat gesagt.:
HTML: 
<div style="das div dass das zentierte div mitziehen soll"> 
                123 
            </div>
Zum Vergrößern anklicken....
In dem style-Attribut wird kein Text, sondern CSS-Eigenschaften notiert. ;-]


So wird bei mir alles korrekt dargestellt:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html {
                height:100%;
        }

        body {
                margin:0px;
                padding:0px;
                height:100%;
        }

        #main {
                width:700px;
                min-height:100%;
                padding-left:15px;
                padding-right:15px;
                margin:auto;
                background: yellow;
        }

        * html #main {
                height:100%;
                width:730px;
        }

        #content {
                width:700px;
                padding-top:5px;
                border: 1px solid #000;
        }

        * html #content {
                width:700px;
        }
-->
</style>

</head>
<body>

<div id="main">
        <div id="content">
            zentrierte Div
            <div style="background:#dfdfdf">
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
                <p>das div dass das zentierte div mitziehen soll</p>
            </div>

        </div>
    </div>


</body>
</html>
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück