✔ Einfaches DIV Problem

[chriss_2oo4]

Hi,

ich habe ein - wahrscheinlich - sehr einfaches Problem mit CSS.

Ich habe folgenden Code, der mir ein einfaches drei Zeilen, zwei Spalten Design erstellt.

Nur habe ich das Problem, dass die Fusszeile nicht nach dem gesammten Inhalts-Div angezeigt wird,
sondern nach dem angezeigten Inhalt.

Das heißt, wenn der Inhalts-Div nicht vollständig gefüllt ist, wird die Fusszeile auf dem Inhalts-Div
angezeigt.

Wie kann ich garantieren, dass die Fusszeile immer nach dem Inhalts-Div angezeigt wird?

div#wrapper {
			text-align: left; 
			margin: 0 auto; padding: 0; 
			width: 1050px;
			
			min-height: 95%;
			height: auto;
			height: 95%;
		}
		
		div#header {
			height: 60px;
			padding: 10px;
		}
		
		div#navigation {
			float: left; 
			margin: 0; padding: 5;
			width: 250px;
		}

		div#footer {
			margin: 0; padding: 0.1em;
			height: 20px;
			clear: both;
		}

<div id="wrapper">
			
			<div id="header">
			   <h1>Header<h1>
			</div>
			
			<div id="navigation">
                                                                    <p>Navigation</p>
			</div>
			
			<div id="content">
			   <p>Inhalt</p>
			</div>
			
			<div id="footer">
			   <p>Fusszeile</p>
			</div>
		</div>

Viele Grüße
Chrisss

 

[Maik]

Hi,

Wie kann ich garantieren, dass die Fusszeile immer nach dem Inhalts-Div angezeigt wird?

Das wird sie doch.

Nur in dem einen oder anderen Browser auf den ersten Blick scheinbar außerhalb von #wrapper, weil ohne dessen Hintergrund und/oder Rahmen.

Der Grund hierfür ist das eingebundene <p>-Element, das als Block-Element in diesen Browsern einen voreingestellten Außenabstand zum Erzeugen des Absatzes im Textfluß besitzt, der mittels margin:0 zurückgesetzt gehört.

Um solchen Fällen vorzubeugen, empfiehlt sich zu Beginn des Stylesheets diesen Deklarationsblock zu notieren, mit dem der Universalselektor bei allen im HTML-Dokument enthaltenden Elementen, die diese Eigenschaften besitzen, die Initialwerte auf null setzt:

* {
margin:0;
padding:0;
}

Wo im Textfluß des Dokuments eine der zurückgesetzten Eigenschaften erwünscht, gefordert ist, wird das Element entsprechend spezifisch (nach)formatiert.

Mir sind da noch zwei Unstimmigkeiten in deinem Stylesheet aufgefallen.

• Mindesthöhen-Einrichtung
  
  Hier fehlt die !important-Regel, mit der die standardkonformen Browser angewiesen werden, die nachfolgende height-Deklaration zu ignorieren, die dem IE6 gewidmet ist, der min-height nicht kennt, aber entgegen den anderen Browsern die height-Eigenschaft als "Mindesthöhe" für das Element behandelt, und es in seinen Grenzen mitwachsen lässt, wenn der Inhaltsumfang die vorgegebene Höhe überschreitet.
  

div#wrapper {
			text-align: left; 
			margin: 0 auto; padding: 0; 
			width: 1050px;
			
			min-height: 95%;
			height: auto !important;
			height: 95%;
		}

• Fehlende Maßeinheit
  
  Ein numerischer Eigenschaftswert, der größer / kleiner als null ist, und keine Angabe zu seiner Maßeinheit besitzt, wird von den Browsern im standardkonformen Modus nicht interpretiert.
  

div#navigation {
			float: left; 
			margin: 0; padding: 5px?, em?, %? ...;
			width: 250px;
		}

mfg Maik

 

[chriss_2oo4]

Hey Maik,

vielen Dank für deine Antwort.

