zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden "height: 100%" wird nicht übernommen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2009, 00:46
Benutzerbild von bodoalbstadt
Rookie
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2008
Beiträge: 75
bodoalbstadt befindet sich auf einem aufstrebenden Ast
Ausrufezeichen "height: 100%" wird nicht übernommen

Hallo. Ich habe mir eine Homepage erstellt und möchte, dass die Höhe immer auf mindestens 100% gesetzt wird, also dass der Footer auch dann bis an den unteren Browserrand gezogen wird wenn der Inhalt weniger ist. Momentan wird leider noch alles nach oben gezogen bis unter den Inhalt.

Bei einer anderen Homepage hatte es einwandfrei funktioniert, aber hier klappt esirgendwie nicht und ich stehe nun nach knapp 12 Stunden hin und her probieren wirklich langsam auf dem Schlauch.

Der CSS Teil der es in die Höhe ziehen sollte ist dieser hier:

Code:
#MainTable {
	height: 100%;
}
Vielleicht kann mir ja einer von Euch mal helfen dabei.

Hier sind mal die Codes der Seite:

XHTML
Code:
<?php
	session_start();
?>

<?php

	// Navigation
	$navTemplateId = "3";

	// Code
	$article = OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']);
	$articleK = $article->getValue("_keywords");
	$articleD = $article->getDescription();

	// Einbinden des Navigation Template
	$navTemplate = new rex_template($navTemplateId); 
	include $navTemplate->getFile();

	if($this->getValue("description") != "") {
		$meta_beschreibung = htmlspecialchars($this->getValue("description"));
	}

	else {
		$meta_beschreibung = htmlspecialchars($articleD);
	}

	if($this->getValue("keywords")!= "") {
		$meta_suchbegriffe = htmlspecialchars($this->getValue("keywords"));
	}

	else {
		$meta_suchbegriffe = htmlspecialchars($articleK);
	}
?>

<!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="de" lang="de">

<head>
	<title>Bewerbungsunterlagen Andreas Bodonge <?php print $REX['SERVERNAME'].' | '.htmlspecialchars($this->getValue("name")); ?></title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta name="keywords" content="<?php print htmlspecialchars($this->getValue("art_keywords")); ?>" />
	<meta name="description" content="<?php print htmlspecialchars($this->getValue("art_description")); ?>" />

	<link rel="stylesheet" type="text/css" href="http://bodonge.kilu.de/style.css" media="screen" />
</head>

<body>

<div id="MainTable">

	<div id="header">
	</div>

	<div id="menu">
		<?php 
			echo $navLeftCol;
		?>
	</div>

	<div id="content">

		<div id="colLeft">
		</div>

		<div id="colMain">
			<?php 
				echo $this->getArticle(); 
			?>
		</div>

		<div id="colRight">
			<?php
				$artikel_2 = new article;
				$artikel_2->setCLang($REX['CUR_CLANG']);
				$artikel_2->setArticleID(9);

				echo "<div>".$artikel_2->getArticle()."</div>";
			?>
		</div>

		<div style="clear: both;">
			&nbsp;
		</div>

	</div>

	<div id="footer">
			<?php
				$artikel_3 = new article;
				$artikel_3->setCLang($REX['CUR_CLANG']);
				$artikel_3->setArticleID(10);

				echo "<div>".$artikel_3->getArticle()."</div>";
			?>
	</div>

</div>

</body>

</html>
CSS
Code:
html {
}

body {
	margin: 20px 0px 0px 0px;
	padding: 0;
	background: #CECECE url(images/img1.gif);
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
	color: #730000;
}

h1 {
	font-size: 1.6em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	margin: 0;
	font-size: 1em;
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a:link {
	color: #730000;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}

#MainTable {
	height: 100%;
}


/* Header */

#header {
	width: 700px;
	height: 200px;
	margin: 0 auto;
	background: url(images/header.jpg);
}

