Fusszeile einfuegen

joernschulz · #1 (**permalink**) 22.12.2011, 12:24

Hallo zusammen,

ich habe versucht, in dieses dreispaltige Layout einen Footer zu intergrieren, der sich immer am unteren Rand der Seite befindet:

Code:

HTML:

<!DOCTYPE HTML>
<html>
<head>
 <title> Fotografie </title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="../Homepage/layout_mit_rahmen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="links">
  <div id="links_innen">
    </div>
</div>

<div id="mitte">
</div>
 
<div id="rechts">
  <div id="rechts_innen"></div>
 </div>
 
 <div id="fusszeile">
 </div>
 
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

  body {
	margin:0;
	padding:0;
    min-width:760px;
  }  

  p {
	padding:20px;
  }

  #links , #rechts {
    width:50%;
  }

  #links {
	float:left;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_01.png);
	background-color: #0F0;
	background-repeat: repeat-x;
  }

  #rechts {
	float:right;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_03.png);
	background-color: #00F;
	background-repeat: repeat-x;
  }

  #links_innen {
	margin-right:490px;
  }

  #recht_innen {
	margin-left:490px;
  }  

  #mitte {
	position:relative;
	margin-left:-490px;
	margin-right:-490px;
	width:980px;
	float:left;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_02.png);
	background-repeat: no-repeat;
	background-color: #FF0;
  }
#fusszeile {
	clear:both;
	position:fixed;
	bottom:0px;
	margin-top:0px;
	text-align:left;
	padding:30px;
	background-image: url(Webseite_Layout_mitte_ein_block_04.png);
	background-repeat: repeat-x;
	background-color: #F00;
	padding-left: 20px;
}


}


  /* Für IE 6 */
 * html #links, * html #rechts {
   width:49.9%;
   float:left; 
 }

  /* Für IE 7 */
 *+ html #links, *+ html #rechts {
    width:49.9%;
    float:left; 
 }

 </style>

Leider erscheint der Footer (Class fusszeile) nur am linken unteren Eck der Seite als Quadrat und der Inhalt des divs 'Mitte' wird auch nicht unter dem Footer geloescht.

Kann mir bitte jemand einen Tip geben, wie ich das umsetzen muss ?

Vielen Dank und Gruss
Joern

Manfred62 · #2 (**permalink**) 22.12.2011, 12:33

Mit Link zum Problem gehts einfacher;
geraten --> #fusszeile braucht eine Breite

joernschulz · #3 (**permalink**) 22.12.2011, 15:08

Treffer ! Das war's. Vielen Dank !

joernschulz · #4 (**permalink**) 22.12.2011, 15:34

Ich habe jetzt eine so grosse Breite fuer die Fusszeile definiert, dass sie breit genug fuer alle Viewport-Groessen ist. Jetzt muss ich innerhalb des Footers Text so plazieren, dass er links- und rechtsbuendig zu dem drueber befindlichen DIV 'Mitte' steht. Die beiden divs 'Rechts' und 'Links sollen nur zum Fuellen dienen, wenn das Browserfenster breiter als der Mitte-DIV ist.

Wie stelle ich das am besten an ?

Vielen Dank und Gruss
Joern

Manfred62 · #5 (**permalink**) 22.12.2011, 18:59

Zitat:

Zitat von joernschulz

Ich habe jetzt eine so grosse Breite fuer die Fusszeile definiert, dass sie breit genug fuer alle Viewport-Groessen ist. Jetzt muss ich innerhalb des Footers Text so plazieren, dass er links- und rechtsbuendig zu dem drueber befindlichen DIV 'Mitte' steht. Die beiden divs 'Rechts' und 'Links sollen nur zum Fuellen dienen, wenn das Browserfenster breiter als der Mitte-DIV ist.

Wie stelle ich das am besten an ?

Vielen Dank und Gruss
Joern

Endlich einen Testcase online stellen?

Glaskugel meint:
fusszeile --> 100%
fusszeile_innen --> width und margin auto

Thielo · #6 (**permalink**) 22.12.2011, 19:53

Zitat:

Zitat von Manfred62

Endlich einen Testcase online stellen?

Aber Manfred, kannst du nicht auch alles vor deinem inneren Auge sehen? *scnr*

joernschulz · #7 (**permalink**) 23.12.2011, 11:36

Vielen Dank fuer die Antwort von Manfred62. Wenngleich ich noch nicht ganz verstanden habe. Ich setze also fusszeile auf 100 %. Und dann erzeuge ich fusszeile_innen mit width und margin auto ?
Ich bitte um etwas Nachsicht, dass ich den Hinweis nicht sofort verstehe.

Ich habe eine Testseite auf

Testseite

online gestellt.

Vielen Dank und Gruss
Joern

Manfred62 · #8 (**permalink**) 23.12.2011, 17:24

In die Fusszeile einen Container rein packen.
Dieser bekommt die gewünschte Breite (980px?),
und wird mit margin 0 auto zentriert.

K.Roland · #9 (**permalink**) 23.12.2011, 19:04

Zitat:

Zitat von joernschulz

Ich habe eine Testseite auf
Testseite
online gestellt.

Und in deiner CSS-Datei -- bei #fusszeile noch etwas verändern so:

Code:

}   
#fusszeile {
  padding: 30px 0;
  text-align: left;
  width: 100%;
}

______________
Gruß,
Roland

jnv · #10 (**permalink**) 23.12.2011, 19:28

Und wenn du schon dabei bist, kannst du auch

Code:

<div id="links_innen"

richtig schließen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fusszeile spezial!	kasi	CSS	8	25.06.2009 14:05
Fußzeile	CL90	CSS	5	10.04.2009 18:03
IE: div-Box rutscht in die Fußzeile	mux	CSS	12	06.11.2008 20:59
fusszeile im html file ohne frame	berndw	CSS	6	10.11.2006 12:56
Positionierung einer nicht scrollbaren Fusszeile	hyperterminal	CSS	2	14.09.2005 21:41