CSS: "DIV"-Footer am Ende platzieren!?

c70 · 6. Mai 2009 um 13:24

Hallo Leute,
bin neu hier und auch ein Neuling was CSS anbelangt.
Ich habe schon einige Threads durchgelesen, und erhofft vielleicht doch auf die Antwort zu stoßen - aber leider - nix gefunden.
Deshalb wäre ich euch sehr dankbar, wenn IHR mir vielleicht weiterhelfen könnt.

Ich habe 7 DIV-Boxen (“postion: absolute”) und würde gerne einen Footer an die 3 waagrechten (“Inhalt”, “Center”, “Banner”) unten anschließen - funktioniert aber nicht, da mit “bottom” der Footer nur an den Browser-“bottom” gesetzt wird. Da diese 3 waagrechten Boxen jedoch unterschiedliche Längen haben, soll der Footer an die “längste Länge” unten angefügt werde.

Hier der Code, der aber nicht funktioniert:

#header01 { position:absolute; top:10px; left:10px; z-index:1; }
#mainnavi01 { position:absolute; top:60px; left:1px; width: 100%; z-index:2; }
#pfadbox01 { position:absolute; top:83px; left:1px; width:100%; z-index:2; }
#inhalt01 { position:absolute; top:105px; left:5px; width:190px; }
#center01 { position:absolute; top:105px; left:200px; width:610px; }
#banner01 { position:absolute; top:132px; left:820px; width:190px; }
#footer01 { position: absolute; bottom:0px; width:100%; }

Hier könnt ihr kurz mal reinschauen, wie es aussieht … habe die Boxen kurz mal eingefärbt:
camper70.bplaced.net/test01/grund01.html

Wie kann ich den Footer ganz unten platzieren - an die 3 waagrechten Div-Boxen angehängt?

Vielen Dank für eure Hilfe.
Gruß,
c70

hoffmann · 6. Mai 2009 um 15:41

Mit absoluter Positionierung wirst du das eher nicht erreichen.
Da müßtest du allenfalls die Höhe der oberen Element so
festlegen, daß die immer exakt bis runter zum ‘footer’ reichen
und gegebenenfalls eben Rollbalken erhalten, wenn der Platz
nicht ausreicht.

Ansonsten wirst du die Struktur der Datei etwas modifizieren
müssen, dann kann es mit speziellen Werten der Eigenschaft
display klappen (diejenigen zur Simulation einer Tabelle),
allerdings auch nur bei technisch aktuellen browsern.

c70 · 6. Mai 2009 um 15:59

Danke für die Antwort.
Aber gerade der mittlere Textteil wäre immer unterschiedlich lang … einmal kann er kürzer wie der Werbebanner rechts sein, ein anderernmal aber auch schon mal ein paar Textseiten lang.
Mit “display” kann ich auch nichts anfangen, wenn es nur für modernere Browser geeignet ist.

Auf “Tabellen” soll man ja verzichten - damit wär’s ja kein Problem - aber ohne Tabellen natürlich ein wenig schwierig.

Oder gibt’s noch eine andere Lösung?

Gruß,
c70

hoffmann · 6. Mai 2009 um 16:29

Bei solchen Sachen muß man immer improvisieren.
Um sowas zu erreichen, muß man eben einen Bezug zwischen
den Elementen herstellen.
Weg eins sind da eben die Werte für display mit
Tabelleneigenschaften.

Eine andere Möglichkeit kann sich ergeben, wenn mehrere
Elemente ein gemeinsames Elternelement haben. Bringt aber
auch eher nichts, wenn insbesondere die Höhe des
Elternelementes implizit durch die Höhe der Kinder festgelegt ist.

position absolute/fixed heben aber nun gerade jeglichen Bezug
zu anderen Elementen auf. Die Kandidaten gehören als eher nicht
zu den Verdächtigen, mit denen man sowas einrichten könnte.

