100% mit position: absolute

cille · 7. Dezember 2007

Hallo,
ich habe ein Problem, habe gestern mind. 3h damit verbracht meinen Content, Navigationsleiste und die rechte Informationsleiste auf 100% höhe zu bringen,
dies leider vergebens. Habe einiges Probiert und google konnte mir leider nicht weiterhelfen

.

Hier die Seite:
KLICK MICH

das Design ist sozusagen ganz simpel aufgebaut:

(CONTAINER=position:absolute)
(DIV=positon:absolute)
(DIV=navigation)
(DIV=content)
(DIV=infoseite_rechts)
(/DIV)
(/CONTAINER)

Navigation, Content und Infoleiste müssen 100%.

Hier die Index.php abgespeckt:

HTML:

	<body>
		<div class="umrandung">
	    	<div class="navigation">
		    	<div class="design10"></div>
		        <div class="design13"></div>
		        <div class="design19"></div>
		        <div class="design22"></div>
				<div class="design23"></div>
		        <div class="design26"></div>
			</div>
		
			<div class="design01"></div>
			<div class="design02"></div>
    
			    <!-- Login Area -->

			    <div class="design03"></div>
			    <!-- Ende -->
	
			<div class="design04"></div>
			<div class="design05"></div>
			<div class="design06"></div>
			<div class="design07"></div>

			<div class="design08"></div>
			<div class="design09"></div>
			<div class="design11"></div>
			<div class="design12"></div>
			<div class="design14"></div>
			<div class="design15"></div>
			<div class="design16"></div>
			<div class="design17"></div>
			<div class="design18"></div>

			<div class="design20"></div>
		
			<!-- Content Area -->
			<div class="design21">
				<div class="content"></div>
			</div>
			<!-- Ende -->
	
			<div class="design24"></div>
			<div class="design27"></div>
			<div class="design28"></div>
			<div class="design29"></div>
			<div class="design30"></div>

			<div class="design31"></div>
			<div class="design32"></div>
			<div class="design33"></div>
		</div>
	</body>

CSS Abgespeckt:

Code:

