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


Homepage und Webhosting-Forum

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 der browser dreht durch » Antworten
Benutzername:
Passwort: Passwort vergessen?
Inhalt der Nachricht: Fett | Kursiv | Unterstrichen | Link | Bild | Smiley | Zitat | Zentriert | Quellcode| Kleiner Text
Optionen: Emailbenachrichtigung bei Antworten
 

css, drei Spalten und der browser dreht durch
von Ori
Ich habe ein wenig geschummelt und einen weiteren <div> ins Nest gesetzt:
1: 
2: 
3: 
4: 
5: 
6:
 <div id="content_nest">
  <div id="content_left">a<br/>a<br/>a<br/>a<br/>a</div>
  <div id="content_right">c<br/>c<br/>c</div>
  <div id="content">b<br/><br/>b2</div>
  <div id="unten">&nbsp;</div>
 </div>

und diesen via CSS verschwinden lassen: Das Ergebnis sollte jetzt stimmen.
von Mondschatten
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
von Ori
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.)
von Mondschatten
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
von Ori
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).
von Mondschatten
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
von Mondschatten
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
von progrookie
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:
    <div id="content_nest">
        <div id="content_left">a</div>
        <div id="content">b</div>
        <div id="content_right">c</div>
    </div>

... 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
von Mondschatten
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
von Mondschatten
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;
}
von progrookie
wie sieht denn die CSS-Angabe deines "Nestes"(Container) aus?
von Mondschatten
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

Nach oben