3 boxen, davon 2 untereinander neben der anderen OHNE Abstaende

[ispott]

Hallo,

also ich versuche grade ein simpeles Layout zu erstellen.

Die Seite soll aus 3 Teilen bestehen, Navi (links, gesammte Hoehe), Kopzeile (oben, gesammte Breite - Breite der Navi) und Inhalt (rechts unten, Rest der Seite je nach Aufloesung/Fenstergroesse)

__Die Breite der Navi soll sich nach dem laengsten Wort an einem Stueck richten.__

Ich habe es jetzt mit Framesets getestet mit dem Resultat, dass mich die Scrollbar an der Navi nervt, da sie mitten im Bild ist und man die nur im IE nach links packen kann und da auch nur mit ner Holzhammerloesung.
Die Breite der Navi nach dem laengsten Wort zu richten ist hier auch nicht drin, aber dafuer kann man wenigstens horizontal scrollen ohne dass das Design leidet.
siehe: http://blog.pwnroom.de/framesettest/

Der 2. Anlauf war mit Tabellen (die fuer mich "normale" Herangehensweise), hierbeit funktioniert auch alles in allen Browsern so wie es soll, allerdings vorbei an allen aktuellen Standarts.
siehe: http://blog.pwnroom.de/tabelletest/

Ich wollte jetzt aus Spass nochmal versuchen das in CSS zu realisieren, ich habe damit allerdings wenig Erfahrungen, ich habe das bisher nicht fuer die Positionierung von Inhalten genutzt.
Der Versuch sieht bisher so aus: http://blog.pwnroom.de/csstest/

Im IE ist jetzt zwischen der navi und den 2 boxen rechts ein Abstand den ich nicht begreife, ALLE margins stehen auf 0.
Im FF werden die Hintergrundgrafiken der jeweiligen Boxen herrausgerissen.
Wenn ich die Inhalt- und die Titel-box wieder in eine Box packe der ich "float: left;" eintrichter dann funktioniert es im IE einwandfrei und im FF nur wenn der Text in der Inhaltsbox nicht zu lang wird, der moechte den da gerne auf 100% Breite des bodys haben, das heisst, die beiden Boxen werden unter die Navibox geschoben.
siehe hier: http://blog.pwnroom.de/csstest2/
und hier: http://blog.pwnroom.de/csstest3/
(den blauen Rand rechts hatte ich irgendwan im Laufe des Abends schonmal weg, den muss ich vorhin dazu verschlimmbessert haben.)

Hier die Links zu den Grafiken (Tabelle & CSS) falls das jemand saugen will zum testen, stehen aber auch im Quelltext.
http://blog.pwnroom.de/csstest3/navibgt.png
http://blog.pwnroom.de/csstest3/headerbgt.png

Ich waere fuer jede Hilfe dankbar, der Kram will jedenfalls nicht so wie ich will und ich sitze seit 21:40 daran den Kram mit CSS ans Laufen zu bringen, es ist jetzt 3:51...
afaik bin ich fuer jede Hilfe dankbar die nicht Google oder Sufu heisst, das habe ich bereits mehrmals versucht heute...

[ChrisB]

Hi,

afaik bin ich fuer jede Hilfe dankbar die nicht Google oder Sufu heisst, das habe ich bereits mehrmals versucht heute...

Arbeite erst mal das hier durch, damit du ein Grundverständnis für den Aufbau von Spaltenlayouts mit CSS bekommst:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Und bist du sicher, dass du weisst, was AFAIK bedeutet? Sieht so wie du es verwendet hast nicht danach aus :-)

MfG ChrisB

[stewe]

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

"(...)und der kommende IE 7(..)" - bedarf wohl eines kleinen Updates :)

gruss

stewe

[ispott]

Hi,

afaik bin ich fuer jede Hilfe dankbar die nicht Google oder Sufu heisst, das habe ich bereits mehrmals versucht heute...

Arbeite erst mal das hier durch, damit du ein Grundverständnis für den Aufbau von Spaltenlayouts mit CSS bekommst:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Und bist du sicher, dass du weisst, was AFAIK bedeutet? Sieht so wie du es verwendet hast nicht danach aus :-)

