Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Mi 16.04.2008 15:11
Titel [css] - Footer Problem |
  |
|
Hallo Leute,
ich weiß das Problem gab es hier schon zu hauf und ich habe auch viele Themen dazu gelesen und Lösungsvorschläge auf mein Problem versucht anzuwenden, nur spinnt der FF wieder einmal.
Mein Layout schaut so aus, das ich einen Head,Content und zum schluß einen Footer habe.
Der Footer soll immer am unteren Browserrand ausgerichtet sein wenn nicht gescrollt werden muß.
Bei viel Inhalt soll der Footer aber nicht am Browserrand stehen bleiben sondern nach unten laufen soweit wie inhalt da ist.
nur ist es so das bei viel inhalt mein Footer im FF einfach konsequent stehen bleibt und der inhalt darunter durch läuft.
Hier mal das CSS-Script
| Code: |
body {
background:#04638A url(../images/bg-verlauf-body.jpg);
background-repeat:repeat-x;
}
html, body {
margin:0;
padding:0;
height:100%;
}
.hidden {
display:none;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin:auto;
position: relative;
width:902px;
background:url(../images/bg-container.png);
background-repeat:repeat-y;
}
#clear1 {
height:10px;
width:879px;
margin:auto;
background:red;
}
#main-nav {
height:45px;
width:879px;
margin:auto;
background:blue;
}
#logo-header {
height:85px;
width:879px;
background:red;
margin:auto;
}
#image-header {
height:171px;
width:879px;
margin:auto;
background:blue;
}
#sec-nav {
height:26px;
width:879px;
margin:auto;
background:red;
}
#content {
width:635px;
float:right;
background:green;
}
#news {
margin-right:635px;
background:black;
}
#footer {
background:#ccc;
clear:both;
height:50px;
position:absolute;
bottom:0;
width:902px;
}
|
und noch der HTML Teil
| Code: |
<body>
<div id="container">
<div id="clear1"></div>
<div id="main-nav"></div>
<div id="logo-header"></div>
<div id="image-header"></div>
<div id="sec-nav"></div>
<div id="content">
<br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br />
</div>
<div id="news">.</div>
<div id="footer"></div>
</div>
</body>
|
bitte verweißt mich nicht auf "Suche nach "Footer" in der Boardsuche"
Dort habe ich mich schon durchgewühlt.
// EDIT: ich habe mal versucht im #footer 'position:absolute;' mit 'position:relative;' zu tauschen.
Der Effekt ist der das bei viel Inhalt der Footer im IE und FF jeweils am Seitenende,also nachdem der Inhalt im #content zu ende ist plaziert wird.Nur bei wenig inhalt habe ich jetzt das problem das der #footer direkt unter dem #content sitzt und nicht am unteren Browserrand.
Was kann ich hier machen?
Zuletzt bearbeitet von Kash am Mi 16.04.2008 15:36, insgesamt 2-mal bearbeitet
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 16.04.2008 16:00
Titel
|
|
|
Also ich konnte das Problem jetzt lösen.
Doch Fragen tauchen trotzdem auf.
und zwar habe ich aus dem #content das 'float:right;' enfernt und bei #footer wieder 'position:absolute;' gesetzt.
Dannn funktioniert alles wie gehabt.
Nur warum macht das 'float:right;' diese Probleme?
Wobei ich auch davon ausgegangen bin das im #footer 'clear:both;' dieses Problem behebt.
Scheint aber nicht der fall zu sein.
CSS:
| Code: |
* {
margin: 0;
padding: 0;
}
body {
background:#04638A url(../images/bg-verlauf-body.jpg);
background-repeat:repeat-x;
}
html, body {
margin:0;
padding:0;
height:100%;
}
.hidden {
display:none;
}
div#container {
position: relative;
margin:auto;
width:902px;
min-height: 100%;
height: auto !important;
height: 100%;
background:url(../images/bg-container.png);
background-repeat:repeat-y;
}
div#clear1 {
height:10px;
width:879px;
margin:auto;
background:red;
}
div#main-nav {
height:45px;
width:879px;
margin:auto;
background:blue;
}
div#logo-header {
height:85px;
width:879px;
background:red;
margin:auto;
}
div#image-header {
height:171px;
width:879px;
margin:auto;
background:blue;
}
div#sec-nav {
height:26px;
width:879px;
margin:auto;
background:red;
}
div#content {
width:879px;
margin:auto;
background:green;
}
div#footer {
position:absolute;
bottom: 0;
clear: both;
width:902px;
height:50px;
background:#ccc;
}
|
jetzt erstreckt sich also der #content auch über die vorgeschriebene Breite.
D.h. ich muß im #content jetzt noch mal 2 divs für meinen inhaltsbereich und newsbereich anlegen.
diese jedoch auch wieder mit FLOAT.
tritt dann dieses problem wieder auf?Und wenn ja, wie kann man das umgehen?
Danke.
//EDIT:
so ich habe eine lösung gefunden die auch der CSS Validator von W3C als fehlerfrei ansieht.
Funktioniert in IE und FF.
ich habe dem content 2 Kindelemente hinzugefügt und nach dem #content ein #clear2 untergebracht der 'float:right;' leert.
CSS:
| Code: |
...
div#content #inhalt {
float:right;
width:622px;
background:#535353;
}
div#content #news {
margin-right:624px;
background:#ffcccc;
}
div#clear2 {
clear:right;
}
div#footer {
position:absolute;
bottom: 0;
width:902px;
height:50px;
background:#ccc;
}
|
in HTML:
| Code: |
<div id="content">
<div id="inhalt">
inhalt<br />
inhalt<br />
inhalt<br />
inhalt<br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</div>
<div id="news">
news<br />
news<br />
</div>
</div>
<div id="clear2"></div>
<div id="footer"></div>
|
Zuletzt bearbeitet von Kash am Mi 16.04.2008 16:34, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