<style type="text/css">
html {height:100%;}
body {
	background-color: #444444; margin: 0 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Design */
.umrandung { position:absolute; left:50%; top:0px; width:1024px; margin-left: -512px; }
.design01 { position:absolute; left:0px; top:0px; width:1024px; height:157px; background-image: url(img/01.jpg); }
.design02 { position:absolute; left:0px; top:157px; width:434px; height:9px; background-image: url(img/02.jpg); }
.design04 { position:absolute; left:955px; top:157px; width:69px; height:78px; background-image: url(img/04.jpg); }
.design05 { position:absolute; left:0px; top:166px; width:74px; height:60px; background-image: url(img/05.jpg); }
.design06 { position:absolute; left:74px; top:166px; width:347px; height:60px; background-image: url(img/06.jpg); }
.design07 { position:absolute; left:421px; top:166px; width:13px; height:60px; background-image: url(img/07.jpg); }
.design08 { position:absolute; left:0px; top:226px; width:434px; height:9px; background-image: url(img/08.jpg); }
.design09 { position:absolute; left:0px; top:235px; width:1024px; height:34px; background-image: url(img/09.jpg); }
.design11 { position:absolute; left:234px; top:269px; width:549px; height:31px; background-image: url(img/11.jpg); }
.design12 { position:absolute; left:783px; top:269px; width:241px; height:28px; background-image: url(img/12.jpg); }
.design14 { position:absolute; left:783px; top:297px; width:172px; height:107px; background-image: url(img/14.jpg); }
.design15 { position:absolute; left:955px; top:297px; width:69px; height:107px; background-image: url(img/15.jpg); }
.design16 { position:absolute; left:234px; top:300px; width:275px; height:24px; background-image: url(img/16.jpg); }
.design17 { position:absolute; left:509px; top:300px; width:274px; height:24px; background-image: url(img/17.jpg); }
.design18 { position:absolute; left:234px; top:324px; width:549px; height:28px; background-image: url(img/18.jpg); }
.design20 { position:absolute; left:234px; top:352px; width:549px; height:1px; background-image: url(img/20.jpg); }
.design24 { position:absolute; left:783px; top:404px; width:241px; height:26px; background-image: url(img/24.jpg); }
.design27 { position:absolute; left:783px; top:430px; width:172px; height:79px; background-image: url(img/27.jpg); }
.design28 { position:absolute; left:955px; top:430px; width:69px; height:79px; background-image: url(img/28.jpg); }
.design29 { position:absolute; left:783px; top:509px; width:241px; height:26px; background-image: url(img/29.jpg); }
.design30 { position:absolute; left:783px; top:535px; width:172px; height:79px; background-image: url(img/30.jpg); }
.design31 { position:absolute; left:955px; top:535px; width:69px; height:79px; background-image: url(img/31.jpg); }
.design32 { position:absolute; left:783px; top:614px; width:241px; height:1px; background-image: url(img/32.jpg); }

/* Content */
.design21 {	position:relative; left:234px; top:353px; width:549px; min-height: 500px; background-image: url(img/21.jpg); }
.content { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; width: 545px; padding-top: 4px; padding-left: 4px; padding-bottom: 4px; }

/* Login */
.design03 { position:absolute; left:434px; top:157px; width:521px; height:78px; background-image: url(img/03.jpg); }

/* Navigation */
.navigation { position:absolute; left:0px; top: 269px; width:234px; }
.design13 { width:234px; height:35px; background-image: url(img/13.jpg); margin:0px; padding:0px; }
.design22 { width:234px; height:34px; background-image: url(img/22.jpg); margin:0px; padding:0px; }
.design26 { width:234px; background-color: #FFFFF; margin:0px; padding:0px; height:5px; }

/* Clan Navigation */
.design10 { width:234px; padding:0; margin: 0; display: block; }

/* Features Navigation */
.design19 { width:234px; padding:0; margin: 0; display: block;}

/* Features Navigation */
.design23 { width:234px; padding:0; margin: 0; display: block;}

/* Right Navigation */
.design33 {	position:absolute; left:783px; top:615px; width:241px; }
</style>

Hoffe Ihr könnt mir Helfen,
ich verfluche mich langsam

Falls euch die abgespeckten Versionen komisch erscheinen:
p-gaming.eu/cms/index.php (HTML CODE)
p-gaming.eu/cms/style.css (CSS CODE)

Danke euch schonmal recht herzlichst.

Sonnige Grüße,
cille

cille · 25. Januar 2008

[SRY] 100% Höhe klappt nicht ganz.

Hi ho,
jaja dieses elende Thema

.
Ich habe dieses Tutorial:
KLICK MICH
ausprobiert.
Es klappt auch soweit,
aber nur in sachen Browserhöhe. Sobald der Text noch weiter geht als der Browser Funktioniert diese nicht.
Habe jetzt 1 Woche nur gesucht und nichts gefunden was mir helfen kann

.
Hoffe Ihr habe eine Lösung.

Hier mein,

HTML:

HTML:

<body>

<div id="wrapper">
	<div class="design01"></div>
	<div class="design02"></div>
	<div class="design04"></div>
	<div class="design05"></div>
	<div class="design07"></div>
	<div class="design08"></div>
	<div class="design09"></div>
	<div class="design11"></div>
	<div class="design18"></div>
	<div class="design12"></div>
	<div class="design19"></div>

	<!-- Nav -->
	<div class="navigation">
		<div class="design10">
			<ul>
		    	<li><a href="index.php?site=management"><strong>Management</strong></a></li>
		        <li><a href="index.php?site=teams"><strong>Teams</strong></a></li>
		        <li><a href="index.php?site=matches"><strong>Matches</strong></a></li>
		        <li><a href="index.php?site=awards"><strong>Awards</strong></a></li>
		        <li><a href="index.php?site=server"><strong>Server</strong></a></li>
			</ul>
		</div>
		<div class="design13"></div>
		<div class="design10">
			<ul>
				<li><a href="index.php?site=galerie"><strong>Galerie</strong></a></li>
				<li><a href="index.php?site=artikel"><strong>Artikel</strong></a></li>
				<li><a href="index.php?site=interviews"><strong>Interviews</strong></a></li>
				<li><a href="index.php?site=report"><strong>Serien Report</strong></a></li>
				<li><a href="index.php?site=wechsel"><strong>Wechselgeschehen</strong></a></li>
				<li><a href="index.php?site=home"><strong>News</strong></a></li>
			</ul>
		</div>
		<div class="design22"></div>
		<div class="design10">
			<ul>
				<li><a href="index.php?site=gbook"><strong>G&auml;stebuch</strong></a></li>
				<li><a href="index.php?site=forum"><strong>Forum</strong></a></li>
				<li><a href="index.php?site=userliste"><strong>Userliste</strong></a></li>
				<li><a href="index.php?site=userranking"><strong>Userranking</strong></a></li>
				<li><a href="index.php?site=umfragen"><strong>Umfragen</strong></a></li>
			</ul>
		</div>
	</div>

	<!-- Match Preview -->
	<div class="design16"><?php /* include("show/match_preview.php"); */ ?></div>

	<!-- Last Results -->
	<div class="design17"><?php /* include("show/last_results.php"); */ ?></div>

	<!-- Main Sponsor -->
	<div class="design14"><?php /* include("show/last_results.php"); */ ?></div>


</div>
</body>

CSS:

HTML:

* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}
body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}
div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
background: #444444;
}

