Autor |
Nachricht |
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mi 25.04.2007 12:18
Titel [css] footer nicht unten?(noch nicht gelöst!) |
|
|
hallo,
ich habe mir nen layout in css erstellt.
besteht aus:
banner|content|footer|footer2
alles ist nochmals in einem div (mainhg)ummantelt.
nun habe ich das layout so eingerichtet das die seite immer über die volle höhe des bildschirmes angezeigt werden.
nun kann es aber doch mal vorkommen das der content nicht so gefüllt ist.
aber wenn dies eintritt schweben die footer auch in der luft rum.
die sollten aber unten bleiben.
hat da jemand ne lösung?
hier der code:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css" title="currentStyle">
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background-color:#008AD5;
background-image:url(../bilder/hg3.jpg);
background-repeat:repeat-y;
}
#mainhg {
position:absolute;
left:200px;
width:600px;
min-height:100%;
height:auto !important;
height:100%;
background:#000;
}
#banner {
position: absolute;
width: 600px;
top: 20px;
height: 200px;
background-image: url(../bilder/banner.jpg);
background-repeat: no-repeat;
}
#content {
margin-top:220px;
width: 590px;
float:left;
height: auto;
background-color:#FFFFFF;
padding: 5px;
}
#foot2 {
width: 600px;
background: #CCC;
clear: both;
bottom: 40 !important;
bottom: 39px;
height: 20px;
background-color:#FFFFFF;
background-image:url(../bilder/foot2.jpg);
background-repeat:no-repeat;
}
#foot {
width: 600px;
background: #CCC;
clear: both;
bottom: 0 !important;
bottom: -1px;
height: 40px;
background-image:url(../bilder/foot.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="mainhg">
<div id="banner">
<div id="left">menue</div>
</div>
<div id="content">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
</div>
<div id="right"></div>
<br style="clear:both; " />
<div id="foot2"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html> |
Zuletzt bearbeitet von Sunlifestyle am Mi 02.05.2007 21:19, insgesamt 1-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mi 25.04.2007 12:41
Titel
|
|
|
ja ich habe ja auch schonmal einen mit deiner hilfe fertig gebaut...aber irgendwie geht das nicht....verdammt
|
|
|
|
|
WinstonSmith
Dabei seit: 06.01.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.04.2007 16:46
Titel
|
|
|
So funktioniert 's:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css" title="currentStyle">
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background-color:#008AD5;
background-image:url(../bilder/hg3.jpg);
background-repeat:repeat-y;
}
#mainhg {
position:absolute;
left:200px;
width:600px;
min-height:100%;
height:auto !important;
height:100%;
background:#000;
}
#banner {
position: absolute;
width: 600px;
top: 20px;
height: 200px;
background-image: url(../bilder/banner.jpg);
background-repeat: no-repeat;
}
#content {
margin-top:220px;
width: 590px;
float:left;
height: auto;
background-color:#FFFFFF;
padding: 5px;
overflow:hidden;
}
#foot2 {
width: 600px;
background: #CCC;
clear: both;
bottom: 40 !important;
bottom: 39px;
height: 20px;
background-color:#FFFFFF;
background-image:url(../bilder/foot2.jpg);
background-repeat:no-repeat;
}
#foot {
width: 600px;
background: #CCC;
clear: both;
position:absolute;
bottom: 0 !important;
bottom: -1px;
height: 40px;
background-image:url(../bilder/foot.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="mainhg">
<div id="banner"><div id="left">menue</div></div>
<div id="content">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p> </p>
</div>
<div id="right"></div>
<div id="foot2"></div>
<div id="foot"></div>
</div>
</body>
</html> |
Hinweise:
1.) Du hattest das <div id="mainhg"> mehrmals zwischendurch wieder geschlossen, daher war z.Bsp. <div id="foot"></div> gar kein teil mehr davon, was aber für den Aufbau entscheidend ist.
2.) In der CSS-Definition musste ein "position:absolute;" bei #foot ergänzt werden, damit er das mit dem bottom: 0 !important; überhaupt versteht
3.) Achte darauf, dass die Containerreihenfolge immer passt, sonst passieren solche Dinge wie in 1. und du blickst garnicht mehr durch
gruß,
winston
|
|
|
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Di 01.05.2007 16:36
Titel
|
|
|
danke!es lag doch an der positionierung;).....
|
|
|
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mi 02.05.2007 21:17
Titel
|
|
|
nach dem ich gestern noch dachte es klappt alles...will es doch nicht so recht...zu früh gefreut...verzweiflung liegt nahe...
zwar ist das problem weg das der footer nicht mehr mitwandert...nun ist es aber wieder so das der footer den text überdeckt...
ich poste hier jetzt nochmal einen denn code..er ist so geschrieben das ihr einfach nur copy and paste machen könnt und um dann zu schauen was los ist:)
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" title="currentStyle">
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background-color:#000000;
}
#mainhg {
position:absolute;
margin-left:50px;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
background:#fff;
}
#overhead {
position: absolute;
width: 900px;
top: 0px;
left: 0px;
height: 20px;
background-color:#FFFFFF;
}
#banner {
position: absolute;
width: 900px;
top: 20px;
left:0px;
height: 200px;
background-color:#00CCFF;
}
#head {
position: absolute;
width: 900px;
top: 220px;
height: 20px;
left:0px;
background-color:#FF9900;
}
#content {
margin-top:250px;
width: 570px;
float:left;
height: auto;
background-color:#FFFFFF;
padding-left: 10px;
margin-bottom: 1.5em;
}
#foot2 {
position:absolute;
width: 900px;
background: #CCC;
clear: both;
bottom: 200 !important;
bottom: 199px;
height: 20px;
background-color:#00FFFF;
}
#foot {
position:absolute;
width: 900px;
background: #CCC;
clear: both;
bottom: 0px!important;
bottom: -1px;
height: 200px;
background-color:#FF9999;
}
#right {
float: left;
margin-top:250px;
width: 155px;
border-left:1px;
border-left-color:#CCCCCC;
border-left-style:dotted;
padding-left:4px;
background-color:#9999CC;
}
#left {
float:left;
margin-top:250px;
width: 155px;
background-color:#CCCCFF;
}
</style>
</head>
<body>
<div id="mainhg">
<div id="overhead">
<div align="right">der kopf der gang
</div>
</div>
<div id="banner">der banner</div>
<div id="head">
<div align="right">zwischenspalte</div>
</div>
<div id="left">
linke spalte
</div>
<div id="content">
<p>der content</p>
<br />
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>--------------</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>--------------</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>--------------</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>--------------</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>--------------</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
<div id="right">
<p>2haha</p>
<p>so das ist die rechte spalte</p>
</div>
<br style="clear:both; " />
<div id="foot2">
<div align="center">footer2</div>
</div>
<div id="foot">footer1
</div>
</div>
<body>
</body>
</html>
|
ich hoffe ihr wisst rat..mein latain is am ende....
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.05.2007 22:02
Titel
|
|
|
Ich verstehe nicht warum du nicht einfach das Beispiel nutzt welches ich
irgendwo gepostet habe?- war doch für dich oder?
|
|
|
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mi 02.05.2007 23:02
Titel
|
|
|
ja...habe ich ja auch..aber irgendwie klappt es nun doch nicht..obwohl ich nix an den positionen geändert habe..ich werde mich nochmal ran setzen und es probieren...
|
|
|
|
|
|
|
|
Ähnliche Themen |
(gelöst) Joomla! ? Schriftproblem (sehr merkwürdig) (gelöst)
(gelöst)einzelne Verlinkung zu Audio-Player ?(gelöst)
Footer Probleme
[css] - Footer Problem
Problem mit Footer
Festen Footer erzeugen
|
|