|
||||
Companion Columns Technik mit FootStickerAlt
Tach zusammen,
wie schon der Titel sagt habe ich die "Companion Columns Technik" mit FootStickerAlt" kombiniert. "Companion Columns Technik" ist eine Alternative zur "Faux Columns Technik" kommt aber ohne Grafiken aus. Ausführlich beschrieben ist es hier: Fortgeschrittene CSS-Techniken Ich habe ein einfaches Beispiel für ein Tut erstellt. Funktioniert auch in allen Browsern (FF3, IE7, Opera, Safari) zuverlässig. Code: 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" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="language" content="deutsch, de" /> <title>Companion Columns Technik mit FootStickerAlt</title> <style type="text/css"> * { padding:0; margin:0; } html, body, #umhang { height:100%; } body { color:#000; background-color:#dcdcdc ; } #umhang { width:700px; color:#000; background:#696969; margin:0 auto; } #umhang_innen { min-height:100%; } #stapel { position:relative; z-index:1; } #kopf { color:#000; background-color:#f5e274; } h1 { text-align:center; padding:0.5em; } .links { float:left; width:200px; color:#000; background-color:#bcf1a0; } .rechts { float:right; width:500px; color:#000; background-color:#a0f1e5; } .links p, .rechts p { padding:10px; } #tapete { height:15px; } .begleiter { height:15px; padding-top:16000px; margin-top:-16000px; position:relative; } #sockel { clear:both; height:65px; margin-top:-65px; } #fuss { height:50px; color:#000; background-color:#f5958e; text-align:center; } .clear { clear:both; height:0; width:0; visibility:hidden; border:0; } </style> <!--[if lte IE 7]> <style type="text/css"> * html #umhang_innen { height:100%; } #stapel { zoom:1; } #tapete { position:relative; } * html #fuss { zoom:1; } </style> <![endif]--> </head> <body id="startseite"> <div id="umhang"> <div id="umhang_innen"> <div id="stapel"> <div id="kopf"> <h1>Hauptüberschrift</h1> </div><!--Ende #kopfbereich--> <div class="links"> <p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse.</p> </div><!--Ende #links--> <div class="rechts"> <p>Hunger. Stufe für Stufe schob sie sich die Treppe hinauf. Pizza Funghi Salami, Sternchen "Salami" gleich Blockwurst. Die Pilze hatten sechs Monate in einem Sarg aus Blech, abgeschattet vom Sonnenlicht, eingeschläfert in einer Sosse aus Essig, billigem Öl und verschiedenen Geschmacksverstärkern, geruht. Es war nur ein Augenblick, in dem sie die Welt erblickt hatten, dann verschwanden sie wieder in einem 450° heissen Ofen. Die Pizza ruhte auf ihrer rechten Hand, und in ihrer Linken hielt sie eine jener nichtssagenden Plastiktüten.</p> </div><!--Ende #rechts--> <hr class="clear" /> </div><!-- Ende #stapel --> </div><!-- Ende #umhang_innen --> <div id="sockel"> <div id="tapete"> <div class="links begleiter"> </div> <div class="rechts begleiter"> </div> </div><!-- Ende #tapete --> <div id="fuss"> <p>Ein kurzer Fusstext</p> </div><!--Ende #fuss--> </div><!-- Ende #sockel --> </div><!--Ende #umhang--> </body> </html> Dieser verschwindet, wenn ich im Cond. Comm. folgendes zusätzlich eintrage: Code:
* html #sockel { margin-top:-69px; } Ich kann mir leider keinen Reim darauf machen, warum ich für den IE6 4px mehr negatives margin geben muss, damit der horiz. Scrollbalken verschwindet. Hat jemand eine Lösung für mich? Danke im voraus edit. Das Beispiel ist im Moment noch "Work in flow" sozusagen, also noch etwas suboptimal. Auf #umhang_innen kann z.B. verzichtet werden. Die min-height:100%; bekommt einfach #stapel. Für den IE6 wird das CC noch entsprechend angepaßt.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (07.11.2008 um 15:55 Uhr) |
Sponsored Links |
|
|||
IE < 7 erweitert Elemente, bis Text hineinpasst. 15px Höhe sind zu wenig für eine Zeile Text.
Persönliche Anmerkung: Bei einem Layout mit festen Pixelbreiten, das einfarbige gleichlange Spalten bekommen soll, ist diese Kombination IMHO Kanonen auf Spatzen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Aber nur, solange niemand die Schrift vergrößert ...
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DL Navi Menu mit Image Replacment technik? | toto_ee | CSS | 0 | 28.02.2006 14:27 |
faux columns und height:100% sind keine Lösungen | Mambo_mango | CSS | 18 | 05.05.2005 20:08 |