#header * {
	margin: 0;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: normal;
	color: #FFFFFF;
}

#header h1 {
	float: left;
	padding: 20px 0 0 30px;
	font-size: 3em;
}

#header h2 {
	float: left;
	padding: 30px 0 0 10px;
	font-size: 1em;
}


/* Menu */

#menu {
	width: 700px;
	height: 41px;
	margin: 0 auto;
	background: #2E2E2E url(images/img3.gif)
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	text-decoration: none;
	color: #CCCCCC;
}

#menu a:hover, #menu .active a {
	background: url(images/img4.gif);
	color: #FFFFFF;
}


/* Content */

#content {
	width: 700px;
	margin: 0 auto;
	background: url(images/img5.gif);
	min-height: 100%;
}

#colLeft {
	float: left;
	width: 160px;
	padding: 20px 10px 10px 10px;
}

#colMain {
	float: left;
	width: 360px;
	padding: 20px 10px 10px 10px;
}

#colRight {
	float: left;
	width: 120px;
	padding: 20px 10px 10px 10px;
}


/* Footer */

#footer {
	width: 700px;
	margin: 0 auto;
	padding: 10px 0;
	background: url(images/img6.gif) repeat-x;
	font-size: smaller;
}

#footer * {
	color: #000000;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2009, 07:50
Benutzer
neuer user
 
Registriert seit: 09.03.2005
Ort: Wolfsburg
Beiträge: 80
lippoli15 befindet sich auf einem aufstrebenden Ast
Standard

Code:
#MainTable {
	height: 100%;
}
goes
Code:
#MainTable {
	height: 100%;
        display: block;
}
Wei´ß gerade nicht genau obs hilft aber teste ma!
__________________
Keine signatur
Auchnicht schlimm
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2009, 10:26
Neuer Benutzer
neuer user
 
Registriert seit: 05.02.2009
Beiträge: 1
Manuel.Schmoellerl befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich habe komischerweise das selbe Problem.
Im IE funktionierts, im FF nicht.

Ich habe das Problem aber zufällig auch mit dem CMS Redaxo.

Beste Grüße
Manuel
__________________
Manuel Schmöllerl
Internet & Marketing

Web: http://schmoellerl.com
Blog: http://www.mehr-erfolg-im-internet.at
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2009, 10:29
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Alle Elternelemente bis hinauf zu html müssen natürlich auch 100% Höhe haben, damit der Wert überhaupt eine Bedeutung hat.
__________________
toscho.de
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2009, 12:00
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von lippoli15 Beitrag anzeigen
Code:
#MainTable {
	height: 100%;
}
goes
Code:
#MainTable {
	height: 100%;
        display: block;
}
Wei´ß gerade nicht genau obs hilft aber teste ma!
Da es sich bei diesem Element um ein div handelt, ist das Display Block überflüssig.

Ansonsten hier in den FAQs mal nach "Footer Stick Alt" suchen. Eine möglichkeit den Footer immer am unteren Rand des Viewports zu plazieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2009, 12:27
Benutzerbild von bodoalbstadt
Rookie
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2008
Beiträge: 75
bodoalbstadt befindet sich auf einem aufstrebenden Ast
Standard

Das mit der Vererbung der Elternteile habe ich schon ausprobiert, aber es geht einfach nicht.

Wenn ich zusätzlich zu html, body und #MainTable auch noch bei #content und #colMain height: 100%; angebe zieht er mir zwar das ganze in die Höhe, ABER dann hat der Bereich #content 100% Höhe, nicht der gesamte Teil.

Es ist schon irgendwie verwirrend dass genau das bei anderen Seiten funktioniert, aber beim Redaxo CMS irgendwie nicht.

