zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.10.2010, 15:14
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 30.09.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Frage Footer am unteren Seitenrand bei absoluten Content-DIV

Hallo,
ich sitze gerade an dieser Seite

Die Navigation, der Content und der 'Inner'-Footer (Impressum) sind in einem mittig ausgerichteten, absolut positionierten Wrapper eingeschlossen. (siehe unten)

Nun ist mein Problem, dass der dunkelgraue Footer wenn ich ihn in den Wrapper packe nicht 100% breit ist. Wenn ich ihn außerhalb des Wrappers definiere, hängt er knapp unter dem Header.

Wie bekomme ich es hin, dass der Footer immer am unteren Seitenrand ist?

Anhang:

HTML:
HTML-Code:
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="canonical" href="">
        <meta name="description" content="" />
        <title>Title</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="header"><a href="./" title="Zurück zur Startseite" id="logo"></a></div>
        <div id="wrapper">
            <ul id="navi">
                <li><a id="akt" href="./" title="Zurück zur Startseite">Startseite</a></li>
                <li><a href="test.html" title="">Item</a></li>
                <li><a href="./" title="">Item</a></li>
                <li><a href="./" title="">Item</a></li>
                <li style="width:163px;"><a style="width:163px;" href="./" title="">Item</a></li>
                <li style="width:100px;"><a style="width:100px;" href="./" title="">Item</a></li>
            </ul> 
            <div id="content"> 
            	<div id="content_text">
                	Content
            </div>
            <div id="upperfooter">
                <ul id="footerNavi">
                    <li><a href="impressum.html" rel="nofollow" title="Impressum">Impressum</a></li>
                </ul> 
            	<div id="upperfooter_text">
                	Text
			</div>  <div id="footer"></div>
        </div>
    </body>
</html>
CSS:
Code:
@charset "utf-8";
/*   Tag   */
*
{
	margin:0;
	padding:0;
}

body
{
	height: 208px;
	background: url(../image/header.png) repeat-x left 0%;	
}