Den Standard Selektor * verwende ich schon in meinem Projekt.

--------------------------
| Header               |
--------------------------
|       |                 |
| Nav  |   Inhalt      |
|       |                 |
|       |                 |
--------------------------
| Footer               |
--------------------------

So sollte das Ganze aussehen.


Allerdings sieht das bei mir etwa so aus:

--------------------------
| Header                 |
--------------------------
|       |                 |
| Nav |   Inhalt      |
--------------------------
| Footer                 |
--------------------------
|       |                 |
|       |                 |
---------------------------

Die Fußzeile wird direkt nach dem Inhalt angezeigt, und nicht nach dem Inhalts-Div, weil der Inhalt nicht "groß" genug ist.

Beste Grüße!

 

[Maik]

Dann kann ich dir leider auch nicht sagen, was da bei dir schief läuft, denn die clear:both-Deklaration für #footer zum Abbruch des rechtsseitigen Umfluß von #navigation (float:left-Deklaration) funktioniert bei mir browserübergreifend einwandfrei, und bezieht sich auf die Boxengrenzen der beiden vorangegangenen Divs, und nicht auf deren (zu geringen) Inhalt.

Wie dein vorgestellter Code von allen aktuellen gängigen Browsern interpretiert wird, häng ich dir hier mit einem repräsentativen Schnappschuß an.

Zur Verdeutlichung hab ich für #wrapper einen grauen Hintergrund und schwarzen Rahmen, für #content einen gelben, und für #footer einen roten Hintergrund festgelegt, damit ihre Boxengrenzen und Abstände im Textfluß zueinander sichtbar werden.



Wie du siehst, rutscht die Fußzeile überhaupt nicht nach oben zum Inhalt, sondern der Inhalt des <p>-Elements befindet sich außerhalb des Anzeigebereichs von #footer und #wrapper. Einzig der IE6 richtet den Inhalt innerhalb der Grenzen von #footer aus.

Mit der von mir empfohlenen Regel rückt der Inhalt der Fußzeile in den vorgesehenen Anzeigebereich, und alle Seitenbereiche im Textfluß näher zusammen, da ja auch in ihnen jeweils ein Block-Element (<h1> u. <p>) existiert, das, auf dem Bild deutlich erkennbar, einen Abstand von Navigation und Inhalt zum Footer produziert.

Ansonsten solltest du es mal mit ein paar entsprechenden Regeln für #content versuchen, sofern du diese in deinem Projekt nicht auch schon verwendest, und uns hier blos ebenso vorenthalten hast.

Wenn die Zeilenanzahl des Inhalts in #content, die des Blocks #navigation überschreitet, rutschen diese nämlich nach links außen, und werden unterhalb des linken Blocks fortgesetzt, anstatt ihn rechts zu umfließen.

mfg Maik

 

[chriss_2oo4]

Hey Maik,

nochmals danke für Deine Antwort.

Wenn die Zeilenanzahl des Inhalts in #content, die des Blocks #navigation überschreitet, rutschen diese nämlich nach links außen, und werden unterhalb des linken Blocks fortgesetzt, anstatt ihn rechts zu umfließen.

Da muss ich die vollkommen recht geben , aber wie kann ich das verhindern? Mit float: right im content kappt's auch net.

Ich poste einfach mal meinen ganzen Code, ist nicht allzu lang, aber wahrscheinlich auch nicht allzu richtig.

