zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wrapper wächst nicht mit, keine Floats

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.02.2010, 13:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard Wrapper wächst nicht mit, keine Floats

Hallo,

ich möchte, daß die eigentlichen DIVs von einem Container umschlossen werden. Sonst habe ich mit floats gearbeitet und ein clearendes Element nach den Hauptdivs genutzt, damit der Container mitwächst.

Diesmal ist das Design aber etwas verschachtelt, daher habe ich die DIVs positioniert. Nun wächst aber der umschliessende Container nicht mehr mit.

Irgendwie stehe ich auf dem Schlauch...


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="sytle.css" rel="stylesheet" type="text/css" />
</head>
 	<body>
		<div id="container">
  			<div id="wrapper">	
				<div id="logo">Tolles Logo
				</div>	
                <div id="top">Tolles Menü
				</div>
                <div id="right">
				</div>
                <div id="left">Tolles Menü
				</div>
                <div id="flex">Tolles Bild				</div>
                <div id="lang">
				</div>	
				<div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div>
			</div>	
  		</div>	
 	</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */

html{
	min-height: 101%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
	font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
        padding: 0px;
}

#container{
	width: 832px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #33FF00;
}

#wrapper {
	width: 816px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #fbe7c5;
	position: relative;
	top: 0px;
	left: auto;
}

#logo{
	width: 253px;
	height: 184px;
    padding: 0px;
    margin: 0px;
	background: #663300;
	border-bottom: 10px solid #8c6640;
	position: relative;
}

#top{
	width: 514px;
	height: 174px;
	padding: 0px;
	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	left: 253px;
}

#right{
	width: 49px;
	height: 184px;
    	padding: 0px;
    	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	right: 0px;
	border-bottom: 10px solid #8c6640;
}

#left{
	width: 253px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position:absolute;
	top: 194px;
	left: 0px;
	border-bottom: 10px solid #990000;
		
}

#flex{
	width: 514px;
	height: 356px;
	padding: 0px;
	margin: 0px;
	background: #ffffff;
	position: absolute;
	top: 174px;
	left: 253px;
}

#flex img {
        border: 0px;
        margin: 0px;
        padding: 10px;
}


#lang{	
	width: 49px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position: absolute;
	top: 194px;
	right: 0px;
	border-bottom: 10px solid #990000;

		
}	

#main {
	width: 816px;
    	padding: 0px;
    	margin: 0px;
	background: #990000;
	position: absolute;
	top: 530px;
	left: 0px;
        color: #ffffff;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.02.2010, 13:49
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Hallo,
bei absoluter Positionierung wachsen die Eltern-Elemente nicht mit, so positionierte Elemente sind für den Rest einfach nicht vorhanden.

Wenn ich mir dein Layout anschaue, vermute ich, dass du einen Wrapper möchtest, der sich bei wenig Inhalt bis zum unteren Browserrand erstreckt und sich bei mehr Inhalt nach unten ausdehnt. Richtig?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.02.2010, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard

Hallo EvT,

so in etwa ist es gedacht. Der Wrapper (grüner Kasten) soll immer soweit nach unten wachsen, daß der rote Mainbereich (Text) umschlossen ist. Wächst auch der rote Bereich weiter nach unten (weil mehr Text abgebildet wird) dann soll der Wrapper auch weiter mitwachsen.
Der Wrapper bekommt ein Hintergrundbild (repeat-y), damit soll ein Schlagschatten realisiert werden.
Bin ich vielleicht ganz falsch an die Sache rangegangen?! Hilfe!!!!
Mit Zitat antworten
  #4 (permalink)  
Alt 10.02.2010, 14:12
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Fang von vorne an. Damit der (Haupt-)Container sich auf volle Höhe erstecken kann, brauchen seine Vorgänger-Elemente html und body eine Höhenzuweisung von je 100%. Der #container bekommt ebenfalls 100%, aber nicht als Höhe, sondern als Mindesthöhe.

Code:
<style type="text/css">
html, body {height: 100%;}
#container {min-height:100%;}
</style>

<body>
<div id="container"> </div>
</body>
Das sollte für den Anfang reichen. Die anderen Elemente deiner Seite kannst du nun ganz normal in den Container einsetzen und anordnen. Aber bitte nicht mit absoluter Positionierung, sondern bei nebeneinander stehenden Elementen besser per float.

PS: Falls du mit Opera arbeitest, müsstest du in den o.g. Code noch ein <link href="soundso.css" rel="stylesheet" type="text/css" /> einsetzen, da einige Opera-Versionen ansonsten die min-height nicht annehmen.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.02.2010, 14:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard

Hallo EvT,