Wenn du dich damit begnügst, den ‘footer’ in das längste
Element unpositioniert unten einzutragen, ist der 'footer’
zumindest unten, wenn auch erstmal nicht die gesamte Breite
einnehmend. Ist nicht immer dasselbe Element garantiert das
längste, so entfällt die Möglichkeit ohnehin. Reicht der Platz
für ‘footer’ aber aus, so mag das vielleicht nicht einmal stören.

Steht das hingegen fest, kann man versuchen, den ‘footer’ noch
mit relativer Positionierung zu verschieben oder ihn in ein
relativ positioniertes Element reinzubasteln und dann relativ zu
diesem absolut zu positionieren. Dann sollte man auch die
Breite neu festlegen können - wobei es nicht unbedingt einfach
sein muß, dann noch die Breite des gesamten Anzeigebereiches
zu benennen.

Ist wiederum ‘center’ das längste Element, so kann man
versuchen, dies unpositioniert zu lassen und darin ‘footer’
unterzubringen. Während man anderen Kindelementen von
’center’ ein entsprechendes margin/padding verpaßt, damit
’inhalt’ und ‘banner’ absolut positioniert werden können, ohne
etwas zu verdecken, könnte man dies beim ‘footer’ lassen, um
auf die gesamte Breite zu kommen.

Also alles etwas Bastelei, unter bestimmten Umständen geht es,
unter anderem wird es recht knifflig. Pauschallösungen sind da
deswegen erstmal nicht vorgesehen.

c70 · 6. Mai 2009 um 17:10

Tja - dann werde ich wohl ein wenig rumbasteln müssen.

Was hältst du davon:
–> de.selfhtml.org/css/layouts/anze … ndfuss.htm
(Quelltext unter: de.selfhtml.org/css/layouts/mehr … #kopf_fuss )
Da müsste ich dementsprechend nur noch das CSS anpassen.

Aber dazu eine Frage:
Kann man statt „h1“ z.B. auch eine eigene DIV-Box verwenden bzw. 2 DIV-Boxen untereinander bevor die 3 waagrechten Spalten kommen???

Gruß,
c70

michi7x7 · 6. Mai 2009 um 17:18

Aber natürlich

hoffmann · 6. Mai 2009 um 17:34

Das verwendet float und nimmt nicht mit position: absolute
Elemente aus dem Textfluß, die behalten also einen gewissen
Bezug zueinander, wie bereits erwähnt.
Sofern, wie in dem Beispiel die Inhalte entsprechend im
(X)HTML-Quelltext passend angeordnet sind und im Inhalt kein
(weiterer) float beendet wird, kann man das so machen.
Allerdings ist bei dir die Reihenfolge im Quelltext anders, da
muß man dann gucken, ob man das damit so hinbekommt, was
oft das Problem bei float ist, daß sich die Reihenfolge im
(X)HTML-Quelltext nach dem CSS richtet, was ja eigentlich nicht
Sinn der Trennung von Inhalt und Layout ist.
Wenn die Inhalte allerdings zufällig passend angeordnet sind, kann
float recht hilfreich sein.
Allerdings haben deine Elemente feste Breiten in px, was an sich
schon schlecht ist, hier aber die Anordnung mit float erleichtert,
auch ohne die Reihenfolge zu ändern.

c70 · 6. Mai 2009 um 17:36

OK. DANKE!!!
Ich glaube, jetzt komme ich langsam da hin, dass es klappt

Nächstes Problem bei diesem Layout:
Wenn man im Browser mit den Tastenkombinationen “Strg”+"+" und “Strg”+"-" die Schriftgrößen verändert, verändern sich die Boxen genauso in der Größe!!!

Kann man die Boxen per CSS so fixieren, dass sich NUR die Schriftgröße verändert, aber die Größe der Boxen IMMER gleich bleibt?

Gruß,
c70

hoffmann · 6. Mai 2009 um 17:40

Da müßtest du eine andere Einheit bei width wählen, die eben
nicht von der Schriftgröße abhängt. Allerdings ist es diese
Abhängigkeit und Flexibilität gerade, die das Layout von
selfhtml so viel besser macht als deines ;o)

