CSS:Positionierung 3-spaltiges Layout

[Robi_f71602]

Hallo CSS-Freaks,

bin ich zu blöde oder was? Ich möchte eigentlich nichts weiter erreichen, als 3 Spalten über die gesamte BS-Breite, jede in 1/3 der Gesamtbreite. Was ich auch versuche (mir und ohne div. Doctypes, width-, margin- und was weiß ich noch alles, das ergebnis ist nie das, was ich will. Im günstigsten Fall liegen DIV links und DIV mitte nebeneinander und DIV mitte mit DIV rechts rechte Ecke unten an linker Ecke oben, also anstatt:

*****************************
*          *          *          *
*****************************

schaut das so aus:

*******************
*          *          *
*****************************
                        *          *
                        **********

Eigentlich 'ne ganz simple Sache, mit Tabelle überhaupt kein Problem; aber es ist ja CSS angesagt, soll ja alles einfacher machen, weil neuester Standart

Was mache ich nun falsch, was fehlt, was muss weg, was sollte anders sein?

Für euere Antworten dankt euch ein genervtes Programmiererlein, das allen Widrigkeiten zum Trotz versucht, sich mit CSS anzufreunden um die gängigen Standarts einhalten zu können.

Hier der CSS/HTML-Code:

#container {width:100%;
border:solid 1px red;}
#left {top: 0;
width:33%;
float:left;
text-align:left;
border:solid 1px black;}

#middle {top:0;
margin-left: 33%;
margin-right: 33%;
text-align:left;
border:solid 1px black;}

#right {text-align:right;
width:33%;
float:right;
border:solid 1px black;}

links
mitte
rechts

Grüße aus Elbflorenz

Robi

[Nicos_ec7086]

bin ich zu blöde oder was? Ich möchte eigentlich nichts weiter
erreichen, als 3 Spalten über die gesamte BS-Breite, jede in
1/3 der Gesamtbreite.

Du bist nicht blöde. Das liegt nur daran, dass CSS für solche Layouts sch***e ist, und das wird sich aller Wahrscheinlichkeit auch mit CSS3 nicht ändern. Eine allgemeine Lösung für dieses Problem gibt es nicht, allerdings kann man mit ein wenig Bastelei durchaus brauchbare Ergebnisse erzielen:
http://glish.com/css/

[Rudy_8b85b1]

Hi Robi,

Probiers mal damit:

#container {
 width:100%;
 border:1px solid red;
}
#left, #middle, #right {
 float:left;
 width:33%;
 text-align:left;
 border:1px solid black;
}

#right {
 text-align:right;
}

Anmerkung: 33%*3 = 99%, d.h. innerhalb des Containers auf der rechten Seite bleibt 1% frei. Wenn Du #right, #mddle oder #left nun 34% zuweist, dann muss der border weg, denn sonst wird das div zu breit und wandert unterhalb der anderen.
Und bitte denk nicht an Tabellen, außer du hast Ergebnislisten oder tatsächliche tabellarische Werte. Beiß Dich durch. Der IE macht zwar oft Zicken, aber seis drum, braucht er eben oft ein zusätzliches CSS. Irgendwann wird er schon (X)HTML lernen.

Schönen Gruß,
Rudy

[Robi_f71602]

JAU!
Ich sag’s ja: warum einfach, wenn’s umständlich auch geht *ggg*

Anmerkung: 33%*3 = 99%, d.h. innerhalb des Containers auf der
rechten Seite bleibt 1% frei. Wenn Du #right, #mddle oder
#left nun 34% zuweist, dann muss der border weg, denn sonst
wird das div zu breit und wandert unterhalb der anderen.

Den Border hatte ich nur der Demo halber; der kommt sowieso weg. Die 33% waren auch nur einer der Werte bei den verschiedenen Versuchen; ursprünglich hatte ich mal 33.333%.

Und bitte denk nicht an Tabellen, außer du hast Ergebnislisten
oder tatsächliche tabellarische Werte. Beiß Dich durch. Der IE
macht zwar oft Zicken, aber seis drum, braucht er eben oft ein
zusätzliches CSS. Irgendwann wird er schon (X)HTML lernen.

