3-spaltiges Layout mit CSS: Frage

Computer: Software & Programmierung HTML & CSS
#1

Grüß Gott zusammen,
bei einem 3-spaltigen Layout habe ich folgendes Problem mit den Breitenangaben der 3 Spalten:
Gesamtbreite der 3 Spalten = 100%. Menüs links und rechts feste Breite, Inhalt in Mitte soll den Zwischenraum ausfüllen.
Bei %-Angabe (z.B. 100%) nutzt der Inhalt nur die Breite, die ich mit Inhalt, z.B. Text fülle. Feststellbar, wenn ich den Inhalt mit Hintergrundfarbe belege. So schaut es aus:
http://www.bilder-upload.eu/show.php?file=s3Im0jjbwy…
Welche Angabe vergebe ich für die Breite des Inhaltes? (Auszug CSS untenstehend).

Danke und Ostergrüße
Der Franke

div.menue1 {
 float:left;
 width: 6em;
 height: 100%;
 margin: 10px 10px 20px 10px;
}

div.inhalt {
 float:left;
 height: 100%;
 margin: 20px 10px 20px 10px;
 background-color: #CCCCCC;
}

div.menue2 {
 float:right;
 width: 6em;
 height: 100%;
 margin: 10px 10px 20px 10px;
}
#2

Welche Angabe vergebe ich für die Breite des Inhaltes? (Auszug
CSS untenstehend).

Gar keine, denn die Mitte nimmt den Platz ein der übrig bleibt. Wenn Du sie auf 100% stellst, ist damit die komplette Fensterbreite gemeint. Und das ist ja nicht möglich, weil die beiden Elemente links und recht ja schon Platz wegnehmen. Es können also schon keine 100% mehr übrig sein.

Gruß Marcus

#3

Gar keine, denn die Mitte nimmt den Platz ein der übrig
bleibt. Wenn Du sie auf 100% stellst, ist damit die komplette
Fensterbreite gemeint. Und das ist ja nicht möglich, weil die
beiden Elemente links und recht ja schon Platz wegnehmen. Es
können also schon keine 100% mehr übrig sein.

Ich habe die Breite rausgenommen und in der Reihenfolge des Codes zuerst die Menüs mit fester Breite festgelegt, dann den Inhalt ohne Breite. Inhalt wird dennoch auf ganzer Fensterbreite angezeigt bei FF und Opera. Effekt: Wenn Text unterhalb der Menüs geschrieben wird, nehmen sie die ganze Fensterbreite ein. Cool, aber nicht zweckmäßig. IE6 ist scheinbar fehlertolerant, IE7 konnte ich noch nicht testen, geschweige denn Linux oder Mac.
Self-Html konnte mir auch nicht weiterhelfen. Welche Möglichkeiten gäbe es noch ?
Gruß
Der FRanke

#4

Hallo *Der Franke* :smile:

Self-Html konnte mir auch nicht weiterhelfen. Welche

tzä, wieso kann dir SELFHTML nicht helfen? :smile:

Da stehts sehr gut beschrieben, unter anderem auch:

„…Um mehrere Boxen über float nebeneinander zu setzen, kann bei einer Box - hier dem Inhaltsbereich - auf die Definition von float und width verzichtet werden. Hierdurch nimmt sie den gesamten zur Verfügung stehenden Raum ein. Dies erfordert allerdings, die floatenden Boxen vorher in den Quelltext zu setzen , damit sie zuerst ihre definierte Breite reservieren können…“

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#…

Und wenn du die Ergebnisse testen möchtest, kannst du das hier tun:

http://browsershots.org/

Das dauert manchmal ein wenig, dafür spart man sich die Installation von etlichen (Un)Browsern :wink:

Gruß,
Maja

2 Like
#5

Hallo *Der Franke* :smile:

:smile:))
Danke,

tzä wieso kann dir SELFHTML nicht helfen? :smile:
Da stehts sehr gut beschrieben, unter anderem auch:
„…Um mehrere Boxen über float nebeneinander zu
setzen, kann bei einer Box - hier dem Inhaltsbereich - auf die
Definition von float und width verzichtet werden. Hierdurch
nimmt sie den gesamten zur Verfügung stehenden Raum ein.
Dies erfordert allerdings, die floatenden Boxen
vorher in den Quelltext zu setzen , damit sie zuerst
ihre definierte Breite reservieren können…“

hab ich alles gemacht. Ich werde mir den SelfHTML-Link nochmal genau ansehen und den restlichen CSS-Code. Irgendwo habe ich was übersehen, weil ich weder float noch width für den Inhalt verwende und die Menüs als erstes definiert habe.

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#…
Und wenn du die Ergebnisse testen möchtest, kannst du das hier
tun:
http://browsershots.org/

Danke, den Link hatte ich schon mal. Ist gut.

Das dauert manchmal ein wenig, dafür spart man sich die
Installation von etlichen (Un)Browsern :wink:

Ja, ich zappe von Ort zu Ort und Rechner zu Rechner. Umständlich.
Gruß
Der Franke