zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Footer immer am unteren Bildschirmrand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.01.2008, 21:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 98
BoFiaZ befindet sich auf einem aufstrebenden Ast
Standard Footer immer am unteren Bildschirmrand

Hi,

ich möchte eine Website haben, die eine Höhe von 100% hat und ein Footer, der immer am unteren Bildschirmrand zu finden ist.

Ich habe mir bereits folgendes Beispiel angesehen Home und die Hilfe hier im Forum. Problem ist nun, dass bei meinem Script und im IE 7 der Footer unten nicht vollständig die angegebene Hintergrundfarbe hat, sondern man zum Teil den darunterliegenden Hintergrund sieht. Das sieht dann optisch so aus, als sei der Footer nicht ganz unten am Bildschirmran.

Ich bekomme es einfach nicht hin, vielleicht kann ja mal jemand danach sehen und mich auf meinen Fehler aufmerksam machen.

Hier mein Script:
Code:
<html>
<head>
<title>Test123</title>
<style type="text/css" media="all">
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	font-size: 75.00%; 
	font-family: Arial;
	color: #000000;
}

a {
	text-decoration: none;
	color: #000000;
}

#page {
	margin: 0 auto;
	
	position: relative;
	min-height: 100%;
	
	height: 100%;	

	background: url(images/bg1.gif) repeat-y top left #ffffff;
}

#header {
	height: 139px;
	padding-top: 5px;
	background-image: url("images/logo_bg.gif");
	background-repeat: repeat-x;
	background-position: 0px 25px;
	background-color: #ffffff;
}

#header a:focus,
#header a:hover,
#header a:active { text-decoration: underline; }

.abstand {
	padding-left: 11px;
}

#sprachen {
	width: 120px;
	float: right;
	padding-top: 2px;
}

#logo {
	clear: both;
	margin-top: 17px;
	background-image: url("images/subbanner.jpg");
	background-repeat: repeat-x;
	width: auto;
	height: 99px;
}

#left {
	width: 210px;
	float: left;
}

#content {
	float: left;
	background-color: #ffffff;
}

/* NAVIGATION 'B */
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 210px; /* Width of Menu Items */
}
	
#nav ul li {
	position: relative;
	background-image: url("images/bg_nav2.gif");
	background-repeat: repeat-x;
	height: 29px;
}
	
#nav li ul {
	position: absolute;
	left: 210px; /* Set 1px less than menu width */
	top: 0;
	display: none;
}

/* Styles for Menu Items */
#nav ul li a {
	display: block;
	color: #3C306B;		
	padding: 6px 0px 0px 11px;
	font-weight: bold;
	height: 23px;
}

#nav ul li a { color: #3C306B; }
#nav ul li a:focus,
#nav ul li a:hover,
#nav ul li a:active { background-color:#3C306B; color: #fff; }

#nav ul li ul li a {
	display: block;
	color: #3C306B;
	background: #ECF0FB; /* IE6 Bug */
	padding: 6px 0px 0px 11px;
	border-bottom: 1px solid #ffffff;
	font-weight: normal;
	height: 22px;
}

#nav ul li ul li a { color: #000000; }
#nav ul li ul li a:focus,
#nav ul li ul li a:hover,
#nav ul li ul li a:active { background-color: #C9D4F2; color: #3C306B; }

#nav li:hover ul, #nav li.over ul { display: block; } /* The magic */
/* NAVIGATION 'E */

#footer {
	position: relative;
	margin: -4.0em auto 0 auto;

	border-top: 13px solid #3C306B;
	padding-top: 5px; 		
	height: 30px;
	background-color: #ffffff;
}

/* A CSS hack that only applies to IE -- specifies a different height for the footer */

* html #footer
{
	margin-top: -4.0em;
}

#top {
	width: 160px;
	float: right;
}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* End hide from IE-mac */

</style>
</head>