danke schon mal für die Antwort. Mit floats habe ich es nicht hinbekommen, daß DIV flex ohne Abstand zum DIV top angezeigt wird. Es war immer ein Versatz da, weil er nur bis zur unteren Kante des DIVs right nach oben gefloatet ist. Dieses verschachtelte ging erst, als ich die DIVs positioniert habe.
Mit Zitat antworten
  #6 (permalink)  
Alt 10.02.2010, 14:39
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Hattest du den CSS-Prolog (-->FAQ 1) in deinem Stylesheet drin? Ansonsten schreib doch nochmals deinen Seitenaufbau neu und poste ihn, selbst wenn er fehlerhaft sein sollte. Man sieht dann besser, um was es eigentlich geht bzw. wo es fehlt.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.02.2010, 15:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard

Ok, habe es nochmal neu geschrieben:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
    </head>
 	<body>
  		<div id="wrapper">	
			<div id="logo">Logo
            </div>	
			<div id="top">Menü
            </div>
			<div id="right">Nix
            </div>
			<div id="left">Menü
            </div>	
			<div id="flex">Bild
            </div>
			<div id="lang">Sprache
            </div>	
			<div id="main">Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. Toller Text. </div>
            <div id="footer">
            </div>
  		</div>	
</body>
</html
hier die CSS:

Code:
@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }

html{
	height: 100%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
	font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
   	padding: 0px;
	height: 100%;
}

#container{
	width: 832px;
	margin: 0 auto;
	margin-top: 0px;
	background-color:#33FF00; 
	min-height: 100%;

}

#wrapper {
	width: 817px;
	margin: 0 auto;
	margin-top: 0px;
	background-color:#FF0000;
}

#logo{
	width: 253px;
	height: 184px;
        padding: 0px;
        margin: 0px;
	background-color:#FFFF00;
	border-bottom: 10px solid #8c6640;
	float: left;
}

#left{
	width: 253px;
	height: 326px;
        padding: 0px;
        margin: 0px;
	background-color:#FF9900;
	border-bottom: 10px solid #990000;
	float: left;
}

#top{
	width: 514px;
	height: 174px;
	padding: 0px;
	margin: 0px;
	background-color:#00FFFF;
	float: left;
}

#flex{
	width: 514px;
	height: 356px;
	padding: 0px;
	margin: 0px;
	background: #999;
	float: left;
}

#right{
	width: 49px;
	height: 184px;
        padding: 0px;
        margin: 0px;
	background: #663300;
	border-bottom: 10px solid #8c6640;
	float: left;
}

#lang{	
	width: 49px;
	height: 326px;
        padding: 0px;
        margin: 0px;
	background-color:#FF99FF;
	border-bottom: 10px solid #990000;	
	float: left;
}	

#main {
	width: 816px;
        padding: 0px;
        margin: 0px;
	background: #fff;
        color: #000;
	float: left;
}

#footer {
	clear: both;
}
Die roten Balken sollten nicht sichtbar sein. Das ist der Versatz von dem ich sprach. Wenn ich z.B. für das DIV flex ein margin-top: -18px anwende, zieht er das DIV nach oben und dann sieht es ok aus, aber ich glaube nicht, daß das die feine englische Art ist. Wenn es also eine sauberere Lösung gibt, wäre ich sehr daran interessiert! Danke für die Mühe,

die Lady
Mit Zitat antworten
  #8 (permalink)  
Alt 10.02.2010, 16:12
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Schau dir mal #logo, #top und #right an. In diesen Regeln sind sowohl untere Rahmenlinien festgelegt als auch unterschiedliche Höhen:

Code:
height: 184px; bzw. height: 174px;

border-bottom: 10px solid #8c6640;
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2010, 16:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard

Genauso soll es ja sein. Das meine ich mit "verschachtelt". Top soll nicht so hoch sein wie logo und right und flex soll dementsprechend hochrutschen. Das ist eben mein Problem
Daher dachte ich, daß man das nicht mit floats sondern mit relativer/absoluter Positionierung arbeiten muss.
Wenn Du für flex ein margin-top: -18px angibst, siehst Du, wie es aussehen soll.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.02.2010, 16:39
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von maclady Beitrag anzeigen
Wenn Du für flex ein margin-top: -18px angibst, siehst Du, wie es aussehen soll.
Dann mach das doch, ich wüsste im Moment nichts, was dagegen spricht.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit meinem content wrapper d3x CSS 10 13.10.2010 16:00
Wrapper um/in beliebiges Element Sonny Lane CSS 1 13.03.2010 09:01
Layout | Position | Wrapper danzo CSS 4 19.10.2009 18:41
Wrapper wächst nicht mit sondern bleibt fix. mafra CSS 18 27.10.2008 23:08
Wrapper Container wächst nicht mit bendar CSS 2 03.05.2005 10:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:21 Uhr.