3 Boxen nebeneinander

[Erik Griffin]

Hallo !

Ich würde gerne folgendes Layout mit div's und css realisieren:

----------------------------------------
| | | |
| width: 25% | width: 50% | width: 25% |
| | | |
----------------------------------------

Mein css sieht momentan so aus:

body {
width:100%;
height:100%;
}

.links {
border-width: 1px;
border-style: solid;
width:25%;
}

.mitte {
border-width: 1px;
border-style: solid;
width:50%;
}

.rechts {
border-width: 1px;
border-style: solid;
width:25%;
}

Jedoch werden die div's nicht nebeneinander sondern untereinander
angeordnet. Wie kann ich die div's nebeneinander anordnen, so dass das
so wie im oberen Beispiel aussieht.


mfg
Erik

[Steffen Schmidt]

Post by Erik Griffin
Wie kann ich die div's nebeneinander anordnen, so dass das
so wie im oberen Beispiel aussieht.

#links {
float:left
border-width: 1px;
border-style: solid;
width:25%;
}

#mitte {
float:left
border-width: 1px;
border-style: solid;
width:50%;
}

#rechts {
border-width: 1px;
border-style: solid;
width:25%;
}


<div id="links">...</div>
<div id="mitte">...</div>
<div id="rechts">...</div>

[Erik Griffin]

Post by Steffen Schmidt

Post by Erik Griffin
Wie kann ich die div's nebeneinander anordnen, so dass das
so wie im oberen Beispiel aussieht.

#links {
float:left
border-width: 1px;
border-style: solid;
width:25%;
}
#mitte {
float:left
border-width: 1px;
border-style: solid;
width:50%;
}
#rechts {
border-width: 1px;
border-style: solid;
width:25%;
}
<div id="links">...</div>
<div id="mitte">...</div>
<div id="rechts">...</div>

bei mir sieht das so aus:

-----------------
| links | mitte |
-----------------
| rechts|
---------

mfg
Erik

[Joachim Wiesemann]

Post by Erik Griffin
-----------------
| links | mitte |
-----------------
| rechts|
---------

Nimm mal irgendwo einen Prozent raus. Vermutlich ein Rundungsfehler.

Viele Grüße
Joachim

[Erik Griffin]

Post by Joachim Wiesemann

Post by Erik Griffin
-----------------
| links | mitte |
-----------------
| rechts|
---------

Nimm mal irgendwo einen Prozent raus. Vermutlich ein Rundungsfehler.