<body>

	<div id="page">
		<div id="header">
		<div id="sprachen">
			<a href="#"><img src="images/fl_1_an.gif" width="20" height="12" border="0"></a>
			<a href="#"><img src="images/fl_2_an.gif" width="20" height="12" border="0"></a>
			<a href="#"><img src="images/fl_3_an.gif" width="20" height="12" border="0"></a>
			<a href="#"><img src="images/fl_4_an.gif" width="20" height="12" border="0"></a>
			<a href="#"><img src="images/fl_5_an.gif" width="20" height="12" border="0"></a>
		</div>
		<a href="#" class="abstand">Startseite</a> |
		<a href="#">Kontakt</a> |
		<a href="#">Stellenangebote</a> |
		<a href="#">Datenschutz</a> |
		<a href="#">Sitemap</a>

		<div id="logo">
			<a href="#"><img src="images/xxx_logo_sub.gif" width="211" height="99" border="0"></a>
		</div>			
		</div>
		<div id="main" class="clearfix">
			<div id="left">
				<div id="nav">
					<ul>
						<li><a href="index.php">Wir über uns</a>		
							<ul>
								<li><a href="xxx_auf_einen_blick.php">BRÜCK auf einen Blick</a></li>
								<li><a href="zahlen_und_fakten.php">Zahlen & Fakten</a></li>
								<li><a href="xxx_weltweit.php">BRÜCK weltweit</a></li>
								<li><a href="unsere_kunden.php">Unsere Kunden</a></li>
								<li><a href="firmenaktivitaeten.php">Firmenaktivitäten</a></li>		
							</ul>
						</li>
						<li><a href="#">Unsere Stärken</a></li>
						<li><a href="#">Maschinenpark</a></li>
						<li><a href="#">Produktprogramm</a></li>
						<li><a href="#">Zertifikate & Zulassungen</a></li>		
						<li><a href="#">Anwendungen</a></li>
						<li><a href="#">Service</a></li>
						<li><a href="#">Kontakt</a></li>
						<li><a href="#">Stellenangebote</a></li>
						<li><a href="#">Datenschutz</a></li>
					</ul>
				</div>				
			</div>
			<div id="content">
				
			</div>
		</div>
	</div>
	<div id="footer">
		<div id="top">
			<a href="#">Zum Seitenanfang springen</a>
		</div>
		<a href="#" class="abstand">Startseite</a> |
		<a href="#">Kontakt</a> |
		<a href="#">Stellenangebote</a> |
		<a href="#">Datenschutz</a> |
		<a href="#">Sitemap</a>		
	</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.01.2008, 21:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Kein Doctype > IE im Quirksmode > Boxmodell-Bug. Siehe FAQ.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.01.2008, 21:26
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Der #footer wächst anscheinend nicht mit.
Gib dem #top ein "clear:right".

Edit:@heiko Gut, dass auch, aber mitwachsen sollte er doch eigentlich auch nicht, oder?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #4 (permalink)  
Alt 04.01.2008, 21:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Er muß nicht zwangsläufig mitwachsen (obwohl das natürlich besser wäre), aber ein weiterer Punkt ist

Code:
#footer {
	position: relative;
	margin: -4.0em auto 0 auto;
	border-top: 13px solid #3C306B;
	padding-top: 5px; 		
	height: 30px;
	background-color: #ffffff;
}
Diese Mischung aus px und em ergibt keinen Sinn - aber auch nicht im Firefox. Ich hatte mich nach schnellem Überfliegen nur auf das IE-spezifische Problem bezogen (d.h. Boxmodell), denn er schrieb ja nur von der Fehldarstellung in diesem.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.01.2008, 23:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 98
BoFiaZ befindet sich auf einem aufstrebenden Ast
Standard

Welcher Doctype wäre denn der richtige? Habe jetzt entsprechend meiner HTML Datei den Doctype:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Jetzt ist zwar die komplette Footerfläche in der richtigen Farbe, aber der Footer sitzt viel weiter oben.