Wenn ich Footer Stick Alt verwende, zieht er mir dann den Footer an den unteren Bildschirmrand und den rest darüber mit nach unten oder nur den Footer? Und bleibt der Footer dann da unten auch wenn der Rest darüber die Höhe schon weit überschritten hat? Will jetzt nicht unbedingt Zeit und Arbeit rein stecken wenn vielleicht genau letzteres passiert.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.02.2009, 23:43
Benutzerbild von bodoalbstadt
Rookie
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2008
Beiträge: 75
bodoalbstadt befindet sich auf einem aufstrebenden Ast
Standard

Ich habe jetzt auch das mit dem Footer Stick Alt versucht, aber es klappt auch nicht. Ich bin langsam echt am verzweifeln.

Hier nochmal der Code:

HTML
HTML-Code:
<?php
	session_start();
?>

<?php

	// Navigation
	$navTemplateId = "5";

	// Code
	$article = OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']);
	$articleK = $article->getValue("_keywords");
	$articleD = $article->getDescription();

	// Einbinden des Navigation Template
	$navTemplate = new rex_template($navTemplateId); 
	include $navTemplate->getFile();

	if($this->getValue("description") != "") {
		$meta_beschreibung = htmlspecialchars($this->getValue("description"));
	}

	else {
		$meta_beschreibung = htmlspecialchars($articleD);
	}

	if($this->getValue("keywords")!= "") {
		$meta_suchbegriffe = htmlspecialchars($this->getValue("keywords"));
	}

	else {
		$meta_suchbegriffe = htmlspecialchars($articleK);
	}
?>

<!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="de" lang="de">

<head>
	<title>Bewerbungsunterlagen Andreas Bodonge <?php print $REX['SERVERNAME'].' | '.htmlspecialchars($this->getValue("name")); ?></title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta name="keywords" content="<?php print htmlspecialchars($this->getValue("art_keywords")); ?>" />
	<meta name="description" content="<?php print htmlspecialchars($this->getValue("art_description")); ?>" />

	<link rel="stylesheet" type="text/css" href="http://bodonge.kilu.de/style.css" media="screen" />
</head>

<body>

<div id="MainTable">

	<div id="header">
	</div>

	<div id="menu">
		<?php 
			print $topMenu;
		?>
	</div>

	<div id="content">

		<div id="colLeft">
		<div id="leftmenu">
			<?php 
				print $vertikalMenu;
			?>

<!--			<?php
				$artikel_4 = new article;
				$artikel_4->setCLang($REX['CUR_CLANG']);
				$artikel_4->setArticleID(12);

				echo "<div>".$artikel_4->getArticle()."</div>";
			?>
-->
		</div>
		</div>

		<div id="colMain">
			<?php 
				echo $this->getArticle(); 
			?>
		</div>

		<div id="colRight">
			<?php
				$artikel_2 = new article;
				$artikel_2->setCLang($REX['CUR_CLANG']);
				$artikel_2->setArticleID(9);

				echo "<div>".$artikel_2->getArticle()."</div>";
			?>
		</div>

		<div style="clear: both;">
			&nbsp;
		</div>

	</div>

	<div id="footer">
		<?php
			$artikel_3 = new article;
			$artikel_3->setCLang($REX['CUR_CLANG']);
			$artikel_3->setArticleID(10);

			echo "<div>".$artikel_3->getArticle()."</div>";
		?>
	</div>

</div>

</body>

</html>

CSS
Code:
* html body {
	height:100%;
}

html {
	height:100%;
}

body {
	margin: 20px 0px 0px 0px;
	padding: 0;
	background: #CECECE url(images/img1.gif);
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	height:100%;
}

h1, h2, h3 {
	color: #730000;
}

h1 {
	font-size: 1.6em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	margin: 10px 5px 0 0;
	font-size: 0.8em;
	float: left;
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a:link {
	color: #730000;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}

#MainTable {
	min-height:100%;
}


/* Header */

#header {
	width: 700px;
	height: 200px;
	margin: 0 auto;
	background: url(images/header.jpg);
}

#header * {
	margin: 0;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: normal;
	color: #FFFFFF;
}

