CSS Stylesheets zur breitendefinition.

[HiddenGhost]

Gibt es eine Möglichkeit, ein Tabellenlayout auf dynamische Breite einzustellen, jedoch eine max Breite von 800 px zuzulassen?

Mein Problem ist im jetzigen Status, dass das layout nur aussiieht und funktioniert, wenn die Tabelle 800px breit ist. Da ich das am liebsten aber ohne Scrollleisten regeln würde, sollte es da doch eine andere Lösung geben.

Die Page ist erstmal auf http://www.ewetel.net/~guenter.kayser/html/index.html geparkt und stellt im Moment nur das Layout dar.

WIe ihr seht habe ich schon versucht mit max-width zu arbeiten, jedoch hat das keinen Erfolg gebracht. Wie könnte ich das alternativ anstellen?

[Nase]

Könntest einfach ein transparentes Gif in deine Seite einbinden. Das dann 1px hoch und 800px breit. Problem gelöst :).

[HiddenGhost]

ich kann es auch mit css und sauberm code auf 800px begrenzen. ich will aber, dass sich die tabellen bei kleineren auflösungen mitskalieren, bei großen aber nach 800px abschließen.

[Nase]

Ups, hab mich verlesen. Werde mal ein paar Sachen ausprobieren.

Übrigens sieht deine Page recht merkwürdig aus. Es sei denn, der große schwarze Kasten gehört dazu und die Sidebar soll ca. 90% einnehmen.

[imagine]

Du musst deiner Tabelle das Attribut max-width: 800px; verpassen, nicht dem Inhalt der Tabelle. Problem: Der IE kennt dieses CSS-Attribut nicht und skaliert die Tabelle weiterhin auf Browserfensterbreite.
Da du aber ein 800px breites Bild in deiner Tabelle verwendest wird diese sowieso nicht kleiner werden.

Unabhängig davon: Wieso willst du unbedingt Tabellen verwenden um Inhalt auf deiner Webseite zu plazieren? Neben der mangelnden Skalierbarkeit sind diese Tabellen nämlich nur so lange praktisch wie man sie mit einem modernen Browser, der mit verschachtelten Tabellen umgehen kann, auf einem Computermonitor mit ausreichender Auflösung bzw im Vollbild betrachtet. In Textbrowsern, Screenreadern oder auf Druckern und Handhelds sieht das ganze dann nicht mehr so schön aus. Mal ein Beispiel mit Lynx -> http://www.delorie.com/web/lynxview.cgi?url=http://www.ewetel.net/~guenter.kayser/html/index.html

[HiddenGhost]

Ich habe mich nachdem ich das Layout erstellt habe näher mit CSS beschäftigt und finde es gar nicht so komplex wie ich daran gegangen bin.
Jedoch weiß ich nicht, wie man weg vom Tabellenlayout kommt. Mittlerweile dämmert mir auch, das mein konzept einfahc überholt ist und mangels flexibilität auch nicht viel mehr als ein erster Versuch gewesen ist, hmtl mit css zu verbinden.

Was muss ich wissen, um vom Tabellenstil wegzukommen?

edit: in dem anderen Thread habe ich von deiner Beispielseite gelesen. Kann ich mit diesen CSS Boxen auch mit mehreren Ebenen arbeiten?
edit2: Sollte ich im Grunde versuchen, mein Layout in ein Xhtml dokument zuwandeln, dessen äußere Form über gerade diese Stylesheets definiert wird?

http://www.stichpunkt.de/css/css.html

[HiddenGhost]

Original geschrieben von Nase
Ups, hab mich verlesen. Werde mal ein paar Sachen ausprobieren.

Übrigens sieht deine Page recht merkwürdig aus. Es sei denn, der große schwarze Kasten gehört dazu und die Sidebar soll ca. 90% einnehmen.

Das Problem ist, dass ich erst mit Bildbearbeitung gespielt habe und es dann versucht habe zu portieren... dat ergebnis ist die fixe breite des Headers und durhc Bildrecycling auch die fixe Breite des footers.

Ich nehme an du hast ne Auflösung von 1600x1200, widesreen oder Multimonitoring am laufen, denn ohne eine max breite von 800px sieht meien page zum kotzen aus.

[Nase]

Original geschrieben von HiddenGhost
Das Problem ist, dass ich erst mit Bildbearbeitung gespielt habe und es dann versucht habe zu portieren... dat ergebnis ist die fixe breite des Headers und durhc Bildrecycling auch die fixe Breite des footers.

Ich nehme an du hast ne Auflösung von 1600x1200, widesreen oder Multimonitoring am laufen, denn ohne eine max breite von 800px sieht meien page zum kotzen aus. So sieht es aus.

[HiddenGhost]

so sollte es aussehen ;)

http://www.ewetel.net/~guenter.kayser/bilder/interface5.jpg

hab mal den aktuellsten code hoch geladen:
http://www.ewetel.net/~guenter.kayser/html/index.html

Mozilla 7.2, Firbird 0.8 und Opera bis 7.5 zeigen das problemlos an. IE hab ich im Moment nicht zu verfügung!

[imagine]

Original geschrieben von HiddenGhost
edit: in dem anderen Thread habe ich von deiner Beispielseite gelesen. Kann ich mit diesen CSS Boxen auch mit mehreren Ebenen arbeiten?
edit2: Sollte ich im Grunde versuchen, mein Layout in ein Xhtml dokument zuwandeln, dessen äußere Form über gerade diese Stylesheets definiert wird?

