Ohne Tabellen Inhalte sauber nebeneinander anordnen?

[uepselon]

Hallo,

ich bin gerade dabei eine Seite ohne Tabellen als Layout-Hilfe zu erstellen.

Folgendes Problem:

<div>Inahlt</div> <div>Inahlt2</div> <div>Inahlt3</div>

Sollte im Browser so aussehen:

Inhalt Inhalt2 Inhalt3

Macht es aber nicht, sondern da siehts so aus:

Inhalt
Inhalt2
Inhalt3

Ist auch logisch da bei div's immer ein neuer Absatzt erfolgt.
Man könnte jetzt mit CSS und position:relative rumwerkeln und Werte für top -XYZ und für left +ABC setzen. Das ist aber recht hässlich wie ich finde, da bei einer Änderung des Inahlts, die Pixelangaben immer wieder mit geändert werden müssen.

Wie kann man mit CSS Inhaltsbereiche sauber nebeneinander darstellen ohne wild mit Pixelangaben rumzuwerkeln?

Bei Tabellen besteht das Problem ja nicht, da es Spalten gibt.
Aber Tabellen will ich wie gesagt nicht fürs Layout verwenden.

Gruß

ueps

[Andreas]

Hallo,

Sorry, ich kann Dir da leider nicht wirklich eine Lösung vorschlagen, mich würde nur interessieren , WARUM du keine Tabellen benutzen möchtest ? Ich meine das ist doch das sauberste, was man machen kann, weil sich die Tabellen ( unter anderem, wenn man das auch so möchte ) an die Seitenauflösung des Browsers anpassen ...... insofern, ist nur so reine neugier ;-)

Gruss
Andreas

[uepselon]

Hi,

Sorry, ich kann Dir da leider nicht wirklich eine Lösung vorschlagen, mich würde nur interessieren , WARUM du keine Tabellen benutzen möchtest ? Ich meine das ist doch das sauberste, was man machen kann, weil sich die Tabellen ( unter anderem, wenn man das auch so möchte ) an die Seitenauflösung des Browsers anpassen ...... insofern, ist nur so reine neugier ;-)

Ja, Tabellen haben auch ein paar kleine Vorzüge das hast du richtig erkannt. Aber eben auch ein paar Nachteile.

So ist es viel einfacher das Layout umzustellen, wenn keine Tabellen verwendet werden.

Tabellen legen das Layout für eine Seite direkt fest, man kann zwar auch ein paar CSS Optionen dazu nutzen aber hat eben nicht die Freiheit über ein einzelnes Style File, das Layout an verschiedene Bedürfnisse anzupassen. So gibt es z.b. Textbrowser die keine Tabellen verstehen und somit mit einem einfachen Layout immer noch realtiv gut aussehen.

Will man keine Frames verwenden und trotzdem eine "feste" Navigation haben, kann man das auch nur mit div's (o.ä.) machen und nicht mit Tabellen.

Tabellen werden mit der Zeit auch immer komplexer und ineinander Verschachtelt, was die größe des HTML Files steigert und die Übersichtlichkeit verringert.

Gruß

ueps

[Fabian Transchel]

Hallo,

mahlzeit

ich bin gerade dabei eine Seite ohne Tabellen als Layout-Hilfe zu erstellen.

Folgendes Problem:

<div>Inahlt</div> <div>Inahlt2</div> <div>Inahlt3</div>

Sollte im Browser so aussehen:

Inhalt Inhalt2 Inhalt3

Macht es aber nicht, sondern da siehts so aus:

Inhalt
Inhalt2
Inhalt3

Ist auch logisch da bei div's immer ein neuer Absatzt erfolgt.
Man könnte jetzt mit CSS und position:relative rumwerkeln und Werte für top -XYZ und für left +ABC setzen. Das ist aber recht hässlich wie ich finde, da bei einer Änderung des Inahlts, die Pixelangaben immer wieder mit geändert werden müssen.

Wie kann man mit CSS Inhaltsbereiche sauber nebeneinander darstellen ohne wild mit Pixelangaben rumzuwerkeln?

mhh, ich will jetzt garnicht mit absoluter positionierung anfangen, denn das willst du offenbar nicht, ausserdem wär das "pixelworx"

Bei Tabellen besteht das Problem ja nicht, da es Spalten gibt.
Aber Tabellen will ich wie gesagt nicht fürs Layout verwenden.

