WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- css, drei Spalten und der browser dreht durch

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » css, drei Spalten und ... - 29 März 2024 Antworten
im Forum für Webhosting Homepage gefunden:
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:
1: 
2: 
3: 
4: 
5: 
6: 
7:
    
a
b
c

... 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:
1: 
2: 
3: 
4: 
5: 
6:
 
a
a
a
a
a
c
c
c
b

b2
 

und diesen via CSS verschwinden lassen: Das Ergebnis sollte jetzt stimmen.

  Profil   E-Mail   Website   Editieren   Zitieren
 

Antworten
Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » css, drei Spalten und ...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - css, drei Spalten und der browser dreht durch im Forum Homepage Hosting AntwortenLetztes Posting
Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 20.08.2023 20:14 von Freud
Geschenkidee zum Geburtstag
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 14.04.2022 16:08 von bryleth03
Webdesigner gesucht
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 10.12.2021 15:04 von Rieke
Welcher Hoster ist der Beste?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 10.12.2021 15:02 von Rieke
Warum Wordpress?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
6 05.07.2021 18:27 von Rieke
Die Idee einen Blog zu führen
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 27.02.2021 09:50 von Samira2021
zu viele css dateien?!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
4 19.01.2021 19:20 von Laurena
WIe kann ich Datum ausblenden?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 23.11.2020 12:21 von noahradar96
Tabelle mit Mannschaftslogos
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
3 23.10.2019 14:54 von andyy
Eigene Website erstellen - kostenlos!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 17.05.2019 15:01 von Fusselchen



Besucher : 7975174    Heute : 125     Gestern : 388     Online : 41     29.3.2024    9:22      0 Besucher in den letzten 60 Sekunden        
Nach oben