Habe auch die em zu px gewandelt. Na ja, irgendwie weiß ich jetzt nicht so recht was die richtige Darstellung ist und was die falsche, auf jedenfall kann die Höhe des Footers, die momentan angezeigt wird, nicht wirklich mit den a. g. Pixel im CSS übereinstimmen.

Code:
#footer {
	position: relative;
	margin: -5px auto 0 auto;

	border-top: 13px solid #3C306B;
	padding-top: 5px; 		
	height: 30px;
	background-color: #ffffff;
}

/* A CSS hack that only applies to IE -- specifies a different height for the footer */

* html #footer
{
	margin-top: -5px;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 05.01.2008, 00:13
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 BoFiaZ Beitrag anzeigen
Welcher Doctype wäre denn der richtige?
Da gehen die Meinungen bestimmt auseinander.
Ich verwende eigentlich immer:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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">
In die Meta-Angaben schreibe ich:
Code:
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Ob html 4.01 oder xhtml ist sicher Geschmacksache.
Nur strict sollte es sein.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.01.2008, 00:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

4.01 Strict ist genauso okay.

In jedem Falle sollte man nie folgendes verwenden (Stichwort "Quirksmode"):

Code:
<?xml version="1.0" encoding="utf-8"?>
@BoFiaZ: Überlege bitte mal genau, was Du da machst:

Code:
#footer {
	position: relative;
	margin: -5px auto 0 auto;
	border-top: 13px solid #3C306B;
	padding-top: 5px; 		
	height: 30px;
	background-color: #ffffff;
}

/* A CSS hack that only applies to IE -- specifies a different height for the footer */

* html #footer
{
	margin-top: -5px;
}

Geändert von heiko_rs (05.01.2008 um 00:25 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 05.01.2008, 00:31
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Welcher Doctype wäre denn der richtige?
Nun, das hängt als erstes davon ab, welche HTML-Features du nutzen willst. Wenn du zahlreiche Elemente und Attribute zur Darstellung verwendest, musst du einen Transitional-Doctype nehmen, in der Strict-Variante ist das meiste unnütze zeug wie target und center verboten. Ob dein HTML diesen Regeln entspricht kannst du mit einem Validator, z.B. beim W3C oder Validome, überprüfen.

Die andere Sache ist, die, dass die Doctype-Angaben auf den Darstellungsmodus des browsers auswirkung haben, siehe dazu: Der »DOCTYPE-Switch« und seine Auswirkungen. Quirksmode und Almost Standards Mode solltest du vermeiden, der Full Standards Mode ist das erstrebenswerte Ziel. Vor allem wird dieser Modus der einzig zukunftsfähige bleiben.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #9 (permalink)  
Alt 05.01.2008, 00:53
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 heiko_rs Beitrag anzeigen
In jedem Falle sollte man nie folgendes verwenden (Stichwort "Quirksmode"):
Code:
<?xml version="1.0" encoding="utf-8"?>
Kann ich das ohne Bedenken weglassen?

Geändert von plastiko (05.01.2008 um 01:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.01.2008, 00:59
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Kann ich das ohne Bedenken weglassen?
Nur wenn du UTF-8 oder UTF-16 als Kodierung verwendest. Das ist XML-Standard und zur HTML-Kompatibilität nötig. Sieh den untersten Link in Meiner Signatur, es ist gleich der erste Punkt!
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
Footer am unteren Rand N.A.R. CSS 4 11.06.2011 01:21
Footer am unteren Seitenrand dows CSS 17 11.10.2010 17:03
Footer container werden untereinander dargestellt... Ntracks CSS 10 07.08.2010 18:24
Footer am unteren Seitenrand positionieren judicious CSS 15 23.06.2005 17:45
Footer Problem blub19 CSS 6 25.01.2005 11:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:58 Uhr.