Ich auch
Mein Problem ist, dass ich eigentlich schon „zu versaut bin“ durch jahrzehntelanges strukturiertes Programmieren und eben Tabellennutzung bei Websites. War halt ursprünglich mal das einzig Wahre.

Natürlich beiße ich mich da durch. Nicht nur, weil das jetzt Standart ist (da habe ich in meiner langen Berufspraxis schon zu viele Standarts kommen und wieder gehen sehen), sondern weil ich es einfach wissen will und um mitreden zu können.

Danke nochmal!

RoBi

[Robi_f71602]

Hallo Nicos,

Du bist nicht blöde. Das liegt nur daran, dass CSS für solche
Layouts sch***e ist, und das wird sich aller
Wahrscheinlichkeit auch mit CSS3 nicht ändern. Eine allgemeine
Lösung für dieses Problem gibt es nicht, allerdings kann man
mit ein wenig Bastelei durchaus brauchbare Ergebnisse
erzielen:
http://glish.com/css/

wenn ich mir so Deine Postings ansehe - könnte es sein, dass Du von CSS „unheimlich begeistert“ bist?

Kann ja auch ganz schön frustrieren, wenn man stundenlang am Suchen und Probieren ist, nur um ein im Grunde ganz simples Ergebnis zu erreichen. Aber ich denke mal, da müssen wir einfach durch.

Danke für den Tip mit der Website, die kannte ich noch nicht.

Viele Grüße, Robi

[Nicos_ec7086]

wenn ich mir so Deine Postings ansehe - könnte es sein, dass
Du von CSS „unheimlich begeistert“ bist?

Ich mag CSS im Prinzip schon, nur ist es halt unheimlich schwierig, ein paar „traditionelle“ Sachen hinzubekommen. Das wird in Version 3 teilweise einfacher (z.B. richtig dekorierte Rahmen, die bisher nur über unsagbar eklige Tabellenkonstrukte möglich sind), allerdings erscheinen mir ein paar Details doch arg unausgegoren und dank der Ignoranz von Microsoft bekommt man dann als Lohn gleich noch die Ohren von ewig gestrigen (Netscape 4), IE-Nutzern und Auftraggebern vollgeheult. Wenn man als Bonus noch ein paar Nettigkeiten à la „display:inline-block“ einbaut, ist gleich noch die Firefox-Fraktion verwirrt (Bug 9458).

Nebenbei: bastel mal mit inline-Block eine kleine Gallerie, das ist herlich einfach und fließt auch im kleinsten Browserfenster noch ohne Scrollbars.

Das schöne ist halt, dass man eine „korrekt“ aufgebaute Seite sogar in Primitivbrowsern wie lynx noch so darstellen kann, dass der Sinn rüberkommt, ohne dass dabei alle Textelemente wild verwürfelt werden.

CSS2.1 kann übrigens beliebige Elemente zu Tabellen anordnen, vielleicht hilft dir das weiter:
http://www.w3.org/TR/CSS21/tables.html
Ausprobiert habe ich das allerdings noch nicht, und welche Browser das wie gut können weiss ich auch nicht.

[wodi_707569]

Hi,

schau dir mal diese Site an:

http://www.css4you.de

Dort gibt es unter den Beispielen auch ein dreispaltiges Layout. Zudem ist das meiner Meinung nach eine der besten CSS-Sites im Netz.

Viele Grüße
WoDi

[sigterm]

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

Dreispaltiges Layout
Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen. Dieses CSS-basiert umzusetzen erfordert lediglich eine weitere Box mit der CSS-Eigenschaft float:right und einer geeigneten Angabe zu width.

ttp://www.w3.org/TR/html4/strict.dtd"\>


