css, drei Spalten und der browser dreht durch |
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
Ihr Lieben,
nach einer Nacht und einem Tag erfolglosen Forschens brauche ich auf dem Weg zu einer Lösung einen neuen Denkanstoß. Vielleicht ist die Lösung ja ganz einfach und ich verschwende Stunden.
Ausgangssituation:
Ich habe ein div als Nest, welches drei weitere divs ("content_left", "content" und "content_right") beherbergt. Die divs "content_left" und "content_right" sollen mit fester Breite jeweils am Rand stehen (der Name verrät schon, wo) und das div "content" soll größenveränderlich die Mitte ausfüllen.
Ich dachte, so funktioniert es in der css-Datei (ich lasse das umschließende Nest weg, das stört jetzt nur).
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31: |
#content_left {
float:left;
width:160;
padding: 2px;
border: 1px solid #C5D8C0;
background-color:white;color:black;
border-right: 2px solid #B0B7AF;
border-bottom: 2px solid #B0B7AF;
overflow:hidden;
}
#content {
background: #FFFFFF;
background-image:url(http://www.isjetztegal.de/images/background.jpg);
background-repeat:repeat-y;
overflow:auto;
}
#content_right {
float:right;
width:160;
border: 1px solid #C5D8C0;
background-color:white;color:black;
border-right: 2px solid #B0B7AF;
border-bottom: 2px solid #B0B7AF;
overflow:hidden;
}
|
Das dachte ich nur.
Im Firefox funktioniert es, ich habe drei schöne Spalten nebeneinander.
Im IE dagegen sind die schönen Spalten nur anfangs nebeneinander - am unteren Ende von "content_left" nimmt "content" (also die mittlere Spalte) dann die komplette Seitenbreite ein. "content_left" wird also von "content" umflossen.
Ich habe mich heißgegoogelt und alle Beispiele, die ich finde, sind im Grunde die gleiche Lösung wie die von mir verwandte. Eine Breitenangabe für die mittlere Spalte hilft mir nichts, da sie sich ja der Größe anpassen soll. Für die mittlere Spalte einen linken Rand anzugeben macht auch keinen Sinn - dann nickt der IE und der Firefox baut ihn (korrekter Weise) zwischen den linken und den mittleren div.
Wo ist mein Denkfehler? Alle Beispiele, die ich fand, sehen so einfach aus, aber bei mir mag es einfach nicht klappen.
Liebe Grüsse
Mondschatten
|
 Profil
Editieren
Zitieren
|
progrookie
Fachidiot
Beiträge: 127 |
wie sieht denn die CSS-Angabe deines "Nestes"(Container) aus?
---
Diese Nachricht wurde geändert von: progrookie |
 Profil
E-Mail
Website
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
So:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: |
#content_nest {
min-height:600px;
height:auto !important;
height:600px;
padding: 5px;
border: 0px;
margin: 1px;
background: #FFFFFF;
}
|
|
 Profil
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
Nur so eine Idee...
Kann es vielleicht sein, dass es an der Reihenfolge der "Befüllung" der divs liegt? Bei mir werden zuerst "content_left", dann "content_right" und anschließend "content" mit Inhalt versorgt.
Viele Grüße
Mondschatten
|
 Profil
Editieren
Zitieren
|
progrookie
Fachidiot
Beiträge: 127 |
Hallo, ich bin es nochmal,
ich habe mal deine CSS-Angaben 1zu1 übernommen und habe per HTML das gebaut:
... und habe danach in deiner #content-"Klasse" ein "float:left;" eingebaut, und in deiner #content_nest-Klasse ein "min-width:350px;" (350px nur zu Testzwecken).
Danach das Fenster beim FF(2.0) und IE7 verkleinert, und die DIV's blieben ausgerichtet!!!
Gruß und GeNacht
---
|
 Profil
E-Mail
Website
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
Hallo progrookie,
danke für Deine Mühe. Deine Vorschläge habe ich übernommen - nun geht es im IE. Dafür sitzt die mittlere Spalte jetzt im Firefox unter der linken Spalte.
Ich sende Dir per PM einen Link zum Ansehen. Ich steige nicht mehr durch. Kein falsches Clearing, soweit ich das sehe, den Platz in der Mitte habe ich versuchsweise auch erhöht, mir fällt nichts mehr ein.
Viele Grüße
Mondschatten
|
 Profil
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
nun geht es im IE. Dafür sitzt die mittlere Spalte jetzt im Firefox unter der linken Spalte. |
Falls es einen css-Experten gibt, der dieses Problem erklären kann... Bislang haben leider alle aufgegeben und ich suche immer noch nach einer Lösung.
Viele Grüße
Mondschatten
|
 Profil