MfG ChrisB

Also soll mir diese Antwort jetzt sagen, dass es nicht moeglich ist die Boxen so variabel zu positionieren?
Ich habe den Text grade nochmal gelesen, er bot mir allerdings wenig Neuigkeiten.

Das Problem ist die Position der Inhaltsbox, weil diese variabel ist, kann ich den inhalt nicht durch margin oder position irgendwo hin zwingen.

Dann habe ich noch ein Problem mit der Breite der Navibox, wenn ich dort einen laengeren Satz reinschreibe dann nimmt die Navibox auch eiskalt 100% des Bildschirms ein und draengt die anderen Boxen nach unten.
eine Angabe von width in % bringt auch nichts, weil dann immer bei maximal so und so viel % gebrochen wird, wenn ein einzelnes Wort (ohne Leerzeichen) mehr als den angegebenen % Wert annimmt wird es aus der Box herrausgeschrieben...

Die Box soll 15% der Breite des bodys einnehmen solange kein laengeres Wort drin steht, dann soll sie so breit sein, dass das Wort passt und nach dieser Breite soll sich dann die Position von Titel und Inhalt richten, und vor allem sollen Titel und Inhalt daneben erscheinen, wobei bei Inhalt auf jeden Fall laengere Saetze vorkommen werden die automatisch nach der ja variablen Breite und Position der Box gebrochen werden sollen.
Wenn die Navi und die Breite von Inhalt und Titel breiter als das Anzeigefenster werden sollten, soll sich ein horizontaler Scrollbalken oeffnen.
Ich moechte also genau das Verhalten erreichen was in dem Tabellenbeispiel oben gegeben ist, nur halt ohne Tabellen.

Mich beschleicht grade das Gefuehl dass das mit CSS ohne JS und ohne gegen W3C zu verstossen garnicht moeglich ist. (ausser im IE)

[ChrisB]

Hi,

bitte sinnvoll zitieren, nicht einfach alles!

Das Problem ist die Position der Inhaltsbox, weil diese variabel ist, kann ich den inhalt nicht durch margin oder position irgendwo hin zwingen.

Wieso musst du den Inhalt überhaupt positionieren, wenn du einfach das Menü floaten lässt?

Dann habe ich noch ein Problem mit der Breite der Navibox, wenn ich dort einen laengeren Satz reinschreibe dann nimmt die Navibox auch eiskalt 100% des Bildschirms ein und draengt die anderen Boxen nach unten.

Wie wahrscheinlich ist denn das, dass du derart lange Wortkonstrukte in deinen Navigation einbaust?

eine Angabe von width in % bringt auch nichts, weil dann immer bei maximal so und so viel % gebrochen wird, wenn ein einzelnes Wort (ohne Leerzeichen) mehr als den angegebenen % Wert annimmt wird es aus der Box herrausgeschrieben...

Die Box soll 15% der Breite des bodys einnehmen solange kein laengeres Wort drin steht, dann soll sie so breit sein, dass das Wort passt

Dann willst du also eine Mindestbreite angeben.

Wenn die Navi und die Breite von Inhalt und Titel breiter als das Anzeigefenster werden sollten, soll sich ein horizontaler Scrollbalken oeffnen.

Das geht, wenn du die Navigation floatest, nur dann, wenn das beide umgebende Element entsprechend breit ist.

Ich moechte also genau das Verhalten erreichen was in dem Tabellenbeispiel oben gegeben ist, nur halt ohne Tabellen.

Exakt das Verhalten von Tabellen bekommst du mit CSS höchstens dann hin, wenn du die Elemente per display-Eigenschaft als Tabellenelemente formatierst.

Es ist selten sinnvoll, von einem Tabellenlayout auf CSS umzusteigen, und dabei aber 100%ig das gleiche Verhalten erzielen zu wollen. Dieser Ansatz muss fast zwangsläufig scheitern.

