|
|||
3 Spaltiges Layout mit CSS - Fluid Fixed Fluid
Hallo 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. 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>Three Column Layout</title> <style type="text/css"> 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; } </style> </head> <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> </html> LG Daniel |
Sponsored Links |
|
|||
Mindestbreite min-width: angeben ?
Hier bleibt der Text links http://www.google.com/search?client=...utf-8&oe=utf-8 Geändert von paulepulmo (22.12.2011 um 18:45 Uhr) |
Sponsored Links |
|
|||
Welchen Inhalt sollen die beiden fluiden Spalten bekommen?
Wenn die Antwort lautet "ein Hintergrundbild": Dafür brauchst du keine "Spalten". Das ist Tabellendenken. Ein sehr breites Hintergrundbild im body reicht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Stichwörter |
3-column, css, fixed, fluid layout, layout |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 Spalten fixed width css layout | sharepointkb | CSS | 9 | 28.02.2010 21:00 |
Fluid XHTML / CSS Layout | Innocentus | (X)HTML | 1 | 02.12.2009 17:25 |
CSS Layout Komplex | yanu | CSS | 0 | 01.04.2009 21:27 |
CSS Layout für Fortgeschrittene | StefanE | CSS | 2 | 15.01.2009 08:39 |
includes bei css layout | dan | CSS | 2 | 10.03.2004 19:21 |