zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten Layout - mittlere Spalte dynamisch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2009, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 4
stefan133 befindet sich auf einem aufstrebenden Ast
Standard 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>
CSS dazu (wieder alles unwichtige entfernt!)
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2009, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2009, 15:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 4
stefan133 befindet sich auf einem aufstrebenden Ast
Standard

hi,

der mittlere container soll im quellcode vorne stehen!!

lg
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2009, 15:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von stefan133 Beitrag anzeigen
hi,

der mittlere container soll im quellcode vorne stehen!!

lg
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2009, 16:28
Neuer Benutzer
neuer user
 
Registriert seit: 05.06.2009
Beiträge: 27
cheza befindet sich auf einem aufstrebenden Ast
Standard

Geht mit relativer/absoluter Positionierung (& Abständen)

Deine HTML Tags sind sinnlos, weil sie keine Verschachtelung zeigen.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.06.2009, 08:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 18.06.2009, 09:13
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:14 Uhr.