Überlege dir also lieber, wo du bereit bist kleine Abstriche zu machen, die dann eine sinnvolle Umsetzung des ganzen per CSS erlauben.

MfG ChrisB

[ispott]

bitte sinnvoll zitieren, nicht einfach alles!

ok

Das Problem ist die Position der Inhaltsbox, weil diese variabel ist, kann ich den inhalt nicht durch margin oder position irgendwo hin zwingen.

Wieso musst du den Inhalt überhaupt positionieren, wenn du einfach das Menü floaten lässt?

nunja das habe ich ja versucht, allerdings ist die Inhaltsbox ja eine mit Text den ich nicht fest durch Absaetze formatieren will und die nimmt erst 100% der Breite des uebergeordneten Elements (in dem Beispiel Body) ein (also rutscht dann unter die Navi) bevor die einen automatischen Umbruch macht, ich kann der ja nicht per width oder margin sagen wie gross die sein soll weil ja die Navi die links daneben ist ne variable Breite hat.

Dann habe ich noch ein Problem mit der Breite der Navibox, wenn ich dort einen laengeren Satz reinschreibe dann nimmt die Navibox auch eiskalt 100% des Bildschirms ein und draengt die anderen Boxen nach unten.

Wie wahrscheinlich ist denn das, dass du derart lange Wortkonstrukte in deinen Navigation einbaust?

eher unwahrscheinlich, allerdings gilt es dennoch alle Bugs abzufangen, auf den hier koennte ich aber auch zur Not verzichten.

eine Angabe von width in % bringt auch nichts, weil dann immer bei maximal so und so viel % gebrochen wird, wenn ein einzelnes Wort (ohne Leerzeichen) mehr als den angegebenen % Wert annimmt wird es aus der Box herrausgeschrieben...

Die Box soll 15% der Breite des bodys einnehmen solange kein laengeres Wort drin steht, dann soll sie so breit sein, dass das Wort passt

Dann willst du also eine Mindestbreite angeben.

jein, die min-width bewirkt ja nur das die Box minimal so gross sein darf wie angegeben, Sie kann dann allerdings noch beliebig gross werden.
Das heisst wenn ich da z.b. reinschreibe: "dies ist ein navibutton der aus einem Satz besteht", dann wird die Box so breit wie dieser Satz, sie soll aber bei maximal 15% Breite die Zeilen brechen, wenn es kein Wort gibt was groesser als die 15% Breite ist.

Wenn die Navi und die Breite von Inhalt und Titel breiter als das Anzeigefenster werden sollten, soll sich ein horizontaler Scrollbalken oeffnen.

Das geht, wenn du die Navigation floatest, nur dann, wenn das beide umgebende Element entsprechend breit ist.

das hatte ich befuerchtet, naja das waere eh nur der Fall wenn es 2 sehr lange Worte geben wuerde.

Ich moechte also genau das Verhalten erreichen was in dem Tabellenbeispiel oben gegeben ist, nur halt ohne Tabellen.

Exakt das Verhalten von Tabellen bekommst du mit CSS höchstens dann hin, wenn du die Elemente per display-Eigenschaft als Tabellenelemente formatierst.

Es ist selten sinnvoll, von einem Tabellenlayout auf CSS umzusteigen, und dabei aber 100%ig das gleiche Verhalten erzielen zu wollen. Dieser Ansatz muss fast zwangsläufig scheitern.

Überlege dir also lieber, wo du bereit bist kleine Abstriche zu machen, die dann eine sinnvolle Umsetzung des ganzen per CSS erlauben.

naja also das Design ist ja nichts aufregendes, ich koennte das Hintergrundbild ja auch anders zerlegen, aber das muss doch umsetzbar sein!

Ich meine man denkt sich doch erst das Design aus und uebelegt dann wie man es im Code umsetzt anstatt sich Code auszudenken in den man dann ein Design bastelt.

Es ist auch nicht so dass ich jetzt vom Tabellenlayout ins CSS Layout wechseln will, sondern eher so, dass ich die Hintergrundgrafik mit GIMP erstellt habe und nun ausprobiere wie es sich mit den 3 gaengigen Varianten umsetzen laesst daraus eine Seite zu bauen (bzw das Grundgeruest einer Seite), und was aufregendes ist das wirklich nicht.

