nicht angemeldet
3 Spaltiges Layout mit CSS - Fluid Fixed Fluid
Matthias Apsel
Gunnar BittersmannHallo ihr Lieben,
ich bin gerade am verzweifeln, weil ich schon seit mehreren Tagen versuche, ein Layout mit CSS zu zaubern.
Egal was ich versuche, es klappt einfach nicht. Über Google bin ich schon auf viel Denkanstöße und Beispielen gestoßen, jedoch hat keins so funktioniert, wie es soll :/
Vielleicht könnt ihr mir da weiterhelfen oder einen entsprechenden Tipp geben.
Das Layout sollte wie folgt aufgebaut sein.
Wie im Bild zu sehen, gibt es 3 Spalten. Die mittlere Spalte ist zentriert auf eine bestimmte Größe fixiert (z.b.1000px)
Die linke und rechte Spalte sind jeweils variabel und passen sich an das Fenster an und verschwinden ggf. bei kleinerem Fenster.
Alle Spalten sollen auf 100% Höhe gesetzt werden. Grund dafür ist, dass ich Top:0 sowie Bottom:0 Objekte setzen möchte.
Ganz wichtig ist auch, dass die linke Spalte sich rechts an der mittleren Spalte orientiert (rechtsbündig soll dann ein Background gesetzt werden, nahtlos an der mittleren Spalte).
Mein Codebeispiel, welches ich hier euch zeige, ist schon ziemlich nah dran.
Jedoch, wenn ich das Fenster in der Breite kleiner mache, als die mittlere Spalte groß ist, ist im FF der Text der rechten Spalte nicht mehr linksbündig sondern rechtsbündig. Im IE ist sind in diesem Fall die linke und die rechte Spalte einfach unter der mittleren Spalte gerutscht.
html,body{
height:100%;
background:#BBB;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper {
width: 100%;
height: 100%;
}
#maincol {
width: 1000px;
margin: 0 auto;
text-align: left;
background: #888;
min-height: 100%;
position:relative;
float:left;
}
#left {
width:50%;
float: left;
min-height:100%;
margin-right:-500px;
background: #fff;
}
#right {
width: 50%;
float: right;
min-height:100%;
margin-left:-501px;
background: #aaa;
text-align:left;
}
<body>
<div id="wrapper">
<div id="left">
<div style="text-align:right;margin-right:500px;">2</div>
</div>
<div id="maincol">123</div>
<div id="right">
<div style="text-align:left;margin-left:500px;">2</div>
</div>
</div>
</div>
</body>
Ich hoffe ihr seid vielleicht schlauer als ich :)
LG
Daniel
-
Om nah hoo pez nyeetz, DanielH!
faux colums ist dein Suchbegriff. Da aber das linke und das rechte ggf. nicht mehr zu sehen sein brauchen, könntest du auch mit absoluter Positionierung arbeiten und entsprechende minimale und maximale Breiten sowie z-indexe setzen, beachte, dass z-index nur auf Elemente wirkt, deren position-wert ungleich static ist.
Somit könnte auch der wichtige Inhalt am Anfang des Dokuments (und sogar im body selbst) stehen.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, DanielH!
Steck den wichtigen Inhalt in das body-Element, richte dies entsprechend zentriert aus.
Verwende für die unwichtigen Ränder div- oder aside-Elemente (html5), die du absolut positionierst, da sie nicht unbedingt sichtbar sein sollen/brauchen. Vergib entsprechende Mindest- und Maximalbreiten sowie z-indexe. Beachte, dass z-index nur auf Elemente wirk, deren position ungleich static ist.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias Apsel!
nach meiner ersten Antwort erschien:
"Fehler: Die von Ihnen angeforderte Nachricht wurde nicht gefunden."Matthias
--
1/z ist kein Blatt Papier.
-
-
@@DanielH:
nuqneH
Wie im Bild zu sehen, gibt es 3 Spalten. Die mittlere Spalte ist zentriert auf eine bestimmte Größe fixiert (z.b.1000px)
Mein Browserfenster ist schmaler als 1000 Pixel. Was dann? Gibt es keine linke und rechte Spalte?
Beschäftige dich mit responsive design.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@DanielH:
nuqneH
Wie im Bild zu sehen, gibt es 3 Spalten. Die mittlere Spalte ist zentriert auf eine bestimmte Größe fixiert (z.b.1000px)
Mein Browserfenster ist schmaler als 1000 Pixel. Was dann? Gibt es keine linke und rechte Spalte?
Beschäftige dich mit responsive design.
Qapla'
Hallo,
die 1000px waren auch nur als Beispiel gedacht. Das Layout wird so, dass selbst bei 800x600 vom Content nichts verschwindet.
Responsive Webdesign wäre für mich nur interessant, wenn ich nicht vorhabe, zusätzlich eine mobiloptimierte Seite zu erstellen. Und bei Tablets würde die normale Seite ja gut dargestellt.Gruß
Daniel -
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Mein Browserfenster ist schmaler als 1000 Pixel. Was dann? Gibt es keine linke und rechte Spalte?
So habe ich "und verschwinden ggf. bei kleinerem Fenster" verstanden.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Mein Browserfenster ist schmaler als 1000 Pixel. Was dann? Gibt es keine linke und rechte Spalte?
So habe ich "und verschwinden ggf. bei kleinerem Fenster" verstanden.
Oh, das hatt ich glatt überlesen. Aber wieso können sie so einfach verschwinden? Ist dort gar kein Inhalt drin? Dann sind es wohl keine Spalten, sondern lediglich Hintergrund?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Oh, das hatt ich glatt überlesen. Aber wieso können sie so einfach verschwinden? Ist dort gar kein Inhalt drin? Dann sind es wohl keine Spalten, sondern lediglich Hintergrund?
Auf jeden Fall "unwichtige Ränder"
Matthias
--
1/z ist kein Blatt Papier.
-
-
-