div#wrapper { position: relative; width: 1024px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; background: url(../img/bg.jpg) repeat-y; }
.design01 {	position: absolute;	top: 0;	left: 0; background: url(../img/01.jpg); width: 1024px;	height: 157px; }
.design02 { position: absolute; top: 157px; left: 0; background: url(../img/02.jpg); width: 434px; height: 9px; }
.design04 { position: absolute; top: 157px; left: 955px; background: url(../img/04.jpg); width: 69px; height: 78px; }
.design05 { position: absolute; top: 166px; left: 0; background: url(../img/05.jpg); width: 74px; height: 60px; }
.design07 { position: absolute; top: 166px; left: 421px; background: url(../img/07.jpg); width: 13px; height: 60px; }
.design08 { position: absolute; top: 226px; left: 0; background: url(../img/08.jpg); width: 434px; height: 9px; }
.design09 { position: absolute; top: 235px; left: 0; background: url(../img/09.jpg); width: 1024px; height: 34px; }
.design11 { position: absolute; top: 269px; left: 234px; background: url(../img/11.jpg); width: 549px; height: 31px; }
.design18 { position: absolute; top: 324px; left: 234px; background: url(../img/18.jpg); width: 549px; height: 28px; }
.design12 { position: absolute; top: 269px; left: 783px; background: url(../img/12.jpg); width: 241px; height: 28px; }
.design19 { position: absolute; top: 300px; left: 234px; background: url(../img/16.jpg); width: 275px; }

Würde mich riesig auf baldige Antwort freuen.

Sonnige Grüße aus Cottbus.
cicon

Maik · 25. Januar 2008

Hi,

dass das Elternelement bei zunehmenden Inhalt in der Höhe nicht zunimmt, dürfte an den darin absolut positionierten Elementen liegen. Da hilft dir mein CSS-Tutorial CSS-Layout mit 100%-Höhe auch nicht weiter.

100% mit position: absolute

cille

Erfahrenes Mitglied

cille

Erfahrenes Mitglied

Maik

Neue Beiträge