Dreispaltiges Layout
 body {
 color: black; background-color: white;
 font-size: 100.01%;
 font-family: Helvetica,Arial,sans-serif;
 margin: 0; padding: 1em;
 }

 ul#Navigation {
 font-size: 0.83em;
 float: left; width: 18em;
 margin: 0; padding: 0;
 border: 1px dashed silver;
 }
 ul#Navigation li {
 list-style: none;
 margin: 0; padding: 0.5em;
 }
 ul#Navigation a {
 display: block;
 padding: 0.2em;
 font-weight: bold;
 }
 ul#Navigation a:link {
 color: black; background-color: #eee;
 }
 ul#Navigation a:visited {
 color: #666; background-color: #eee;
 }
 ul#Navigation a:hover {
 color: black; background-color: white;
 }
 ul#Navigation a:active {
 color: white; background-color: gray;
 }

 div#Info {
 font-size: 0.9em;
 float: right; width: 12em;
 margin: 0; padding: 0;
 border: 1px dashed silver; background-color: #eee;
 }
 div#Info strong {
 font-size: 1.33em;
 margin: 0.2em 0.5em;
 }
 div#Info p {
 font-size: 1em;
 margin: 0.5em;
 }

 div#Inhalt {
 margin: 0 12em 0 16em;
 padding: 0 1em;
 border: 1px dashed silver;
 }
 div#Inhalt h1 {
 font-size: 1.5em;
 margin: 0 0 0.5em;
 }
 div#Inhalt h2 {
 font-size: 1.2em;
 margin: 0.2em 0;
 }
 div#Inhalt p {
 font-size: 1em;
 margin: 1em 0;
 }

• Einführung in CSS-basierte Layouts

• Mehrspaltige CSS-basierte Layouts

• Fixe Bereiche mit CSS-basierten Layouts

• CSS-basierte Navigationsleisten

• CSS-Browserweichen

Info-Box
Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.
Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.
Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorers auszugleichen.

CSS-basierte Layouts
3-spaltiges Layout
In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.
Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in ‚em‘
können sich die Boxen einer Änderung des Schriftgrades anpassen.
Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.

[Nicos_ec7086]

Um mir mal selbst zu antworten:

CSS2.1 kann übrigens beliebige Elemente zu Tabellen anordnen,
vielleicht hilft dir das weiter:
http://www.w3.org/TR/CSS21/tables.html
Ausprobiert habe ich das allerdings noch nicht, und welche
Browser das wie gut können weiss ich auch nicht.

Das funktioniert in praktisch allen Browsern außer IE um einiges besser als alle anderen Hacks. IE ignoriert einfach die tabellarischen Werte für „display“, do dass da einfach nur Absätze rausfallen:

/\* Header \*/
#banner {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 50px;
 text-align: center;
 background: #ffffef;
}

/\* Zwei Hilfs-Divs um die Tabelle richtig zu erstellen. Wenn man
 \* den Inhalt anders darstellen will, kann man einfach den "display"-
 \* Wert rausnehmen.
 \*/
#body\_o {
 margin: 0;
 padding: 0;
 display: table;
}

#body\_i {
 margin: 0;
 padding: 0;
 display: table-row;
}

/\* Linke Spalte \*/
#menu {
 margin: 0;
 padding: 0;
 width: 250px;
 background-color: transparent;
 font-size: 15px;
 display: table-cell;
 background: #ffefef;
}

/\* Mittlere Spalte \*/
#content {
 margin: 0;
 padding: 0;
 display: table-cell;
 background: #efffef;
}

/\* Rechte Spalte \*/
#stats {
 width: 175px;
 margin: 0;
 padding: 0;
 display: table-cell;
 background: #efefff;
}

/\* Footer, nicht in der Tabelle \*/
#disclaimer {
 padding: 0;
 margin: 0;
 background-color: #efefef;
 width: 100%;
}

Beispielcode:

Der Vorteil ist, dass sich das Ganze ohne Stylesheet einfach in sinnvoll angeordnete Textabschnitte verwandelt.

[Dirk_8a1a6f]

der tip ist gut!

aber da sehe ich ja, das man generell CSS vegesssen sollte. die browsers sollte man allsammt in die tonne treten, kann denn da nieeeeeeeeeeeemand seine arbeit richtig tun damit es auch funzt?

http://www.css4you.de/browsercomp.html