spiel ein wenig mit margins rum.du könntest, wenn du den div's ne feste breite gibst (musst du zwangsläufig, sonst wird das nebeneinander müll) per margin's und top:0px; (position:absolute;) zu prozentangaben kommen.
ich habs noch nie ausprobiert, aber wenn du das erste div mit 20% hast, sollte left:21% für das zweite doch funktionieren, oder?

interessante problemstellung, man könnte auch die tabellen-features von css nutzen, was zwar dann vom code her sauber ist, aber ne tabelle ;)

Gruß

ueps

Fabian

[TOM]

Hi

mhh was bringt margin und widht, wenn ein div immer nen <br> verursacht?

Naja mir fällt da nur ein, <Span> zu benutzen...

MfG TOM

[Fabian Transchel]

Hi

mahlzeit

mhh was bringt margin und widht, wenn ein div immer nen <br> verursacht?

wieso, wenn ich sie nebeneinander haben will, muss ich sie nur "verschieben", und das ist mit css ja nun wirklich kein problem...

Naja mir fällt da nur ein, <Span> zu benutzen...

hat keinen zweck, ueps braucht einen block drunhereum, und da ist div nun mal am besten

MfG TOM

Fabian

[TOM]

Mahlzeit nommal :)

wieso, wenn ich sie nebeneinander haben will, muss ich sie nur "verschieben", und das ist mit css ja nun wirklich kein problem...

... was aber zu position:absolute; hinausläuft oder?

MfG TOM

[Fabian Transchel]

Mahlzeit nommal :)

thx, ich geh gleich futtern ;)

wieso, wenn ich sie nebeneinander haben will, muss ich sie nur "verschieben", und das ist mit css ja nun wirklich kein problem...

... was aber zu position:absolute; hinausläuft oder?

ja, das IMO wohl auf jeden fall, bloß man muss es nicht "festnageln", wie man immer so schön sagt, wenn man pixel nimmt. mit prozentangaben geh das IMO viel, auch wenn ich es selten selber mache.

MfG TOM

Fabian

[uepselon]

Ahoi,

thx, ich geh gleich futtern ;)

me too.

... was aber zu position:absolute; hinausläuft oder?

ja, das IMO wohl auf jeden fall, bloß man muss es nicht "festnageln", wie man immer so schön sagt, wenn man pixel nimmt. mit prozentangaben geh das IMO viel, auch wenn ich es selten selber mache.

Das mit den Prozentangaben ist so eine Sache, width und left lassen sich mit % Werten gut definieren und das ist dann auch nicht mehr "festgenagelt". Das Problem ist das Verschieben der div's nach oben um Sie nebeneinander zu haben. Wenn da % Angaben verwendet werden sieht es bei jeder Browsergröße anders aus. Nimmt man Pixel, nagelt man die div's fest und die flexibilität ist dahin.

span's gehen wie gesagt nicht, da ich einen Block brauche.

Man könnte auch mit abolute den Abstand von oben auf 10 Pixel oder Ä. festsetzten, wäre erstmal nicht so schlimm. Das Problem ist dann aber, das die Inhaltsblöcke in einem Grunddesign stehen, und mit absolute dann dieses Design wieder überdecken:

|--------------------|

Titel
Block1 Block2 Block3
----------------------

So solls mal aussehen.

Für Titel und den uneteren Gesamtblock habe ich div's genommen.
Für die Inhaltsblöcke Suche ich eben noch eine Lösung

Gruß

ueps

[Fabian Transchel]

Ahoi,

mahlzeit

thx, ich geh gleich futtern ;)

me too.

gut, bei mir gibt's spaghetti, guten hunger dir auch ;)

... was aber zu position:absolute; hinausläuft oder?

ja, das IMO wohl auf jeden fall, bloß man muss es nicht "festnageln", wie man immer so schön sagt, wenn man pixel nimmt. mit prozentangaben geh das IMO viel, auch wenn ich es selten selber mache.

Das mit den Prozentangaben ist so eine Sache, width und left lassen sich mit % Werten gut definieren und das ist dann auch nicht mehr "festgenagelt". Das Problem ist das Verschieben der div's nach oben um Sie nebeneinander zu haben. Wenn da % Angaben verwendet werden sieht es bei jeder Browsergröße anders aus. Nimmt man Pixel, nagelt man die div's fest und die flexibilität ist dahin.