Editieren
Zitieren
|
Ori
Mausakrobat
Beiträge: 162 |
Mit float habe ich viele schlechte Erfahrungen gemacht. Irgendwo wurde mal vorgeschlagen, dass sich damit ganz toll Spalten machen lassen und alle haben das dann nachgemacht.
Ich bin davon nicht überzeugt, Viel schöner geht es mit absoluter Positionierung.
(Und da es sich ausschließlich um Ausrichtung dreht, kannst du Farben etc. ruhig weglassen..)
In der Annahme, dass der mittlere auf jeden Fall am längsten ist (sonst evtl. mit min-height vergrößern), sollte Folgendes klappen:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45: | body, html
{
margin: 0;
border: 0;
padding: 0;
}
#content_nest
{
background: lime; /* Testzwecke */
padding: 5px /* für den mittleren */
}
#content_left, #content_right
{
width:160px;
padding: 2px;
border: 1px solid #C5D8C0;
border-right: 2px solid #B0B7AF;
border-bottom: 2px solid #B0B7AF;
position: absolute;
margin: 5px; /* Durch absolute Positionierung wird die padding-Angabe des Containers ausgehebelt, darum nachhelfen */
}
#content_left
{
top: 0;
left: 0;
}
#content_right
{
top: 0;
right: 0;
}
#content
{
background: #FFFFFF;
background-image:url(http://www.isjetztegal.de/images/background.jpg);
background-repeat:repeat-y;
margin-left: 170px; /* Abstand nach links/rechts */
margin-right: 170px;
border: 1px solid red; /*Testzwecke*/
} |
(oder gleich das Ergebnis ansehen: Tada! (via dyndns - evtl. offline))
Vermutlich befindet sich jedoch noch etwas darüber. Logo, Banner o.ä., dann müssen die enstprechenden top-Angaben angepasst werden (durch Hinzunahme von margin-top lassen sich sogar em- und px-Werte gleichzeitig verwenden).
|
 Profil
E-Mail
Website
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
Hallo Ori,
vielen Dank für Deine Antwort und Erklärungen.
Drei Spalten mit absoluter Positionierung ist allerdings das, was ich habe - und loswerden will, weil eben nicht die mittlere Spalte immer die längste ist und kein clear funktioniert, um unten einen ordentlichen Abschluss hinzubekommen.
Ich verstehe nicht, warum überall von der Leichtigkeit des Floatings mit drei Spalten geredet wird, wenn es doch gar nicht funktioniert. Ich habe nun wirklich alles gedreht, probiert und verändert - entweder geht es im IE pder im Ff. In beiden gleichzeitig nicht.
Viele Grüße
Mondschatten
|
 Profil
Editieren
Zitieren
|
Ori
Mausakrobat
Beiträge: 162 |
Wenn es unbedingt mit float sein muss, dann notiere doch einfach die rechte Spalte vor der mittleren. Sofern es nicht die logische Reihenfolge zu arg durcheinanderbringt, müsste das jedes Deiner Probleme lösen.
Ansonsten: Tabellen. Nur Spaß. Aber vielleicht ist die Unterstützung für die display-Angaben für Tabellendarstellung inzwischen so weit, dass das etwas bringt. (Firefox kann sie - IE nicht, riecht nach Star-Hack.)
|
 Profil
E-Mail
Website
Editieren
Zitieren
|
Ehemaliges Mitglied (#378)
Quasselstrippe Threadstarter
Beiträge: 282 |
Ori schrieb am 22.04.2007 11:29
dann notiere doch einfach die rechte Spalte vor der mittleren. |
...das ist bereits so. Erst wird die linke, dann die rechte Spalte gefüllt, ganz zum Schluss kommt der Inhalt der mittleren Spalte. Ändert leider gar nichts.
Viele Grüße
Mondschatten
|
 Profil
Editieren
Zitieren
|
Ori
Mausakrobat
Beiträge: 162 |
Ich habe ein wenig geschummelt und einen weiteren ins Nest gesetzt:
und diesen via CSS verschwinden lassen: Das Ergebnis sollte jetzt stimmen. |
 Profil
E-Mail
Website
Editieren
Zitieren
|