hab die mittlere Spalte bereits auf 40% gesetzt. Das Problem besteht
weiterhin :-( (25+40+25=90)

Post by Joachim Wiesemann
Viele Grüße
Joachim

mfg
Erik

[Lutz Illigen]

Post by Erik Griffin
hab die mittlere Spalte bereits auf 40% gesetzt. Das Problem besteht
weiterhin :-( (25+40+25=90)

Du hast nur Probleme im IE? Kuckst Du
hier:http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fluid.htm
oder suchst mal nach BoxModelHack.
HTH

Lutz

[Erik Griffin]

Post by Lutz Illigen

Post by Erik Griffin
hab die mittlere Spalte bereits auf 40% gesetzt. Das Problem besteht
weiterhin :-( (25+40+25=90)

Du hast nur Probleme im IE?
[...]

Habe das ausschliesslich im Mozilla (1.5b) getestet.

Post by Lutz Illigen
HTH
Lutz

mfg
Erik

[Joachim Wiesemann]

Post by Erik Griffin

Post by Joachim Wiesemann

Post by Erik Griffin
-----------------
| links | mitte |
-----------------
| rechts|
---------

Nimm mal irgendwo einen Prozent raus. Vermutlich ein Rundungsfehler.

hab die mittlere Spalte bereits auf 40% gesetzt. Das Problem besteht
weiterhin :-( (25+40+25=90)

Du mußt die dritte Box auch floaten lassen. Sonst fängt sie am linken
Rand an und reicht mit 25% Breite nicht bis rüber.

Viele Grüße
Joachim

[Eric B. Bednarz]

Post by Joachim Wiesemann

Post by Erik Griffin
-----------------
| links | mitte |
-----------------
| rechts|
---------

Nimm mal irgendwo einen Prozent raus. Vermutlich ein Rundungsfehler.

Nix Rundungsfehler; die Summe der Breite ist 100% width plus 6px
border-width. Einen gewissen Spielraum einzuraeumen ist allerdings
sowieso eine gute Idee. Der Internet Exploiter hat zum Beispiel die
lustige Gewohnheit Bloecke die Kursivschrift enthalten je nach
Fensterbreite wohl oder nicht geringfuegig auszudehnen.

[Erik Griffin]

Post by Erik Griffin
Hallo !
----------------------------------------
| | | |
| width: 25% | width: 50% | width: 25% |
| | | |
----------------------------------------
[...]

Ich habe unter http://www.stichpunkt.de/css/3-box2.html ein
3-Spaltenlayout gefunden. Das möchte ich jedoch nicht verwenden, da bei
sehr kleinen fenstern der text aus der mittleren box herausläuft bzw.
unter http://www.stichpunkt.de/css/3-box1.html von der rechten box
überlagert wird.

mfg
Erik

PS: Im Endeffekt möchte ich damit meinen bisherigen 3-spaltigen Effekt
nachahmen, den ich sonst immer mit Tabellen so hinbekommen hab.
Tabellen sollte man ja aber für solche Sachen nicht nutzen ;)

[Irmgard Schwenteck]

Post by Erik Griffin
PS: Im Endeffekt möchte ich damit meinen bisherigen 3-spaltigen Effekt
nachahmen, den ich sonst immer mit Tabellen so hinbekommen hab.
Tabellen sollte man ja aber für solche Sachen nicht nutzen ;)

Es funktioniert richtig gut, sieht toll aus und man kann eine Menge
schöner Sachen mit so einem DIV-Layout anstellen.
Allerdings nur so lange, wie Du mit NN7 darauf schaust und das nur
deshalb, weil NN7 einen bug hat, wie ich mir hier hab erklären lassen.

Sobald Du in einem deiner Divs ein umflossenes objekt einbaust und Du
diesen Fluß unterbrechen willst, funktionierts in Opera und Konqeror
nicht mehr (weils die es "richtig" machen).

Sobald Du im IE zufälligerweise eine Fensterbreite hast, die der
Mindestbreite der DIVS entspricht (Entweder durch Vorgabe oder durch den
gerenderten Inhalt) zerschießt IE das layout völlig. Etwas darunter oder
darüber klappt alles.

NN4 ist dabei noch erstaunlich stabil, kann aber für DIVS z.B. keine
Hintergrundfarbe einstellen; nur für Tabellenzellen.

Kannst ja noch mal hier schauen:
http://css.fractatulum.net/

Gruß
Irmgard

[Joachim Wiesemann]

Post by Irmgard Schwenteck
NN4 ist dabei noch erstaunlich stabil, kann aber für DIVS z.B. keine
Hintergrundfarbe einstellen; nur für Tabellenzellen.

Kann er doch. Siehe: <http://jwiesemann.com/>

Man muß nur auch noch einen Rahmen drumherum zeichnen. Den dann am Besten
in der Farbe des umgebenden Bereichs, dann verschwindet er wieder. (Sonst
taucht er mit einem Pixel Abstand zum DIV auf.)

Viele Grüße
Joachim

[Juergen Arnold]

Post by Joachim Wiesemann

Post by Irmgard Schwenteck
NN4 ist dabei noch erstaunlich stabil, kann aber für DIVS z.B. keine
Hintergrundfarbe einstellen; nur für Tabellenzellen.

Kann er doch. Siehe: <http://jwiesemann.com/>
Man muß nur auch noch einen Rahmen drumherum zeichnen. Den dann am Besten
in der Farbe des umgebenden Bereichs, dann verschwindet er wieder. (Sonst
taucht er mit einem Pixel Abstand zum DIV auf.)

Rahmen um DIVs bringen Netscape 4.x zuverlässig zum Absturz, wenn in
dem betreffenden DIV z.B. das <ABBR> Element auftaucht. Das ist einer
der Gründe, warum ich in meinen Netscape 4.x Stylesheets so gut wie
keine Rahmen verwende.

Gruß Jürgen

[Irmgard Schwenteck]

Post by Joachim Wiesemann

Post by Irmgard Schwenteck
NN4 ist dabei noch erstaunlich stabil, kann aber für DIVS z.B. keine
Hintergrundfarbe einstellen; nur für Tabellenzellen.

Kann er doch. Siehe: <http://jwiesemann.com/>
Man muß nur auch noch einen Rahmen drumherum zeichnen. Den dann am Besten
in der Farbe des umgebenden Bereichs, dann verschwindet er wieder. (Sonst
taucht er mit einem Pixel Abstand zum DIV auf.)

Is ja interessant ... hatte mich schon gewundert, warum NN4 bei meinen
ganzen Versuchen mit den DIVs hin und wieder den Hintergrund komplett
angezeigt hat.
Hätte ich das da gewußt, dann hätte ich wohl noch länger an der
DIV-Variante gefriemelt. Da hat Nichtwissen also Zeit gespart ;-)

Gruß
Irmgard

[Juergen Arnold]

Post by Erik Griffin
----------------------------------------
| | | |
| width: 25% | width: 50% | width: 25% |
| | | |
----------------------------------------

Sieh Dir http://css-discuss.incutio.com/?page=ThreeColumnLayouts an.
Höchstwahrscheinlich findest Du dort eine Vorlage, die Deinen
Anforderungen entspricht bzw. nur geringfügig abgewandelt werden muß.

Gruß Jürgen

[Gerhard Rinnberger]

Post by Erik Griffin
Jedoch werden die div's nicht nebeneinander sondern untereinander
angeordnet. Wie kann ich die div's nebeneinander anordnen, so dass das
so wie im oberen Beispiel aussieht.

Schau dir mal <http://www.glish.com/css/> an insbesondere
<http://www.glish.com/css/7.asp>.

Gerhard

[Joachim Wiesemann]

Ich möchte das beim
verkleinern des Fensters das gleiche geschieht, als wenn ich
<table><tr><td>links</td><td>mitte</td><td>rechts</td></tr></table>
verwenden würde... nur eben mit div's ;)

Dann mußt Du es verwenden. DIVs sind keine Tabellenzellen. Theoretisch
kann man sie mit display:table(cell) dazu machen. Aber das kann IE nicht.
Ergo: wenn Du eine Tabelle willst, dann nimm eine Tabelle.

Viele Grüße
Joachim

[Erik Griffin]

Post by Joachim Wiesemann

Ich möchte das beim
verkleinern des Fensters das gleiche geschieht, als wenn ich
<table><tr><td>links</td><td>mitte</td><td>rechts</td></tr></table>
verwenden würde... nur eben mit div's ;)

Dann mußt Du es verwenden. DIVs sind keine Tabellenzellen. Theoretisch
kann man sie mit display:table(cell) dazu machen. Aber das kann IE nicht.
Ergo: wenn Du eine Tabelle willst, dann nimm eine Tabelle.

Im Grunde will ich keine Tabelle. Ich will nur den gleichen Effekt beim
verkleinern des Fensters erzielen, als wenn ich eine Tabelle nutzen
würde. So gut wie jeder hier sagt, dass man keine Tabelle benutzen soll
um damit ein Layout hinzufriemeln...

Post by Joachim Wiesemann
Viele Grüße
Joachim

mfg
Erik

[J. Strübig]

Post by Erik Griffin
Im Grunde will ich keine Tabelle. Ich will nur den gleichen Effekt beim
verkleinern des Fensters erzielen, als wenn ich eine Tabelle nutzen
würde. So gut wie jeder hier sagt, dass man keine Tabelle benutzen soll
um damit ein Layout hinzufriemeln...

Das ist glaube ich ein Mißverständniss. Wenn dein Inhalt "Tabellenartig"
angeordnet ist, sind Tabellen die 1. Wahl
Da du eine Reihe mit drei Zellen willst, kann man das IMHO als eine
Tabelle bezeichnen. (und ich würde es ebenfalls so machen, da du mit
einer reinen CSS Lösung doch immer wieder an einige (Browser)Grenzen
stößt.

Was allerdings nicht besonders schön ist, sind Tabellen, die Elemente
auf der Seite anordnen sollen, man kennt ja diese Konstrukte von 5
ineinander verschachtelten Tabellen mit unzähligen row/-colspans, das
ist was überflüssig ist.

Struppi.

[Erik Griffin]

Post by J. Strübig

Post by Erik Griffin
Im Grunde will ich keine Tabelle. Ich will nur den gleichen Effekt beim
verkleinern des Fensters erzielen, als wenn ich eine Tabelle nutzen
würde. So gut wie jeder hier sagt, dass man keine Tabelle benutzen soll
um damit ein Layout hinzufriemeln...

Das ist glaube ich ein Mißverständniss. Wenn dein Inhalt "Tabellenartig"
angeordnet ist, sind Tabellen die 1. Wahl
Da du eine Reihe mit drei Zellen willst, kann man das IMHO als eine
Tabelle bezeichnen. (und ich würde es ebenfalls so machen, da du mit
einer reinen CSS Lösung doch immer wieder an einige (Browser)Grenzen
stößt.

also wäre folgendes ok:

<table cellpadding="0" cellspacing="0" border="0" class="content" summary="layout">
<tr>
<td align="right" valign="middle" class="left"><div>1</div></td>
<td align="center" valign="middle" class="middle"><div>2</div></td>
<td align="left" valign="middle" class="right"><div>3</div></td>
</tr>
</table>

Post by J. Strübig
Was allerdings nicht besonders schön ist, sind Tabellen, die Elemente
auf der Seite anordnen sollen, man kennt ja diese Konstrukte von 5
ineinander verschachtelten Tabellen mit unzähligen row/-colspans, das
ist was überflüssig ist.

ja das wäre ja dann in meinem Fall nicht so ;)

Post by J. Strübig
Struppi.

mfg
Erik

[Irmgard Schwenteck]

Hallo

Post by Erik Griffin
<table cellpadding="0" cellspacing="0" border="0" class="content" summary="layout">

Cellpadding und cellspacing hier nur, wenn es unbedingt auch in nn4
genauso aussehen soll. Aber da es das mit den umflossenen DIVS auch
nicht getan hätte, kannst Du beruhigt alles ins CSS packen.

Frage: Braucht man für so eine Tabelle überhaupt eine summary-Angabe
oder ist das hier nicht genauso sinnfrei wie alt="blauer Punkt zur
Zierde" bei einem Bild? Summary="" oder weglassen?

Post by Erik Griffin
<tr>
<td align="right" valign="middle" class="left"><div>1</div></td>

usw.

Nein. Gib jeder Zelle eine class oder eine ID und laß diesen Mischmasch
dafür weg.
Und überleg, ob Du in jeder Zelle außerdem noch ein DIV benötigst.

Gruß
Irmgard

[Thomas Scholz]

Post by Irmgard Schwenteck

Post by Erik Griffin
<table cellpadding="0" cellspacing="0" border="0" class="content" summary="layout">

Frage: Braucht man für so eine Tabelle überhaupt eine summary-Angabe
oder ist das hier nicht genauso sinnfrei wie alt="blauer Punkt zur
Zierde" bei einem Bild?

'summary' bei Layout-Tabellen ist ein typischer Fall von Pseudo-Usability.
Einige Voicebrowser haben eine interne Heuristik, die versucht, Daten- und
Layout-Tabellen voneinander zu unterscheiden. Datentabellen werden dann
als Tabellen angekündigt und ggf. entsprechend auch die einzelnen Zellen,
während Layout-Tabellen einfach nicht erwähnt werden.
Mit dem 'summary'-Attribut hat man gute Chancen, in das Raster
"Daten-Tabelle" zu fallen. Aber was nützt einem Blinden die Ansage
"Layout-Tabelle"? Selbst die räumliche Anordnung, die manche breit darin
auswälzen, ist uninteressant für jemanden, der den Inhalt letztlich
sowieso nur hört, was ja eine rein lineare Aufnahme.

Post by Irmgard Schwenteck
Summary="" oder weglassen?

Bei Layout-Tabellen unbedingt weglassen.

Thomas

[Rainer Huebenthal]

Moin

Post by Erik Griffin
<table cellpadding="0" cellspacing="0" border="0" class="content" summary="layout">
<tr>
<td align="right" valign="middle" class="left"><div>1</div></td>
<td align="center" valign="middle" class="middle"><div>2</div></td>
<td align="left" valign="middle" class="right"><div>3</div></td>
</tr>
</table>

Nein. Wozu soll zb das div da sein?

Post by Erik Griffin
ja das wäre ja dann in meinem Fall nicht so ;)

Aber du benutzt divs, welche vollkommen ueberfluessig sind.
das div Element ist ein Container, um verschiedene andere
Elemente logisch zusammenzufassen. Es ist nicht da, weil man
das mit CSS so schoen in der Gegend herumschieben kann und es
ist auch nicht da damit man es an jeder Ecke wahllos einfuegt.

cu
Rainer

[Erik Griffin]

Moin

Post by Erik Griffin
So gut wie jeder hier sagt, dass man keine Tabelle benutzen soll
um damit ein Layout hinzufriemeln...

Wer ist denn jeder?

hm... schau Dir doch bitte die Antworten an, wenn jemand sein Layout
mit Tabellen realisiert.

cu
Rainer

mfg
Erik

[Rainer Huebenthal]

Moin

Post by Erik Griffin

Wer ist denn jeder?

hm... schau Dir doch bitte die Antworten an, wenn jemand sein Layout
mit Tabellen realisiert.

Was meinst du was ich hier mache? Und ich an deiner Stelle
wuerde die Postings mal genauer lesen, denn es werden nicht
prinzipiell Tabellenlayouts verteufelt. Aber das ganze hatten
wir auch schon mal vor kurzem in dciwpm wo dies jemand
behauptet hatte und sein Layout, welches spielend in eine
Tabelle gepasst haette ind eine arge div-Suppe verwandelt hat.
Denn genau das wird daraus, wenn man Tabellen zwanghaft mit
dovs nachzubauen versucht. Man erreichts so gut wie nichts,
nur weil man glaubt, statt tds und trs nun divs verwenden zu
muessen. Wenn man eine Anordnung in spalten und Zeilen hat,
dann ist das eine Tabelle. Aber nur weil in den Zellen
aufeinmal Naviuagtion und "Inhalt" enthalten ist, darf es
keine Tabelle sein? Ein Tabelle ist ein logisches Konstrukt,
welches sich nicht fuer seinen Inhalt interessiert.

Kritisiert wird hier allenfals die Verwendung von Tabellen,
wenn diese unsinnig sind, aber nicht weil sie einen bestimmten
Inhalten haben.

cu
Rainer

[Alexander Clauss]

Post by Erik Griffin
So gut wie jeder hier sagt, dass man keine Tabelle benutzen soll
um damit ein Layout hinzufriemeln...

Aber niemand sagt, daß Du jetzt mit DIVs "layouten" sollst. Das ist
letztendlich nämlich genauso "böse" (und birgt am Ende deutlich mehr
potentielle Probleme, als das alte Tabellen-Layout).

[Gerhard Rinnberger]

Dann wirst Du sehen, das sich der echte Bereich über den linken und
mittleren Bereich drüberweg schiebt - und genau das will ich nicht. Das
ist der momentane Knackpunkt bei der ganzen Sache.

Das Phänomen tritt doch erst bei praxisfernen Fensterbreiten auf. Liquid
Design in Ehren aber damit kann man doch wirklich leben.

Gerhard

[Thomas Scholz]

Post by Erik Griffin
----------------------------------------
| | | |
| width: 25% | width: 50% | width: 25% |
| | | |
----------------------------------------

Wenn die drei Boxen gleich hoch sein sollen und die mittlere nicht genau
doppelt soviel Text wie eine der beiden seitlichen Boxen enthält, dann muß
ja wohl eine tabellarische Beziehung (eine, die sich optimal durch
parallele Wahrnehmung der Inhalte erschließt) bestehen. Dann nimmst du
besser eine Tabelle.
Besteht diese Beziehung jedoch nicht, und enthalten die beiden seitlichen
Boxen eigentlich viel zu wenig Text, um bis nach unten gefüllt zu werden,
ist der Nachbau eines stinknormalen Tabellenlayouts dein Problem. Denn das
ist ziemlich sinnfrei. Warum den Text in der Mitte nicht einfach unter den
Boxen nach links und rechts sich ausbreiten und an die Fensterbreite
anpassen lassen?

Zudem sind Breitenangaben in Prozent alles andere als praktisch: Wenn eine
der beiden schmalen Boxen ein Wort enthält, das eigentlich zu breit für
den erlaubten Raum ist, bekommst du sehr sicher Überlagerungen oder
horizontale Scrollbalken.

Post by Erik Griffin
body {
width:100%;
height:100%;
}

'height:100%' bezieht Opera 6 auf den Viewport; der beim ersten Laden
nicht zu sehende Rest wird dann als 'overflow' dargestellt und der
Hintergrund für 'body' endet genau dort, wo sich anfangs der untere
Fensterrand befunden hat.

Post by Erik Griffin
.links {

Vergib die Namen nach der Funktion der Boxen, nicht nach ihrer
Präsentation.

Post by Erik Griffin
border-width: 1px;
border-style: solid;

man shorthand

border:1px solid

Post by Erik Griffin
Wie kann ich die div's nebeneinander anordnen, so dass das
so wie im oberen Beispiel aussieht.

<http://css-discuss.incutio.com/?page=ThreeColumnLayouts>

Thomas