#header h1 {
	float: left;
	padding: 20px 0 0 30px;
	font-size: 3em;
}

#header h2 {
	float: left;
	padding: 30px 0 0 10px;
	font-size: 1em;
}


/* Menu */

#menu {
	width: 700px;
	height: 41px;
	margin: 0 auto;
	background: #2E2E2E url(images/img3.gif)
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 32px;
	padding: 9px 20px 0 20px;
	text-decoration: none;
	color: #CCCCCC;
	font-weight: bold;
}

#menu a:hover, #menu .active a {
	background: url(images/img4.gif);
	color: #FFFFFF;
}


/* Left Menu */

#leftmenu {
}

#leftmenu ul {
	margin: 0;
	padding: 0;
}

#leftmenu li {
	display: inline;
}

#leftmenu a {
	display: block;
	width: 150px;
	height: 20px;
	margin: 0px;
	padding: 5px;
	text-decoration: none;
	color: #CCCCCC;
	background-color: #2E2E2E;
	border: 1px solid #000000;
}

#leftmenu a:hover, #leftmenu .active a {
	color: #FFFFFF;
	background-color: #444444;
}


/* Content */

#content {
	width: 700px;
	margin: 0 auto;
	background: url(images/img5.gif);
	position: relative;
	min-height: 100%;
}

#colLeft {
	float: left;
	width: 160px;
	padding: 20px 10px 10px 10px;
}

#colMain {
	float: left;
	width: 360px;
	padding: 20px 10px 10px 10px;
}

#colRight {
	float: left;
	width: 120px;
	padding: 20px 10px 10px 10px;
}


/* Footer */

#footer {
	width: 700px;
	margin: 0 auto;
	padding: 10px 0;
	background: url(images/img6.gif) repeat-x;
	font-size: smaller;
	position: relative;
}

#footer * {
	color: #000000;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 06.02.2009, 00:33
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

#footer muß außerhalb (unter) #MainTable stehen.
#footer wird dann mit einem negativen margin nach oben gezogen.
Code:
#footer {
margin: -30em auto 0 auto;
height: 30em;
...
}
Die Höhe von #footer muß bekannt sein / bestimmt werden.
Mit Zitat antworten
  #9 (permalink)  
Alt 06.02.2009, 00:54
Benutzerbild von bodoalbstadt
Rookie
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2008
Beiträge: 75
bodoalbstadt befindet sich auf einem aufstrebenden Ast
Standard

Also #footer hab ich jetzt aus dem #MainTable raus genommen.
Aber das mit den 30em find ich einen verdammt großen Wert.
Meinst Du nicht evtl. 30px?
Es wird zwar der Footer nach unten gezogen, aber der Hintergrund vom Content bleibt wo er ist, der geht nicht mit.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.02.2009, 01:11
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von bodoalbstadt Beitrag anzeigen
Also #footer hab ich jetzt aus dem #MainTable raus genommen.
Aber das mit den 30em find ich einen verdammt großen Wert.
Meinst Du nicht evtl. 30px?
Es wird zwar der Footer nach unten gezogen, aber der Hintergrund vom Content bleibt wo er ist, der geht nicht mit.
Er sollte nach oben wandern.
Die Höhe kenne ich ja nicht. Das hängt vom Inhalt ab.
Riesige #footer sollen ja gerade angesagt sein .

Du solltest einen Link zu deiner Seite posten.
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
Textfarbe wird nicht übernommen Fnorfel CSS 10 02.07.2011 13:32
Fehler im Submenü, Klasse wird nicht übernommen hausl78 CSS 9 11.02.2010 14:39
background vom body wird vom Div übernommen azur CSS 5 05.06.2007 18:04
A:hover Angaben werden nicht übernommen trashhero CSS 6 02.07.2006 22:45
Schrift wird nicht aus css übernommen trinix CSS 3 03.01.2005 22:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:41 Uhr.