jepp. allerdings macht es IMO nix, wenn du sie _vertikal_ festnagelst, denn die flexibilität bleibt, denn das schlimmste was dir passieren kann ist ein vertikaler scrollbalken, mitunter gibt's sowas auch auf anderen seiten ;)

span's gehen wie gesagt nicht, da ich einen Block brauche.

ja, das weißman, wenn man css kenn ;)

Man könnte auch mit abolute den Abstand von oben auf 10 Pixel oder Ä. festsetzten, wäre erstmal nicht so schlimm. Das Problem ist dann aber, das die Inhaltsblöcke in einem Grunddesign stehen, und mit absolute dann dieses Design wieder überdecken:

absolute bezieht sich immer auf das element darüber. wenn da also was verzerrt, mach noch einen block drumrum, von dem aus du ausrichtest.

|--------------------|

Titel
Block1 Block2 Block3

---

So solls mal aussehen.

ja, prädestinier für tabellen (*scnr*), hast du dir mal gedanken gemacht über die css-lösung für tabellen? würde das nicht auch gehen? (es sind keine wirklichen tabellen, deswegen ständen die divs untereinander, wenn der browser kein css kann...)

Für Titel und den uneteren Gesamtblock habe ich div's genommen.
Für die Inhaltsblöcke Suche ich eben noch eine Lösung

soweit klar. wie oben angedacht, um alles drumrum noch einen block?

Gruß

ueps

Fabian

[Margarete Palffy]

Hallo ueps,

Du könntest es mal mit float:left; versuchen, und das mit Angaben zur Breite kombinieren. Ich kann's jetzt grade nicht testen, könnte aber klappen. Nur so eine Idee...

Herzliche Grüße,
Meg

[uepselon]

Hi Meg,

Du könntest es mal mit float:left; versuchen, und das mit Angaben zur Breite kombinieren. Ich kann's jetzt grade nicht testen, könnte aber klappen. Nur so eine Idee...

Vielen Dank, also manchmal sieht man echt den Wald vor lauter Bäumen nicht. Das ganze funktioniert prächtig :-)

Gruß

ueps

[herbalizer]

Servus,

ich hab da mal was vorbereitet (unter den Tisch greif) http://rcswww.urz.tu-dresden.de/~rs324721/spalten.html jetestet mit Netscape6.1, Mozilla1, Opera6, Konqueror3

Gruß Herbalizer

[uepselon]

Hi,

ich hab da mal was vorbereitet (unter den Tisch greif) http://rcswww.urz.tu-dresden.de/~rs324721/spalten.html jetestet mit Netscape6.1, Mozilla1, Opera6, Konqueror3

Vielen Dank für die Mühe,

sieht in den neuen Browsern nett aus, nur im Problemkind N4.x liegt alles übereinander. Hab aber inzwischen eine Lösung mit float:left gefunden.

Gruß

ueps

[Thomas J.]

Tag auch

Es geht übrigens auch ohne den Container:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boxtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="margin:0; padding:0">
<div style="border:1px solid red; position:absolute; top:10px; left:4%; width:28%">
<p style="font-size:2em; margin:0; padding:0; line-height:300px">text text text text text text</p>
</div>
<div style="border:1px solid red; position:absolute; top:10px; left:36%; width:28%">
<p style="font-size:2em; margin:0; padding:0; line-height:300px">text text text text text text</p>
</div>
<div style="border:1px solid red; position:absolute; top:10px; left:68%; width:28%">
<p style="font-size:2em; margin:0; padding:0; line-height:300px">text text text text text text</p>
</div>
</body>
</html>

Thomas J.

[herbalizer]

Hi!

Richtig! Aber die Lösung sollte ja vermieden werden. Die 3 Spalten würde man ohne Container nicht zentriert bekommen.

Gruß Herbalizer

[Thomas J.]

Tag nochmal

Die 3 Spalten würde man ohne Container nicht zentriert bekommen.

Wieso nicht?
4 + 28 + 4 + 28 + 4 + 28 + 4 sind auch 100%. Die Werte lassen sich je nach Geschmack ändern. Aber solange alles bei Prozentwerten bleibt, läßt sich das auch ohne Container zentrieren (etwas Rechenarbeit vorausgesetzt).

Thomas J.