Wenn hingegen ‘banner’ nur Pixelgraphik enthält, kannst du da
natürlich auch eine Breite sinnvoll in px angeben. Wenn auch
Text drinsteht, ist em schon eine sehr gute Wahl für die Einheit
der Breite.

c70 · 8. Mai 2009 um 15:19

… nun habe ich eine (relativ gute) Lösung gefunden.
Aber dennoch ein Problem mit der Darstellung im IE

Aber zuerst zu meiner bisherigen Lösung:
Problem 1: Footer ganz unten.
–> Zwei Boxen: Inhaltsverzeichnis „float:left“, rechts davon eine div-Box (margin-left 13em; width 49em) … dann erst den Footer mit „clear:both“ in eine neue Zeile darunter - nun bleibt er, wo er sein sollte.

In diese obere div-Box dann den „mittleren“ Textteil gesetzt … und mit „float:right“ den Werbebanner nach rechts außen.
Sieht exakt wie das 3er-Layout aus (mit Footer darunter) - nur dass es eigentlich 4 div statt 3 sind.
ALLE Angaben in em, damit sie beim Vergrößen auch exakt mitvergrößern.

Problem 2: Wenn die Ansicht im Browser vergrößert wurde (bis 130%), dann gab’s in der Navigationsleiste einen Zeilenumbruch (der mit „nowrap“ nicht funktionierte), und die letzten Buttons haben das ganze Layout durcheinander geworfen.
Lange habe ich an den „position“-Definitionen rumgetüftelt - nichts hat funktioniert … aber dann - ganz einfach: „min-width: 60em“ (wie die 2 Grundboxen darunter).
Und nun funktioniert’s. Das Layout ist ROBUST und kann bis zum Anschlag vergrößert werden … zumindest bei Mozilla/Firefox und Opera.

Denn nun kommt das 3. PROBELM … BITTE HILFE !!!
Im MSIE sieht es bei Normalgröße gut aus - aber sobald ich unter Ansicht auf „Größer“ klicke, bleibt die Navi-Leiste zwar korrekt, aber das Inhaltsverzeichnis verschiebt den Mittelteil an seine rechte untere Ecke, obwohl genug Platz da wäre - und wirklich alle Angaben in „em“ sind.

Hat jemand einen Rat???
Vielen Dank.
Gruß

hoffmann · 8. Mai 2009 um 15:41

Wenn du den doctype so gelassen hast, wie im obigen Beispiel,
dann arbeitet der MSIE im Quirkmodus, da kennt der sowas wie
min-width nicht.

Wenn du die Breite von ‘inhalt’ in em angibst, kann ich auch nicht
nachvollziehen, warum eine Vergrößerung der Schrift dort
zusätzliche Zeilenumbrüche verursachen sollte.
Zumal es Leute gibt, da paßt gar nicht mehr als 49em in den
Anzeigebereich, da rutschen die floats sowieso nach unten, was
ja auch die Idee von floats ist.
Allerdings sollte man em-Boxen immer etwas großzügiger
bemessen, also eventuell 1em mehr als es beim eigenen
browser notwendig ist.

Bei dem mittleren Teil solltest du keine Breite explizit
angeben, die ergibt sich, wenn du links und rechts ein float
mit angegebener Breite hast, von alleine und die
Wahrscheinlichkeit reduziert sich auch, daß Elemente nach
unten verschoben werden, was immer passiert, wenn für das
Element neben dem float nicht mehr genug Platz ist, was man
besser beurteilen kann, wenn man um das Element testweise
einen Rand zieht. Jedenfalls sollte man da generell nicht zu
knapp planen, sonst führen kleinere Mängel oder Unterschiede
bei verschiedenen browsern zu solch dramatischen Effekten.

c70 · 9. Mai 2009 um 16:57

[quote]Bei dem mittleren Teil solltest du keine Breite explizit
angeben, die ergibt sich, wenn du links und rechts ein float
mit angegebener Breite hast, von alleine … [/quote]
Mittlerweile sind es ja keine 3 Teile mehr, sodass links und rechts ein float ist, da ich eh 2 verschiedene Layouts brauche (1x 2 Boxen, 1x 3 Boxen).
Das heißt, dass es 2 Grundteile sind:

links Inhaltsverzeichnis
rechts Textteil
Und in diesen rechten Textteil setze ich bei Bedarf einfach noch einmal 2 Boxen nebeneinander.

[quote]Wenn du die Breite von ‘inhalt’ in em angibst, kann ich auch nicht
nachvollziehen, warum eine Vergrößerung der Schrift dort
zusätzliche Zeilenumbrüche verursachen sollte. Zumal es Leute gibt, da paßt gar nicht mehr als 49em in den Anzeigebereich, da rutschen die floats sowieso nach unten, was
ja auch die Idee von floats ist.[/quote]
Das war wohl der Knackpunkt … denn in der “Normalansicht” waren die Elemente auch dort, wo sie hingehören (sogar im MSIE). Erst bei der Schriftvergrößerung (z.B. Mozilla: “Strg”+"+") wurden die Boxen verschoben.
Mit der min-width von 49em bleiben sie nun dort, wo sie hingehören (sogar bei der größtmöglichen Vergrößerung).

[quote]Wenn du den doctype so gelassen hast, wie im obigen Beispiel,
dann arbeitet der MSIE im Quirkmodus, da kennt der sowas wie
min-width nicht.[/quote]
Welchen doctype bräuchte ich denn?
Vielen Dank.

chrisb · 9. Mai 2009 um 18:37

[quote=“c70”][quote]Wenn du den doctype so gelassen hast, wie im obigen Beispiel,
dann arbeitet der MSIE im Quirkmodus, da kennt der sowas wie
min-width nicht.[/quote]
Welchen doctype bräuchte ich denn?[/quote]
Die Antwort auf diese Frage ergibt sich automatisch, wenn du dich zum Stichwort Quirks Mode informierst.

c70 · 10. Mai 2009 um 09:25

OK - nun habe ich mich mal über den Quirks Mode und die doctypes ordentlich informiert.
Aber die Antwort ergibt sich dennoch nicht automatisch.

Deshalb meine Nachfrage:
Ich sollte also von „HTML 4.01 Transitional ohne URL“ auf einen mit URL wechseln.
Da ich noch am Anfang stehe … WAS ist besser?
Transitional oder strict?
HTML oder XHTML? Geht beides in einem Projekt: verschiedene html- und xhtml-Seiten?

Vielen Dank,
Gruß

KaWie · 10. Mai 2009 um 10:03

am besten du schreibst alles xhtml 1.0 strict, das bringts nur nicht wenn du die regeln von xhtml [inhaltslose tags zB.
und tags kleinschreiben etc…] nicht beachtest.

// achja und natürlich kannst du in einem Brojekt auch unterschiedliche doctypes benutzen. die Frage ist die nach dem sinn.

hoffmann · 10. Mai 2009 um 10:53

XHTML1.1 oder noch besser XHTML+RDFa ist zum Lernen
prinzipiell einfacher, weil da weniger Altlasten drin sind, die
man sowieso nicht mehr braucht, dafür haben die Versionen
klarere Strukturen, letzteres Profil ist sehr hilfreich, wenn man
auf Semantik und Computerverstehbarkeit von Inhalten Wert legt.

XHTML hat aber auch einen Haken - der MSIE versteht es immer
noch nicht (richtig), den muß man zwangsläufig so oder so
austricksen, wird meist so gemacht, daß der XHTML als
(fehlerhaftes) HTML interpretiert, indem man das als text/html
statt als application/xhtml+xml ausliefert. Wenn man das bei
anderen browsern ebenfalls macht, interpretieren die XHTML
übrigens auch als (fehlerhaftes) HTML und nicht als XHTML.

Dann ist es natürlich auch so, daß allgemein XML-Formate keine
Strukturfehler erlauben. Bei HTML ist das nicht festgelegt und
aus alter Tradition raten die browser da einfach, was gemeint
sein könnte. Das kann man nun als Vorteil oder auch als
Nachteil von HTML werten, zumal die browser ja auch nicht
unbedingt besonders schlau sind im Raten ;o)

