zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3-Spalten-Layout: Mitte fest - rest variabel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.03.2006, 15:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.03.2006
Beiträge: 2
moonworker befindet sich auf einem aufstrebenden Ast
Standard 3-Spalten-Layout: Mitte fest - rest variabel

Hallochen

Nach stundenlanger Recherche im www und Layout Basteleinseid ihr meine letzte Rettung. Ich möchte, wie der Titel schon erkläert, ein 3 spaltiges Layout aufsetzen mit fester Breite in der Mitte, links und rechts die Spalten sollen eine Mindestbreite besitzen aber sonst den Screen variabel ausfüllen. Ich habe hier einen Beispielshot gebastelt um das ganze besser zu beschreiben:



Bisher hab ich das ganze über ein Hintergrundbild (wie ein Band quer über den Screen) gelöst, jetzt sollen aber die beiden äußeren Spalten auch in der Höhe und (durch das Wegfallen des Hintergrundbildes) auch in der Breite variabel sein, unabhängig voneinander so dass ich mit den Schatten als auch mit der Zentrierung in Schwierigkeiten komme.

Die Idee ist, "linke_spalte" hat einen festen Wert, "links" drumherum soll in der Breite variabel sein mit dem Background-Bild (welches sehr breit ist um versch. Screenbreiten abzupuffern, daher auch no-repeat). "linke_spalte" soll dann in der Höhe in das Background-Bild ziehen. Gleiches mit der rechten Spalte.
Leider kann ich, um das ganze variabel zu gestalten, nur % angeben, das beißt sich aber mit der festen Breite der "content" Spalte. Auch margin-left:auto brachte mich nicht weiter.

Bisher sieht mein CSS grob skizziert so aus:

body {
margin: 0 auto;
text-align:center;
}

.pagewidth {
margin: 0 auto;
text-align:center;
width:100%
}

.links {
width:22%;
background: url(../images/bg_linkespalte.gif) top right no-repeat;
float:left;
}

.linkespalte {
width:200px;
float:right;
}

.content {
width:615px;
float:left;
background: url(../images/bg_content_schattenweiss.gif) repeat-y;
}

--> vorher hatte der Contentbereich die Schatten, jetzt müssens die äußeren Spalten sein, aber der weiße Schatten unten richtet sich nach dem inneren Content

.rechts {
width:22%;
background: url(../images/bg_rechtespalte.gif) top left no-repeat;
float:left;
}

.rechtespalte {
margin:0;
padding:0;
width:160px;
float:left;
}

html:

<div class="pagewidth">

<div class="links>
<div class="linke_spalte">Inhalt</div>
</div>

<div class="content">Inhalt</div>

<div class="rechts>
<div class="rechte_spalte">Inhalt</div>
</div>

</div>

Hinweis: ich hab das als beispiel stark abgespeckt, es ging mir hier um die grundelemente.
So funktioniert es nur bedingt, die rechte Spalte springt schnell nach unten bei Screenverkleinerung oder es bleibt ein weißer Rand stehen rechts (bei zu kleinen % Angaben der äußeren Spalten)

Ich bin für JEDEN Ratschlag offen!!!Tausend Dank im voraus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.03.2006, 17:37
Benutzer
neuer user
 
Registriert seit: 27.08.2005
Beiträge: 36
pichfl befindet sich auf einem aufstrebenden Ast
Standard

wenn die beiden äußeren spalten content enthalten sollen, kannst du mal das probieren: http://www.xhtmlforum.de/viewtopic.php?p=55525#55525

wenn kein content rein soll, würd ich mit sowas wie http://www.alistapart.com/articles/onionskin/ arbeiten.
lässt sich ja anpassen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.03.2006, 22:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.03.2006
Beiträge: 2
moonworker befindet sich auf einem aufstrebenden Ast
Standard

SUPER vielen dank - ich werd mich vertiefen!
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
3 Spalten - Links und Rechts flexibel Mitte fest Ibu400 CSS 11 21.10.2013 18:57
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite devnull CSS 3 02.02.2009 11:03
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
3 Spalten Layout - aussen fixe Breite, mitte variabel semikolon CSS 1 04.12.2005 18:14
frage zu 3 spalten layout mit festem bereich in der mitte otomo CSS 3 08.03.2005 02:41


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