http://www.stichpunkt.de/css/css.html

Ob du XHTML oder HTML verwendest spielt hier in diesem Fall keine Rolle. XHTML ist ein von XML abgeleiteter HTML-Clone, also genauso mächtig. Hauptsächlicher Unterschied ist dass XHTML etwas strenger ist, so müssen zB alle leeren Elemente beendet werden, es darf keine Attribute ohne Wertzuweisungen mehr geben, usw, was aber alles nur Detailarbeit ist. Das zwischen XHTML und HTML kein großer Unterschied bestehen kann sieht man vor allem daran, dass XHTML Dokumente heute größtenteils noch als HTML Dateien ausgeliefert werden oder dass es Programme gibt die (valides) HTML fast automatisch in XHTML konvertieren.


Falls du mit mehreren Ebenen die Überlagerung mehrerer Elemente meinst: Ja das geht mittels dem Attribut z-index. Elemente mit hohem z-index schieben sich dabei vor Elemente mit niedrigem z-index.

[HiddenGhost]

D.h ich könnte problemlos drei von diesen Flächen übereinanderlegen... 1. wäre jetzt dieses Aluminium, das zweite die Schatten und das 3. das Logo.
Läßt sich sowas wirklich derart exakt positionieren, dass es auch wirklich auf alle Browsern, die nach den Standards operieren gleich aussieht?

[Nase]

Also, ich würde mir damit garnicht soviel Arbeit machen, sondern einfach nur die Tabelle, wenn du diese denn benutzen willst, gut strukturieren. Das ist natürlich auch ohne Probleme mit CSS möglich. Feste Breite auf 800px und fertig.

[HiddenGhost]

Jedoch böte es sich an, mit css element zu arbeiten, da ich die Bildelement für Schatten alle einzeln auf die Metallfläche legen will...

[imagine]

Jeder Browser hat irgendwelche Probleme und Bugs bei der Darstellung, manche mehr, manche weniger. Eine generell pixelgenaue Übereinstimmung ähnlich einem Bild kannst du mit HTML und CSS aber sowieso nicht erreichen, auch nicht mit Tabellen. Das sind Beschreibungssprachen, die durch den User-Agent des Nutzers dann ausgewertet werden, und zwar angepasst an dessen Bedürfnissen und Umgebung. Und das ist kein Bug, sondern ein Feature :)

Das Layout selbst dient dann dazu den Inhalt möglichst gut zugänglich zu präsentieren und existiert nicht zum Selbstzweck, wie zB momentan noch auf deiner Seite.


So ganz hab ich deine Idee aber noch nicht verstanden. Du möchtest oben und unten als Kopf- und Fußzeile ein Bild als Balken, das so breit ist wie das Fenster. Dazwischen dann auf der rechten Seite der Inhalt und auf der linken Seite das Menü, das jeweils so lang ist wie der Inhalt. Wenn mehr Inhalt vorhanden ist als in das jeweilige Fenster passt soll beim Scrollen alles mitwandern?

Edit: Den Schatten gleich mit in das Bild zu integrieren ist keine gute Idee? Alternativ kannst du Schatten auch mittels border simulieren. Rechts und unten einen kleinen schwarzen Rand, mehr macht einen Schatten ja nicht aus.

[HiddenGhost]

Nein, das Grundproblem ist, dass das horizontale Bild nur bis 800px gut aussieht, wenn es darüber hinaus geht passt es nicht mehr perfekt ineinander um das gibt unschöne Effekte... wird die tabelle breiter als 800px passt dat nich mehr.
Wobei background-repeat: no-repeat; das Problem zwar lößt, jedoch die Zelle mit dem Inhalt über die obere leiste hinaus gedehnt würde. Dat sähe auch scheiße aus.

Ziel ist, den Inhalt auf eine Breite von 800px zu beschränken, jedoch zu verhindern, dass die Seite auf kleineren Ausgabemedien nur über Scrollleisten erreichbar ist.

Mit der Höhe der Hauptzelle habe ich keine Probleme, das funktioniert so wie es mir vorgestellt habe!

Das mit Border gucke ich mir noch an, jedoch würde border=1 doch bedueten, dass das menü mit dem unteren halbkreis nicht mehr nahtlos an das Logo anschließt.

Wie heißen diese Elemente in css, die das designelemement der tabelle ersetzen? boxen?

[MadMan2k]

wenn du die bilder als png24 speicherst, kannst du sie anschließend wie Layer in Photoshop positionieren.
Ob das optimnal wäre, sei mal dahingestellt -
die flexibelste lösung wäre das auf jeden Fall.

Heir siehst du ein gutes beispiel, wie man mit DIV-Boxen anstatt mit Tabellen das Layout strukturieren kann:
http://tut.php-q.net/frames.html

[imagine]

Original geschrieben von HiddenGhost
Das mit Border gucke ich mir noch an, jedoch würde border=1 doch bedueten, dass das menü mit dem unteren halbkreis nicht mehr nahtlos an das Logo anschließt.

Wie heißen diese Elemente in css, die das designelemement der tabelle ersetzen? boxen?
Ja ein Rand erstreckt sich über die komplette Länge.
Die Boxen heißen div als Blockelement und span als Inlineelement. Mit float kannst du die einander umfließen lassen und mit position relative, absolute plazieren.