Das man exakt das gleiche Verhalten nicht erreicht ist mir klar, aber halt ein paar wesentliche Punkte (wie in dem Beitrag hier weiter oben beschrieben)

OT:
Ich will auch garnicht ueber CSS herziehen, ich sehe die vielfaeltigen Moeglichkeiten durchaus ein, aber ich verstehe den Grund nicht warum man es nicht mit Tabellen kombinieren darf um Standartkonform zu bleiben.
CSS in Kombination mit Tabellen erlaubt Darstellungstechnisch imho alles was man sich erdenken kann.

[ChrisB]

Hi,

CSS in Kombination mit Tabellen erlaubt Darstellungstechnisch imho alles was man sich erdenken kann.

Ich empfinde im Gegenteil Tabellen als sehr einschränkend beim Layouten, selbst wenn sie mit CSS formatiert werden. Schon durch den Einsatz der Tabelle zwingt man alles in ein Kasten-Schema, aus dem nur schwer wieder auszubrechen ist.

MfG ChrisB

[ispott]

Hi,

CSS in Kombination mit Tabellen erlaubt Darstellungstechnisch imho alles was man sich erdenken kann.

Ich empfinde im Gegenteil Tabellen als sehr einschränkend beim Layouten, selbst wenn sie mit CSS formatiert werden. Schon durch den Einsatz der Tabelle zwingt man alles in ein Kasten-Schema, aus dem nur schwer wieder auszubrechen ist.

MfG ChrisB

Ich meinte nicht CSS formatierte Tabellen, sondern beide Methoden zu kombinieren, also Tabellen teilweise CSS zu formatieren und teilweise mit Containern zu arbeiten um sich die Vorteile von beiden Varianten zu nutze machen zu koennen.

Wie wuerde ich das Problem mit der Box die Woerter brechen soll ab der width die dem laengsten Wort entspricht denn ohne Tabellen oder JS loesen koennen?
Mit PHP vl noch, wenn ich von ner festen Schriftgroesse ausgehe und die laenge des Worts errechne, aber ist auch eher so als ob man sich ne Pistole an den Kopf haelt um sich vom Luftzug der Kugel die Haare trocknen zu lassen, das gleiche wuerde fuer JS gelten.

Ist das denn komplett unzulaessig Tabellen fuer die Darstellung von was anderem als tabellarisch geordnetem Inhalt zu nutzen?

[ChrisB]

Hi,

ich bat dich bereits, sinnvoll zu zitieren!

Wie wuerde ich das Problem mit der Box die Woerter brechen soll ab der width die dem laengsten Wort entspricht denn ohne Tabellen oder JS loesen koennen?

Gar nicht, weil das ein in sich widersprüchliches „Problem“ ist.

Entweder willst du das längsteWort ungebrochen haben - oder irgendetwas anderes. Dann musst du aber genauer definieren, was dieses etwas anderes ist.

Ist das denn komplett unzulaessig Tabellen fuer die Darstellung von was anderem als tabellarisch geordnetem Inhalt zu nutzen?

Der „reinen Lehre“ nach - Ja.

MfG ChrisB

[apsel]

Om nah hoo pez nyeetz, ispott!

Besorge dir Firefox und Firebug, öffne die Seite www.billiger-im-urlaub.de (deine Beschreibung trifft in etwa auf mein Design zu) oder eine beliebige andere die deinen Layout-Vorstellungen entspricht und analysiere, wie die anderen das umgesetzt haben (Rechtsklick --> Element untersuchen).

Matthias

[EKKi]

Mahlzeit ispott,

Die Seite soll aus 3 Teilen bestehen, Navi (links, gesammte Hoehe), Kopzeile (oben, gesammte Breite - Breite der Navi) und Inhalt (rechts unten, Rest der Seite je nach Aufloesung/Fenstergroesse)

Ich empfehle Dir die <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>.

MfG,
EKKi