|
|||
Tabellenloses Layout mit dreispaltigen Kopf, dreispaltigen Hauptteil und Footer
Hallo liebe Community,
Dies ist mein erster Beitrag, also seid mir wegen eventuellen "Fehlern" bitte nicht böse, die können gerne gegessen werden So soll das ganze aussehen Ich versuche mich aktuell an einem Layout mit einem Kopf, einem Hauptteil und einem Footer. Das Layout setzt ist liquid, das Problem was ich habe beschränkt sich jedoch auf die korrekte Anordnung bzw. den Zeilenumbruch der Div's Der Kopf, welcher als #top deklariert wurde, besteht aus 3 Div's der #logo, der #navi und der #login Div. #top ist fixed. Anschliessend soll darunter der Hauptteil folgen, welcher sich aus einer #left, einer #main und einer #right div zusammen setzt. Die #left und #left Div's bestehen wiederum aus kleinen .ad Klassen welche untereinander angeordnet sind und im #mid ist eine #title div und darunter die #content. Abschliessend folgt unter der #mid div der Footer, welcher #footer heißt. Dies ist mein CSS-Code: Code:
@charset "utf-8"; /* CSS Document */ * { margin:0px; padding:0px; border:0px; overflow:visible; text-align:center; } #wrapper { min-height:100%; width:100%; max-width:100%; max-width:100%; } #top { height:10%;/* perfect version later */ position:fixed; } .logo { width:25%; height:100%; position:fixed; float:left; } .navi { width:50%; height:100%; position:fixed; float:left; } .login { width:25%; height:100%; position:fixed; float:left; } #left { width:25%; float:left; } #mid { width:45%; max-width:50%; float:left; } #main { width:100%; height:100%; } #title { width:100%; } #content { width:100%; } #footer { height:100%; width:100%; } #right { width:25%; float:left; } /* classes */ .ad { } Und hier der HTML-Code: HTML-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=utf-8" /> <title>Layout</title> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="classes.css" /> <link rel="stylesheet" type="text/css" href="design.css" /> <link rel="stylesheet" type="text/css" href="fonts.css" /> <link rel="stylesheet" type="text/css" href="specials.css" /> </head> <body> <div id="wrapper"> <div id="top"> <div class="logo"> BILD </div> <div class="navi"> <a>Link1</a> <a>Link2</a> <a>Link3</a> <a>Link4</a> <a>Link5</a> </div> <div class="login"> <form> <input placeholder="Benutzername"/> <input placeholder="Password"/> <input value="Anmelden"/> </form> </div> </div> <div id="left"> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> </div> <div id="mid"> <div id="main"><!-- beinhaltet titel, inhalt --> <div id="title"> Title </div> <div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div><!-- end of #main --> </div> <div id="right"> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> <div class="ad"> Werbung </div> </div> <div id="footer"> copyright ... </div> </div> </body> </html> Und unter Layout ist der Versuch zu sehen Ich hoffe ihr könnt mir weiterhelfen ich sitze da schon ewig dran Vielen Dank im Vorraus |
Sponsored Links |
|
||||
???
und was genau ist dein problem?
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
Sponsored Links |
|
||||
[Invalid] Markup Validation of http://vg-company.com/test/index.php - W3C Markup Validator
W3C CSS Validator results for http://vg-company.com/test/index.php (CSS level 2.1)
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
|
|||
Vielen Dank Manfred, werds ausprobieren
Wandel ich dann in ein liquides Layout um, aber das sollte kein Problem sein Grüße VG company |
Stichwörter |
dreispaltig, footer, hauptteil, kopf, liquid layout |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
Höhe in einem dreispaltigen Layout | sliver2203 | CSS | 4 | 24.02.2009 11:55 |
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) | Basti_LRT | CSS | 1 | 08.10.2007 23:03 |
Footer Problem (3 spaltiges Layout, variable Höhe) | Lofesto | CSS | 2 | 23.07.2007 17:13 |
Problem mit dreispaltigem Layout mit Hintergrundmuster und Footer | G321 | CSS | 2 | 09.07.2007 01:13 |