Autor |
Nachricht |
konsumkünstler
Threadersteller
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 13.12.2006 16:18
Titel dreispaltiges div layout |
|
|
servus miteinander,
ich bin schon völlig am verzweifeln. und zwar versuche ich schon seit stunden ein dreispaltiges div-layout auf die beine zu stellen, was wiefolgt aufgebaut ist: (screenshot)
Code: |
<body>
<div id="container">
<div id="links">
</div>
<div id="rechts">
</div>
<div id="mitte">
</div>
<div style="clear:both"></div>
</div>
</body>
|
die dazugehörige css:
Code: |
#container {
width:800px;
background-color:orange;
}
#links {
float:left;
width:200px;
background-color:red;
}
#mitte {
float:left;
width:400px;
}
#rechts {
float:left;
width:200px;
background-color:red;
}
|
das gefloate funktioniert im IE einwandfrei. allerdings zickt der Firefox rum, da er mir die hintergrundfarbe im container nicht anzeigt - allerdings tut er dies, wenn "right" nicht mehr gefloatet wird. eine andere Möglichkeit habe ich so versucht umzusetzen:
Code: |
<div id="container">
<div id="links">
</div>
<div id="mitte">
</div>
<div id="rechts">
</div>
<div style="clear:both"></div>
</div>
|
die css:
Code: |
#container {
width:800px;
background-color:orange;
}
#links {
float:left;
width:200px;
background-color:red;
}
#mitte {
width:400px;
margin-left:200px
}
#rechts {
float:right;
width:200px;
background-color:red;
}
|
das wiederum funktioniert im firefox, aber im IE nicht, da im IE die "mitte" einen so großen abstand von oben hat wie "rechts hoch ist".
und Tabellen möchte ich nicht nehmen. vielleicht hat einer noch ne idee..
Viele Grüße
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
konsumkünstler
Threadersteller
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 13.12.2006 17:29
Titel
|
|
|
ne leider auch nicht. ist wohl ein sehr spezielles problem. was ich nicht verstehen kann, da es ja eingentlich ein ein pillepalle layout ist.
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 13.12.2006 17:48
Titel Re: dreispaltiges div layout |
|
|
konsumkünstler hat geschrieben: |
die css:
Code: |
#container {
width:800px;
background-color:orange;
}
#links {
float:left;
width:200px;
background-color:red;
}
#mitte {
width:400px;
margin-left:200px
}
#rechts {
float:right;
width:200px;
background-color:red;
}
|
das wiederum funktioniert im firefox, aber im IE nicht, da im IE die "mitte" einen so großen abstand von oben hat wie "rechts hoch ist".
und Tabellen möchte ich nicht nehmen. vielleicht hat einer noch ne idee..
Viele Grüße |
jetzt denk mal ganz scharf nach:
links: breite 200px.
mitte: breite: 400px, 200px von links entfernt.
rechts: breite 200px.
so. auf wieviel kommst du da (1000px) und wie breit ist dein container (800px)?
was passiert also? richtig! er bricht um, da nicht alle 3 elemente in dieser breite unterzubringen sind.
zudem würde ich deinem mittleren container noch ein float: left; spendieren, denn sonst wirst du das problem des umbruchs auch weiterhin haben.
ergo:
Code: |
#container {
width:800px;
background-color:orange;
}
#links {
float:left;
width:200px;
background-color:red;
}
#mitte {
width:400px;
foat: left;
}
#rechts {
float:right;
width:200px;
background-color:red;
}
|
Zuletzt bearbeitet von sahnemuh am Mi 13.12.2006 17:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
konsumkünstler
Threadersteller
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 13.12.2006 18:10
Titel
|
|
|
das margin-left ergibt sich dadurch, das die "mitte" nicht wie gewünscht von "links" left-gefloatet wird..das umgehee ich eben dadurch, das ich der "mitte" ein margin-left von 200px verpasse..
sieht zwar komisch aus, ist aber so..
würde ich der "mitte" noch ein float:left verpassen, würde "rechts" wieder zerhackt werden..(siehe beispiel 1) .. wenn du die beiden beispiele mal anwenden würdest, dann würdest du sehen und verstehen was ich meine..
Zuletzt bearbeitet von konsumkünstler am Mi 13.12.2006 18:12, insgesamt 1-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 13.12.2006 18:26
Titel
|
|
|
mein fehler.
ist der source, den du hier postest derjenige, bei dem probleme auftreten?
denn:
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>
<title>TEST</title>
<style type="text/css">
#container {
width:800px;
background-color:orange;
}
#links {
float:left;
width:200px;
background-color:red;
}
#mitte {
float:left;
width:400px;
}
#rechts {
float:left;
width:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="links">
</div>
<div id="mitte">
</div>
<div id="rechts">
</div>
<div style="clear:both"></div>
</div>
</body>
</html> |
wird bei mir einwandfrei dargestellt..
|
|
|
|
|
konsumkünstler
Threadersteller
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 13.12.2006 18:36
Titel Re: dreispaltiges div layout |
|
|
jo. im IE funktionierts ja auch.
konsumkünstler hat geschrieben: |
das gefloate funktioniert im IE einwandfrei. allerdings zickt der Firefox rum, da er mir die hintergrundfarbe im container nicht anzeigt - allerdings tut er dies, wenn "right" nicht mehr gefloatet wird... |
grüße und danke für die mühen
EDIT: jaaaaaaaaaa..ich habs raus. falls es jemanden interessiert. manche ältere versionen vom FF brauchen im clearenden Element ein .. juhu..ich bin so glücklich
Zuletzt bearbeitet von konsumkünstler am Mi 13.12.2006 19:21, insgesamt 2-mal bearbeitet
|
|
|
|
|
2LL
Dabei seit: 21.11.2006
Ort: Erdgeschoss rechts
Alter: 49
Geschlecht:
|
Verfasst Mi 13.12.2006 19:48
Titel
|
|
|
Ist zwar gelöst ansonsten gibt es hier ein Tutorial zum Tut . Meine Page läuft 4spaltig
Zuletzt bearbeitet von 2LL am Mi 13.12.2006 19:48, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] dreispaltiges Layout mit fester Breite im IE6
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
CSS Layout
CSS-Layout.. wie?
|
|