body,td,th
{
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*   IDs   */

#wrapper
{
	width: 808px;
	left: 50%;
	margin-left: -404px;	
	width: 600px;
	position: absolute;
	top: 90px;
}

#header
{
	height: 208px;
	width: 99%;
	background: url(../image/logo.png) 5px 5px no-repeat;
	text-align: right;
	font-size: 28px;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	padding-right: 1%;
}

#logo
{
	display: block;
	height: 200px;
	width: 390px;
	float: left;
}
#content
{
	width: 808px;
	background-image: url(../image/content.png);
	background-position: 0px 81px;
	background-repeat: repeat;
	background-attachment: scroll;
	position: relative;
}

#content_text
{
	width: 792px;
	padding: 10px 5px 10px 5px;
}

#navi
{
	width: 808px;
	height: 81px;
	/*float: left;*/
	position: relative;
	background: url(../image/navi.png) no-repeat;
}

#navi ul,
#navi li
{
	margin: 0;
	padding: 0;
	display: inline;
	font-size: 18px;
	list-style-type: none;
	float: left;
}

#navi a:link,
#navi a:visited
{
	float: left;
	width: 133px;
	text-align: center;
	font-size: 18px;
	line-height: 75px;
	text-decoration: none;
}

#navi #akt
{
	background:url(../image/active.png) center 20px no-repeat;
}

#navi a:hover,
#navi a:hover#akt
{
	color: #000;
	height: 81px;
	background: url(../image/hover.png) center 20px no-repeat;
}

#upperfooter
{
	height: 46px;
	width: 808px;
	background: url(../image/upperfooter.png) no-repeat;
	position: relative;
	z-index: 2;
	text-align: right;
}

#footer
{
	height: 73px;
	background: url(../image/footer.png) repeat-x;
	z-index: 1;
	position: absolute;
	width: inherit;
	bottom: -25px;
	margin-left: -404px;	
}

#upperfooter_text
{
	width: 780px;
	padding: 5px 20px 5px 5px;
}

#footerNavi
{
	width: 400px;
	height: 50px;
	float: left;
	position: relative;
}

#footerNavi ul,
#footerNavi li
{
	margin: 0;
	padding: 0;
	display: inline;
	font-size: 18px;
	list-style-type: none;
	float: left;
}

#footerNavi a:link,
#footerNavi a:visited
{
	float: left;
	width: 100px;
	text-align: center;
	font-size: 15px;
	line-height: 40px;
	text-decoration: none;
}

#footerNavi #akt
{
	background:url(../image/active.png) center 3px no-repeat;
}

#footerNavi a:hover,
#footerNavi a:hover#akt
{
	color: #000;
	height: 50px;
	background: url(../image/hover.png) center 3px no-repeat;
}

Geändert von dows (08.10.2010 um 15:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2010, 15:08
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 30.09.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

Niemand ne Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.10.2010, 15:14
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

das problem, ohne bilder sieht man nichts.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.10.2010, 15:39
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von dows Beitrag anzeigen
Niemand ne Idee?
verzichte auf position:absolute; wenn du es nicht unbedingt benötigst.
#wrapper braucht sicher kein pos. absol. um horizontal zentriert zu sein, dafür reicht neben einer Breite margin:0 auto;.

Um den footer immer unten zu haben schau dir Foot Sticker Alt an.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2010, 21:44
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 30.09.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

Leider müss ich position:absolut verwenden da der Content sowohl Header als Footer überlappt (siehe Bild [@zeji: welches auch im ersten Beitrag ist ])
Die Navigation, der Footer und der Content sind alle im wrapper und der muss daher absolut sein.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.10.2010, 07:37
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von dows Beitrag anzeigen
Leider müss ich position:absolut verwenden da der Content sowohl Header als Footer überlappt (siehe Bild [@zeji: welches auch im ersten Beitrag ist ])
Die Navigation, der Footer und der Content sind alle im wrapper und der muss daher absolut sein.
sorry, aber das ist leider falsch.
Du kannst auch mit position:relative und ggf. z-index die Stapelreihenfolge fast immer hinreichend ändern.

Vielleicht hilft dir das ein bißchen beim Verstehen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2010, 08:28
Benutzerbild von XHTMLvalid
IE OMG WTF
XHTMLforum-Mitglied
 
Registriert seit: 03.09.2010
Ort: Palma de Mallorca
Beiträge: 161
XHTMLvalid wird schon bald berühmt werden
Standard

Ich verstehe die ganzen negativen margins nicht.

Code:
#wrapper
{
	width: 808px;
	left: 50%;
	margin-left: -404px;	
	width: 600px;
	position: absolute;
	top: 90px;
}
Was bezwecken die???
Zwei mal width angegeben ... da hebt 600px die 808px auf
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com
if (browser == IE) { sucks(big); } else { nice(site); }
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2010, 11:00
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 30.09.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

@XHTMLvalid:
ooups die doppelten breiten sind natürlich falsch.
Die negative margin zentriert den wrapper.

@hubspe:
habe es mal mit position:relative umgesetzt.
wenn ich dann im wrapper den relativ positioniere wird wird dieser unter dem Header angezeigt.
Also verschiebe ich ihn mit top:-120px nach oben, was zur Folge hat, dass der Footer 120 Pixel über den unteren Browser-Rand schwebt.
Und eine breite von 100% konnte ich damit leider auch noch nicht realisieren.

Ich habe mal einen Testcase unter http://bit.ly/aGvayq eingerichtet. Wer also ein wenig mit Firebug spielen will...viel Spaß
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2010, 11:33
Benutzerbild von XHTMLvalid
IE OMG WTF
XHTMLforum-Mitglied
 
Registriert seit: 03.09.2010
Ort: Palma de Mallorca
Beiträge: 161
XHTMLvalid wird schon bald berühmt werden
Standard

Soll es in etwa so aussehen?
Angehängte Grafiken
Dateityp: jpg tfh-wildau_de_sspyra_testcase_index_php.jpg (190,2 KB, 8x aufgerufen)
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com
if (browser == IE) { sucks(big); } else { nice(site); }
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2010, 11:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du machst es dir unnötig schwer.
Arbeite bitte die von Hubspe bereits genannte Technik FooterStickAlt (die heißt nicht Foot Sticker) durch. Lass zunächst den Header weg, wenn du damit nicht klarkommst. Bei dieser Technik liegt der Footer außerhalb des Bereiches, der 100%-Mindesthöhe hat. Damit löst sich dein Footer-Breiten-Problem in Luft auf.
Positionierungen lass bitte erstmal komplett weg.

Für die Zentrierung deines Inhaltsbereiches verwende auf keinen Fall diese negative Schieberei. Die Inhalte verschwinden bei schmalem Viewport unerreichbar nach links. Zentriere mit margin:0 auto.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
footer, position absolute, width: 100%

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 immer am unteren Bildschirmrand BoFiaZ CSS 22 29.05.2009 11:45
Footer am unteren Seitenrand positionieren judicious CSS 15 23.06.2005 17:45
print.css logo am unteren seitenrand Heinz.Iseli CSS 6 12.04.2005 11:19
Footer Problem blub19 CSS 6 25.01.2005 11:46


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