Autor |
Nachricht |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 22.02.2008 21:40
Titel
|
|
|
Wie gesagt, ohne Footer ist es leicht - hier eine Variante mit dem position-absolute-Holzhammer
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 500px;
position: absolute;
left: 50%;
top: 0;
z-index: 2;
background: red;
margin-left: -250px;
}
#links,
#rechts {
width: 50%;
position: absolute;
top: 0;
z-index: 1;
}
#links {
left: 0;
background: yellow;
}
#rechts {
right: 0;
background: green;
}
#links-inhalt {
margin-right: 250px;
}
#rechts-inhalt {
margin-left: 250px;
}
</style>
</head>
<body>
<div id="main">main</div>
<div id="links">
<div id="links-inhalt">links</div>
</div>
<div id="rechts">
<div id="rechts-inhalt">rechts</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von heiko_rs am Fr 22.02.2008 21:40, insgesamt 1-mal bearbeitet
|
|
|
|
|
nevermind
Threadersteller
Dabei seit: 17.04.2002
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 22.02.2008 22:23
Titel
|
|
|
1000 dank!
|
|
|
|
|
Anzeige
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Sa 23.02.2008 02:24
Titel
|
|
|
Professionelle Websites von Stefan Münz. 1136 Seiten, knapp 60 Euro als gebundenes Buch oder als kostenloser Download im PDF-Format.
Ich hab das PDF jetzt gerade nicht vorliegen, aber dort gibt es u.a. ein Kapitel über so ein Drei-Spalten-Layout mit Beispielen und dem Code.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 23.02.2008 09:00
Titel
|
|
|
Damit kein falscher Eindruck entsteht: Ich habe den Code nicht aus diesem Buch abgeschrieben (habe nie dort reingeschaut), sondern mir spontan aus den Fingern gesogen. Übrigens: Um diese Variante auch für schmale Viewports tauglich zu machen, würde ich noch dem body min-width geben. Das klappt auch JS-frei im IE < 7 (je nach Markup mit nur einem bzw. zwei zusätzlichen divs): http://www.cssplay.co.uk/boxes/minwidth.html
Interessant (und kompliziert) wird's natürlich erst, wenn es einen Footer gibt, denn dann geht es nicht mehr so simpel mit dem pos.-abs.-Holzhammer, sondern muss per float gelöst werden. Dazu habe ich mir ebenfalls mal eine Variante überlegt, die im IE ab 5.0, Gecko ab NN 7 und Opera ab 7 funktioniert. Aber Achtung: Der IE möchte statt width: 50%; z.B. 49.9% (am Besten per Conditional Comment), da er Prozent-Werte im Zweifelsfalle leider aufrundet, so dass die beiden Floats bei genau 50% bei manchen Viewport-Breiten nicht nebeneinander passen.
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
min-width: 750px;
}
#main {
float: left;
width: 500px;
height: 200px;
background: red;
position: relative;
left: 50%;
margin-left: -250px;
}
#spalten {
float: right;
width: 100%;
margin-left: -500px;
}
#links,
#rechts {
width: 50%;
}
#links {
float: left;
}
#rechts {
float: right;
}
#links-inhalt {
background: yellow;
margin-right: 250px;
}
#rechts-inhalt {
background: green;
margin-left: 250px;
}
#footer {
background: silver;
clear: both;
}
</style>
</head>
<body>
<div id="main">main</div>
<div id="spalten">
<div id="links">
<div id="links-inhalt">links</div>
</div>
<div id="rechts">
<div id="rechts-inhalt">rechts</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
div-Layout variabel gestalten?
3 Spalten Layout - aussen fixe Breite, mitte variabel
[php] variabel IN variabel
variabel von swf zu swf
db >> tabelle >> variabel ...
Div in div, höhe variabel?
|
|