|
|||
3 Spalten Layout - mittlere Spalte dynamisch
Hallo Leute,
stehe seit Stunden vor einem Problem. Und zwar möchte ich ein Drei Spalten Layout. Äußere Spalten fix, mittlere (content) immer so groß wie das Fenster zulässt, also dynamisch. DATEI (ich habe den CODE stark gekürzt) HTML-Code:
<!-- CONTENT --> <div id="content"></div> <!-- NAV1 (TOP) --> <div id="nav1"></div> <div id="banner1anzeige"></div> <!-- NAV2 (LEFT1) --> <div id="nav2"></div> <!-- TOP --> <div id="top"></div> <!-- LOGO --> <div id="logo"></div> <!-- NAV3 (RIGHT1) --> <div id="nav3"></div> <!-- NAV5 (RIGHT2) --> <div id="nav5"></div> <div id="banner2anzeige"></div> <div id="footer"></div> HTML-Code:
body { background-color: #FFFFFF; margin: 0px 0px 0px 0px; text-align: left; vertical-align: top; } #top { color: #FFFFFF; width: 100%; font-weight: bold; padding-top: 4px; height:43px; } #logo { position: absolute; margin-left: 30px; } #nav1 { position: absolute; margin-top: 30px; margin-left: 270px; } #nav2 { position: absolute; margin-left: 30px; margin-top: 177px; width: 163px; } #nav3 { float: right; margin-right: 40px; margin-top: 130px; padding: 0; width: 163px; font-weight: bold; } #nav5 { clear: right; float: right; margin-top: 20px; padding: 0; width: 163px; margin-right: 40px; } #content { position:absolute; float: left; margin-top: 177px; width: 55%; margin-left: 220px; } #banner1anzeige { position: absolute; margin-left: 309px; margin-top: 91px; } #banner2anzeige { clear: right; margin-top: 20px; float: right; margin-right: 152px; } #footer { margin-top: 20px; float: left; width: 100%; height: 90px; } Ich bin für jede Hilfe dankbar! LG Stefan |
Sponsored Links |
|
|||
Ich blicke zwar durch die Logik deines Codes nicht so ganz durch, aber ganz allgemein kannst du dein Problem folgendermaßen lösen:
Linke Spalte erhält feste Breite und float: left; Rechte Spalte erhält feste Breite und float: right; Mittlere Spalte bekommt margin-left und -right in der Breite der äußeren Spalten, keine feste Breite und kein float; Im Markup kommt es nun auf die Reihenfolge an. Die mittlere Spalte kommt als letztes: HTML-Code:
<div id="links">...</div> <div id="rechts">...</div> <div id="mitte">...</div> |
Sponsored Links |
|
|||
OK - dann siehst du ja, was passiert
Wenn du nun doch möchtest, dass der mittlere Bereich den restlichen Platz ausfüllt, dann steige einfach auf die von mir genannte Lösung um. Und noch eines: Ich finde diese SEO nicht gut. Den Content weit vorn im Quellcode zu platzieren ist zwar (angeblich) generell besser, lässt mich aber verzweifeln, wenn ich mittels TAB-Taste zu den Links in der Navi springen will. Dann darf ich u.U. erst die 20 Links im Content durchtabben, bevor ich es endlich zur Navi geschafft habe? OK - Skiplinks wären möglich, aber die findet man nicht überall und sind u.U. fehlerbehaftet und nicht nutzbar. |
|
|||
Stimmt. Damit ist es machbar. Browserübergreifend mit abs. Positionierung schon schwieriger und ich wage es zu behaupten, dass es bei weitem nicht so robust sein wird. Schon allein das aufspannen eines absolut positionierten Containers mittels z.B. left:0; right:0; klappt im IE nicht ohne Weiteres. Und das wird sicher nicht das einzige Problem sein.
Ich bin der Meinung, dass Contentverlagerung im Quellcode an die erste Stelle nur, um eventuell eine bessere Indizierung bei SuMas zu erlangen, übertrieben ist. Bzw. muss man extrem viel testen und das vorallem auch mit Screenreadern, Browsern ohne CSS, ect. pp. Schon allein ohne CSS wird die Seite für meine Bedürfnisse extrem unzugänglich. Denn wer scrollt denn dann bitte ganz nach unten oder klickt einen Link "zur Navigation" an, weil er oben keine Navigation findet? |
|
||||
Ich kann hier nur das Buch von Ingo und Corinna empfehlen: dolphin's back - Debugging und fortgeschrittene CSS-Techniken für das Webdesign - CSS-Buch
Dort werden ein paar Techniken beschrieben, wie man Content-First recht stabil realisieren kann, leider zuviel, um's "mal ebend" hier zu erklären. Allerdings wirst Du um ein paar Markup-Änderungen nicht drumherum kommen, da z.B. alles, was oberhalb der 3 Spalten (also: Header, Logo, Top-Navi) auch vor dem Content kommen muss, afaik. Lediglich linke und rechte Spalte können nach der mittleren Spalte im Markup notiert werden. Ansonsten wird's nur über absolute Positionierung gehen und da sollte man imo tunlichst die Finger von lassen, zumindest bei kompletten Websites. Kleine Bereiche können ruhig mal absolut positioniert werden, aber keine kompletten Layouts, das bringt fast nur Probleme. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dreispaltiges Layout, clearing-Problem mittlere Spalte | akb | CSS | 6 | 21.08.2010 18:16 |
3 Spalten fixed width css layout | sharepointkb | CSS | 9 | 28.02.2010 21:00 |
css layout: rechte spalte ist sehr lang und soll selbe Höhe wie mittlere Spalte haben | gabine | CSS | 8 | 02.04.2009 20:40 |
3 Spalten Layout, mal anders | Sushimeister | CSS | 2 | 05.03.2007 12:15 |
2 Spalten Layout - Linke Spalte bis unten | jr-ewing | CSS | 2 | 23.11.2005 16:04 |