Was die Bedeutung des doctype für den MSIE anbelangt - so muß
da vor allem ein ihm bekannter stehen, wenn der nicht im
Quirksmodus arbeiten soll - ich meine, da tut es sogar jener, der
für ‘HTML5’ vorgeschlagen ist, den es nur zu diesem Zwecke
überhaupt gibt. Ansonsten kümmert sich faktisch kein browser
um den Inhalt der DTD (Ausnahme eventuell der MSIE, wenn
man dem XML mit einer DTD schickt, was dann auch Probleme
verursacht, wenn der die falsch interpretiert), das machen
ansonsten nur die Validatoren.
Die Angabe der DTD ist ansonsten mehr eine Gedächtnisstütze
für den Autor, welche Sprachversion er verwenden will, was bei
jedem Dokument eine andere sein kann, je nachdem, was man
konkret schreiben will.

aboleo · 11. Mai 2009 um 17:29

Lehrbeispiel, dass ich in der VHS verwende:
Hab ich erst kuerzlich eingefuehrt gehabt, da es noch ‚relativ‘ neu ist.
Es bassiert z.T. auf den push-Footer von rayn fait und bedient sich des easy clearing Verfahren. Die gesammte Beschreibung dieser StickyFooter 2009 Methode findet man auf http://www.cssstickyfooter.com/ bitte auch die known issues am unteren Ende beachten.

Dein aktuelles Laoyut, ist so nicht brauchbar, da du den natuerlichen Fluss aushebelst, was fuer einen Anfaenger anfaenglich wesentlich leichter sein mag und auch durchaus nachvollziehbar ist aber mit der Zeit, duerfte es fuer einen Anfaenger erheblich leichter sein, die Elemente nur teils aus dem Elementenfluss zu nehmen ( float ). Hier gibt es zwar dann den ein oder anderen Bug zu fixen aber dafuer hat man weniger aerger mit dem Flussproblemen bzw. Verstaendnissprobleme.

So ich hoffe, dass das hilft um sich einen Grob-Ueberblick zu verschaffen.
Ich hab es auf dein angefuehrtes Beispiel abgeaendert - zum Glueck hattest du keine Layouttabellen

