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
 

Die letzten 5 Postings in diesem Thema » Alle anzeigen
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).

Nach oben