<html>
	<head>
		<title><? include 'config.inc.php'; echo $text_titel; ?></title>
		<style type="text/css">
		* { 
			padding: 0; 
			margin: 0; 
		}
		
		body {
			color: black; background-color: #eee;
			font-size: 0.8em;
			font-family: Verdana,Helvetica,Arial,Sans-Serif;
			margin: 0; padding: 0; padding-top: 2em;
			text-align: center;
		}

		h1 {
			color: #643232;
			font-size: 2.5em;
			
		}
		
		h2 {
			padding-left: 1em;
			color: #bb9988;
			font-size: 1.9em;
		}
		
		h3 {
			padding-left: 1em;
			color: #bb9988;
			font-size: 1.3em;
		}
		
		a:link {
			color: #643232; 
			font-weight: bold;
			text-decoration: none;
		}

		a:visited {
			color: #643232; 
			font-weight: bold;
			text-decoration: none;
		}

		a:active {
			color: black; 
			font-weight: bold;
			text-decoration: none;
		}

		a:hover {
			color: black; 
			font-weight: bold;
			text-decoration: underline;
		}

		a#directory {
			margin: 0.5em 0.3em; /**/
			padding: 0;
		}

		 
		div#wrapper {
			text-align: left; 
			margin: 0 auto; padding: 0; 
			width: 1050px;
			min-height: 85%;
			height: auto !important;
			height: 85%;
			background: #ddd url(img/bg_wrapper.jpg) repeat-y;
			border: 2px ridge silver;
		}
		
		div#header {
			height: 60px;
			padding: 10px;
			background: #fed url(img/banner.jpg) no-repeat;
			border-bottom: 1px solid black;
		}
		
		div#navigation {
			float: left; 
			margin: 0; padding: 0;
			width: <? include 'config.inc.php'; echo $width_navigation; ?>;
		}
		
		div#tree {
			margin: 0; padding: 0;
		}
		
		div#search {
			height: 30 px;
			border-bottom: 1px dashed black;
			margin: 0; padding: 0;
		}
		
		div#content {
			margin: 0; padding: 0;
			
			float: right;
			
			min-height: 90%;
			height: auto !important;
			height: 90%;
		}

		div#footer {
			margin: 0; padding: 0.1em;
			height: 20px;
			clear: both;
			background: #fed url(img/footer.jpg) repeat-x;
			font-size: 0.85em;
			text-align: center;
			border-top: 1px solid black;
		}
		
		table {
			margin: 0;
			padding: 0;
			font-size: 1em;
			border: 1px dashed black;
		}
		
		p#infotext {
			margin: 0;
			padding: 2em;
			font-size: 1em;
			font-weight: bold;
			color: #643232;
		}
	
		</style>
	</head>

	<body>
	
		<div id="wrapper">
			
			<div id="header">
				<h1><? include 'config.inc.php'; echo $text_header; ?></h1>
			</div>
			
			<div id="navigation">
				
				<br />
				<h3>Suchfunktion</h3> 
				<br />
				
				<div id="search" align="center">
					<form method="POST" action="<? $_SERVER["PHP_SELF"] ?>">
						<input type="text" name="term" value="<? if(isset($_POST['term'])) echo $_POST['term'];?>" />
						<input type="submit" value="Suchen" />
					</form>
					<br />
				</div>
				
				<br />
				<h3>Verzeichnisstruktur</h3>
				<div> 
					<? include 'navigation.php'; ?> 
				</div>
			</div>
			
			<div id="content">
			
				<? include 'fileinfo.php'; ?>
			</div>
			
			<div id="footer">
				<p><? include 'config.inc.php'; echo $text_footer; ?></p>
			</div>
		
		</div>
	
	</body>
</html>

Ich habe genau das vib dir beschriebene Problem.
Was mach ich denn falsch?


Beste Grüße
Chriss

 

[Maik]

Da muss ich die vollkommen recht geben , aber wie kann ich das verhindern? Mit float: right im content kappt's auch net.

Bei mir bricht da in #content nichts nach links unter den linken Spaltenblock, wenn darin mehr Zeilen an Inhalt stecken, als im linken Block #navigation.

Wie auch, wenn der Block nun mit float:right formatiert ist?

Ansonsten würde ich diesem Block noch eine Breite mit auf dem Weg geben, die sich so um die 780 - 800px drehen dürfte.

Ich habe genau das vib dir beschriebene Problem.
Was mach ich denn falsch?

vib = von?

Welches Problem meinst du?

Jenes bzgl. der Fußzeile taucht hier überhaupt nicht mehr auf.

mfg Maik