[code]

  <title>site</title>

  <style type="text/css" media="screen, projection">
  
     /* reset 
     ----------------------------------------------------------------------------------------*/
     * { margin: 0; padding: 0; }
     html, body, #wrap {height: 100%;}
     body > #page-wrap {height: auto; min-height: 100%;}
     
     a img { border: 0; }
      
     ol, ul { list-style: none; }
     q:before, q:after, blockquote:before, blockquote:after { content: ""; }
     
     /* rebuild
     ----------------------------------------------------------------------------------------*/
     body { 
         font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
         background: url() repeat; 
         color: #333;     
         text-align:center; 
     }
     
     #page-wrap {
        text-align: left; /* to avoid the 0 auto bug in IE6< */
        
     }
     
     #main { padding-bottom: 75px;}
     
     #header        { background: #efefef; }
        #header h1  { text-align: center;  }
        
           #header #topnavi li { float: left; } 
        #pfadbox01  { background: #99ff66; }
     
     #sidebar-left  { background: #ffff66; width: 8%; padding: 1%; float: left; }
     
     #content       { background: #ccccff; padding: 1%; width: 48%; float: left;  }
     
     #sidebar-right { background: #ffcc99; padding: 1%; width: 16%; float: left; }
     
     #footer {
        position: relative;
        background-color: #808080;
         margin-top: -75px; /* negative value of footer height */
         height: 75px;
         clear: both;
         padding: 1%;
         
     }
     #footer li { float: left; } 
     /* general classes
     ----------------------------------------------------------------------------------------*/
     .hide, .print-logo, .close-button{ display:none; }
     .clear { clear:both; } 
     .right { float: right; } 
     .left  { float: left; }
     
     /* CLEAR FIX*/
     .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>

  <div id="header">
     <h1>Header</h1>
     <ul id="topnavi" class="clearfix">
        <li><a href="/" title="menuitem1">menuitem 1</a></li>
        <li><a href="/" title="menuitem2">menuitem 2</a></li>
        <li><a href="/" title="menuitem3">menuitem 3</a></li>
        <li><a href="/" title="menuitem4">menuitem 4</a></li>

     </ul>
     <!-- endTopNavi -->

     <div id="pfadbox01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PFADBOX</div>
  </div>
  <!-- endHeaderSection -->
  
  <div id="main" class="clearfix">
  
     <div id="sidebar-left">
        <h3>sidebar</h3>
        <ul id="sidebar-left-navigation">
           <li><a href="/" title="sidebar-anchor 01">sidebar-anchor 01</a></li>
           <li><a href="/" title="sidebar-anchor 02">sidebar-anchor 02</a></li>
           <li><a href="/" title="sidebar-anchor 03">sidebar-anchor 03</a></li>
           <li><a href="/" title="sidebar-anchor 04">sidebar-anchor 04</a></li>
           <li><a href="/" title="sidebar-anchor 05">sidebar-anchor 05</a></li>
           <li><a href="/" title="sidebar-anchor 06">sidebar-anchor 06</a></li>
           <li><a href="/" title="sidebar-anchor 07">sidebar-anchor 07</a></li>
           <li><a href="/" title="sidebar-anchor 08">sidebar-anchor 08</a></li>
           <li><a href="/" title="sidebar-anchor 09">sidebar-anchor 09</a></li>
           <li><a href="/" title="sidebar-anchor 10">sidebar-anchor 10</a></li>
           <li><a href="/" title="sidebar-anchor 11">sidebar-anchor 11</a></li>
           <li><a href="/" title="sidebar-anchor 12">sidebar-anchor 12</a></li>
           <li><a href="/" title="sidebar-anchor 13">sidebar-anchor 13</a></li>
  
        </ul>
        <!-- endSidebar-leftNavi -->
  
     </div>
     <!-- endSidebar -->
     
     <div id="content">
       <h3>main area</h3>
       <p>CENTER</p>
       <p>Text Mitte</p>
       <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; <p>&nbsp; 
  <p>&nbsp;</p>
  
     </div>
     <!-- endcontent -->
     
     <div id="sidebar-right">
        <h3>add area</h3>
        <ul id="sidebar-right-navigation">
           <li><a href="/" title="sidebar-anchor 01">sidebar-anchor 01</li>
           <li><a href="/" title="sidebar-anchor 02">sidebar-anchor 02</li>
           <li><a href="/" title="sidebar-anchor 03">sidebar-anchor 03</li>
           <li><a href="/" title="sidebar-anchor 04">sidebar-anchor 04</li>
           <li><a href="/" title="sidebar-anchor 05">sidebar-anchor 05</li>
           <li><a href="/" title="sidebar-anchor 06">sidebar-anchor 06</li>
           <li><a href="/" title="sidebar-anchor 07">sidebar-anchor 07</li>
           <li><a href="/" title="sidebar-anchor 08">sidebar-anchor 08</li>
           <li><a href="/" title="sidebar-anchor 09">sidebar-anchor 09</li>
           <li><a href="/" title="sidebar-anchor 10">sidebar-anchor 10</li>
           <li><a href="/" title="sidebar-anchor 11">sidebar-anchor 11</li>
           <li><a href="/" title="sidebar-anchor 12">sidebar-anchor 12</li>
           <li><a href="/" title="sidebar-anchor 13">sidebar-anchor 13</li>
  
        </ul>
        <!-- endSidebar-leftNavi -->
        
     </div>
     <!-- endsidebar-right -->
  
  </div>
  <!-- endMain -->
  
  <div id="footer">
     <p>Footer</p>
     <ul id="footer-navi">
        <li><a href="/" title="footer-link 1">footer link 1</a></li>
        <li><a href="/" title="footer-link 2">footer link 2</a></li>
        <li><a href="/" title="footer-link 3">footer link 3</a></li>
     </ul>
     <!-- endFooternavi -->

  </div>
  <!-- endFooter  -->

[/code]