mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:42 Benutzername: Passwort: Auto-Login

Thema: [css] footer nicht unten?(noch nicht gelöst!) vom 25.04.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css] footer nicht unten?(noch nicht gelöst!)
Seite: 1, 2  Weiter
Autor Nachricht
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.04.2007 12:18
Titel

[css] footer nicht unten?(noch nicht gelöst!)

Antworten mit Zitat Zum Seitenanfang

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>&nbsp; </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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.04.2007 12:30
Titel

Antworten mit Zitat Zum Seitenanfang

Benutz einfach mal die Suche, da findest du sicherlich ein paar Beispiele,
wie:

http://www.mediengestalter.info/forum/4/css-firefox-70503-1.html


Zuletzt bearbeitet von m am Mi 25.04.2007 12:33, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.04.2007 12:41
Titel

Antworten mit Zitat Zum Seitenanfang

ja ich habe ja auch schonmal einen mit deiner hilfe fertig gebaut...aber irgendwie geht das nicht....verdammt
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
WinstonSmith

Dabei seit: 06.01.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 26.04.2007 16:46
Titel

Antworten mit Zitat Zum Seitenanfang

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>&nbsp; </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>&nbsp; </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>&nbsp; </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>&nbsp; </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>&nbsp; </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 *zwinker*

gruß,
winston
  View user's profile Private Nachricht senden
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Di 01.05.2007 16:36
Titel

Antworten mit Zitat Zum Seitenanfang

danke!es lag doch an der positionierung;)..... * Ich bin unwürdig * * Applaus, Applaus *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 02.05.2007 21:17
Titel

Antworten mit Zitat Zum Seitenanfang

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.... * grmbl *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 02.05.2007 22:02
Titel

Antworten mit Zitat Zum Seitenanfang

Ich verstehe nicht warum du nicht einfach das Beispiel nutzt welches ich
irgendwo gepostet habe?- war doch für dich oder?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 02.05.2007 23:02
Titel

Antworten mit Zitat Zum Seitenanfang

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...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.