Tabellenloses Layout

Da es eh nicht mehr genutzt wird kann man es wohl zeigen:

http://games-foren.de/dolby2k/video/

So funktioniert das ganze. Allerdings, und da geb ich dir Recht, ist es für einen Anfänger (und das unterstelle ich dir einfach mal ) nicht auf den ersten Block zu durchschauen. Ich schlage vor du guckst dir mal den Quelltext an und stellst geziehlte Fragen dazu

Ich mag es sehr, Div-Boxen anstatt Tables zu benutzen, was ich jedoch bis heute nicht hinbekomme (der Übersicht wegen, ohne style-Attribute):

@MrNase,

<table width=x%>
<tr>
<td width=y%>..</td>
<td width=z%>..</td>
</tr>
</table>

Nachteile von Divs (oder ich weiß es nicht besser)
1. kann ich absolute Breiten nicht leiden, denn nur so funzen "spaltige" Seiten, wie die von MrNase.

2. kann ich bei Divs das Verhalten, dass alles bei Vergrößerung der Schrift zum Layerbrei verkommt, absolut nicht leiden.

Sobald ich mit absoluten Breiten arbeite, habe ich keine Probleme, was Punkt 1 anbelangt. Nur möchte ich ungern wegen ein paar width-Angaben mit mehreren css-Files arbeiten, um verschiedene Auflüsungen unterstützen zu können (700px Breite kommt irgendwie doof bei 1600*1200).

Punkt 2 stört mich am gewaltigsten (die Boxen wachsen nicht mit). Da verhalten sich Tables wesentlich besser.

@MrNase, schau dir einfach mal dein Beispiel an und spiele ein wenig mit beim Mozilla mit strg-+/-.

cu

OK, das o.g. Beispiel ist mir zu einfach. :-p

Schau dir bitte mal das hier an: http://px.no-ip.com/projects/blackboard/test/divs.html

Da siehst du oben den Header eines Beitrags, und da ist generell alles oben ausgerichtet in dem dunkelgrauen Bereich. Es soll aber so aussehen:
- Benutzername und das Zeug daneben immer in eine Zeile, baseline-ausgerichtet
- Der linke und der rechte Block da drin jeweils unabhängig vertikal mittig ausgerichtet.
Das geht mit ner Tabelle wunderbar, da kann ich für jeden Bereich angeben, wie er ausgerichtet werden soll. Mit den divs geht da irgendwie gar nix, der knallt die einfach so ins Fenster, wie sie grade kommen. Dass die meisten Seiten so ein Layout nur für eine ohnehin oben angeordnete Navigationsspalte verwenden, nutzt mir in dem Fall gar nix, ich brauch schon a bissl mehr...

Du solltest vielleicht mal auf CSS4YOU.de schauen. Dort gibt es mehrere verschiedene Layouts ohne Table als beispiel, die man auch frei verwenden kann.

Weil das anscheinend so "IN" ist, habe ich mir überlegt auch mal ein Layout zu erstellen mit div-Kontainern. Hat soweit auch ganz super geklappt, allerdings muss ich erwähnen das es durchaus schwerer ist als mit den Tables, meiner Meinung nach.

Mir ist grade was eingefallen, das ich ja sowas eigentlich habe was du suchst: http://web1.zanix.de/iBB11Screens/screen_4.png
Das ist auch nur mit div-Kontainern gestaltet worden, wenn du möchtest kann ich dir den Quellcode zeigen

utopia: Das Layout ist nicht von mir, Dolby2k wars. Ich hab lediglich nen Fehler ausgebügelt

kiX: Ein fertiges Layout zu nehmen ist IMHO der falsche Weg.. So lernt man nicht wirklich was und wenn man es nicht lernt, dann findet man es halt schwer

LonelyPixel: Sowas sollte man auch nicht mit Layern machen.. Es gibt leider noch alte Browser die es nicht verstehen. Aufgrund der Kompatabilität sind Tabellen zu empfehlen (wie beim vB)

Ich klink mich mal ein.
Ich fürchte allerdings, dass ich nicht so ganz verstehe, was du haben möchtest, deshalb auch nur zu deinem Beispiel: Man schreibt in einem Div keinen Text. Dafür ist p oder span oder sonstwas zuständig.

Kein Text in <div>? Oh, das ist sehr dumm. Ich hab das jetzt alles so umgestellt... Der HTML-Validator meinte, es gäbe das Verschachtelungsprobleme mit Tabellen und anderem Zeug in <p> und <div>... Also hab ich alle <p> durch ein <div class="p"> mit geeignetem Abstand ersetzt und seitdem ist alles OK.

Danke für eure Links, die können mir sicherlich auch das eine oder andere Mal weiterhelfen. Aber meine Layoutfrage hilft das leider noch nicht so recht zu klären. Ich möchte einfach die kleineren (weniger hoch) Elemente rechts vom größeren Usernamen (siehe mein Beispiel oben) nich oben, sondern mittig oder unten ausrichten. Aber das wird nirgendwo erklärt. Da wird alles entweder oben oder absolut positioniert. Absolute Positionierung kommt mir aber aus mehreren Gründen (andere Schriftart, Textzoom) gar nicht erst in die Tüte.

Ich verstehe, dass Tabellen eine höhere Browserkompatibilität zur Folge haben, aber ich würde halt gerne mal versuchen, die Headerzeile möglichst klein zu halten und gleichzeitig den Avatar oben rechts so anzubringen, dass er auch in den Inhalt des Beitrags reinragen kann. Das wird im Beispiel mit der gestrichelten Kasten oben rechts dargestellt. Mit Tabellen kann ich mir das auf gar keinen Fall vorstellen, da kann ja nix über Teile mehrerer Zellen gehen. Und ein <img float:right> vor der Tabelle schiebt dann ja gleich die ganze Tabelle nach links.

Also. Es ist so, dass Div ein Container ist (wenn du Java kannst/kennst: JPanel). Darein kannst du keinen direkten Text schreiben, aber du kannst ein Element hinzufügen, dass in der Lage ist, Text darzustellen. Das wären dann sowas wie p oder span (JLabel in Java).
Gleichzeitig darfst du aber keine Container in einem Textelement einsetzen, sondern nur Text.

Zu deinem Problem: Mit float hast du es schon versucht?
Ansonsten könnte es durchaus über Positionierung gehen, wobei das nichtmal absolute seien muss... ("position:relative;" - dann beim linken sowas wie "left: 10px;" und beim rechten "right: 10px;" - müsste funktionieren)

@MrNase,
das ist recht egal, von wem es ist. Diese Div-Boxen haben scheinbar diese Angewohnheit, nicht mit dem Inhalt zu wachsen (oder ich weiß es nicht besser).

Mich kotzt das wirklich an, denn das ist es, was mich davon abhält, komplett auf Div umzusteigen.

cu

Ja, das float hab ich ja schon verwendet in meinem Beispiel. Aber eine vertikale Ausrichtung ist mir damit noch nicht gelungen. Naja, und ich könnte es jetzt um px nach oben oder unter schieben, aber ich weiß halt nicht, wie groß das Fenster genau ist, und dann ist es bei irgend jemandem halt nicht genau in der Mitte oder zu weit unten.

Das mit den Containern klingt logisch (kann nicht genug Java dafür, nur die nötigsten Grundlagen der Klassen, kein GUI), aber im XHTML-Standard ist es scheinbar trotzdem zugelassen. Meine XHTML 1.1 Webseite bemängelt sowas jedenfalls nicht.

OK, es scheint so, dass ich auch weiterhin Tabellen einsetzen werde, zumindest für die 'Advanced' Formatierung, weil das im CSS Boxmodell scheinbar nicht vorgesehen ist. Eine ähnliche Frage hatte ich glaub ich schonmal irgendwo gestellt (in diesem Forum?), da ging es IIRC um sowas wie: Wie kann ich die vertikale Position und Größe eines Elements von der eines anderen (links/rechts daneben) abhängig machen – eben die Grundfunktion einer Tabelle in diesem Sinne.

Komisch. Ich krieg da andauernd Fehlermeldungen drüber.

Ok. Mit meinem Beispiel kannst du den Code also nebeneinander ausrichten, aber nicht vertikal zentriert, richtig?
Ich meine es gäbe dafür extra ein CSS-Attribut, aber da mir das nicht einfällt:
Sollte den Text vertikal zentrieren.

Deine andere Sache:
Du könntest beide in einen Container packen, dem eine feste Größe (z.B. 100%) geben und so beide auf 100% erweitern (beiden als Attribut height:100% geben).

Hast du dich schon im Zengarden umgesehen? Vielleicht findest du da ja noch etwas.

Edit: Noch was... wenn du schon mit CSS arbeitest könntest du dich gleich von den statischen Tabellen verabschieden. Ich hab auch immer mit CSS gearbeitet, seit ich meine erste vernünftige CSS-Seite gemacht hab bin ich echt begeistert. Man ist wirklich viel freier in der Gestaltung.

Seltsam. Ich hab das grade mal ausprobiert, und weder margin:auto noch height:100% mit vertical-align:middle bei absoluter Höhe des Parents ändern etwas. Nur dass ich mich bei der absoluten Höhe des Parent (gesamter Header-Bereich) auf einen Wert festlegen muss, den ich nicht kenne (weiß z.B. nicht, ob das mehrzeilig wird etc.).

Nein, war zwar schonmal im Zengarden, muss aber erstmal wieder den Link suchen und mich da gezielt umschauen.

Lauf SelfHTML darf <div> eigentlich auch Text enthalten, wenn ich das richtig verstehe.

So, ich hab meine Vorstellung des Designs und die div/span-Struktur jetzt etwas verändert und bin schon ein Stückchen zufriedener mit meinem Entwurf. Falls sich jemand dafür interessieren sollte, die o.g. URL gibt's noch.

Lonely Pixel,

das mit dem tabellenlosen Layout, vertikalen Positionieren usw. ist nicht so ganz einfach, vielleicht hast du Lust, im WIKI von http://www.css-discuss.org zu stöbern:
http://css-discuss.incutio.com/

Die meisten der von dir angesprochenen Probleme sind behandelt, ich denke, dass man von den CSS fans dort recht viel lernen kann.

Und ein Wörterbuch: Dies könnten Eric A. Meyers "cascading style sheets" (zum Nachschlagen) und "on CSS" (zum Nachbasteln) sein.

Es ist nicht richtig, dass man in Divs keinen Text einsetzen könnte/dürfte. Es ist vielleicht etwas unschön, so eine Divitis (und IEMac kann sich im Extrem schon mal an zu vielen verschachtelten Divs verschlucken...)
Und ob ein solcher Container beim Textzoomen mitwächst oder nicht, hängt davon ab, ob man eine width-Angabe in em's vornimmt, falls das layout dies erlaubt.

Ui ist das ein großes Wiki. Ja danke für den Link, ist 'gebookmarkt' und werd ich mir mal durchlesen wenn ich wieder Zeit dafür hab.

Leiden können ist subjektiv. Bei manchen Layouts macht es Sinn, bei anderen nicht. Je nach Fall verwendet man es oder nicht.

Das muss nicht sein. Denk an Zeitdenken, spiel da mal mit den Größeneinstellungen.

Keine absoluten Werte und min-height & max-height. Der IEX kann das aber - wie immer - noch nicht so recht.

Grüße,
Philipp

Ich hab zwar einen Screeny (12 KB), bekomme aber immer eine Fehlermeldung beim Hochladen (um 6 KB überschrittene Filegröße).

Egal.

Auch bei zeitdenken überlappen sich die verschiedenen Text-Ebenen, wenn man die Schrift vergrößert. Das ist halt eine Div-Eigenart, die mir nicht gefällt. Div-Boxen wachsen nicht mit den Text mit, im Gegensatz zu den Zellen.
So ist meine bisherige Erfahrung. Du wirst lachen, genau wegen dem dämlichen IE verzichte ich auf min/max-width, weil ich denke, dass sie von 50% der Leser (Browser) ignoriert werden. Wieso ich an die anderen 50% nicht denke, .... weiß ich auch net

Die oben genannten Punkte sind die Sachen, die mich einfach nerven an Div-Boxen, was nicht heißen soll, dass ich sie nicht einsetze. Im Gegenteil.
Tabellen nerven mich beispielsweise aus folgenden Gründen.
a) zuviel Code
b) Accessability


@ICHao,
an em's habe ich zwar schon gedacht, aber nie getestet.
Da ich das aber sonst bei keiner Seite gesehen habe, kam es auch nie zu einem Test.

schon mal versucht width:% beim div zu benutzen? Für den IE würde ich dann einen clearfix empfehlen.

~utopia,

auf http://www.satzansatz.de/cssd/columnswapping.html diskutiere ich eine Methode, die die ems auf divs weidlich nutzt. Vielleicht hast du ja mal Zeit zu schauen und zu testen, würde mich freuen.

Verzichtet man auf gleich hohe Spalten, kann man das ganze komplizierte shifting-Zeugs weglassen, und erhält einfach floatings, deren Weite sich zoomen lässt, denn dazu sind die em-lenghts in CSS ja da.

hätte ich mal von Anfang an die em benutzt... hätte Nerven gespart.

Wieso macht das sonst keine andere Seite?
Zumindest ist mir bisher noch keine begegnet.
Selbst das geniale Zeug auf csszengarden verwendet es nicht.


Thx.

Utopia: Das Verzerren ist doch nichts Ebenenspezifisches. Schau dir mal spiegel.de an, die benutzen Tabellen. Jetzt mal die Schriftgröße aufs Maximum - schwupps. Die Zellen wachsen, teilweise verschwindet sogar Schrift.

Andere Frage: Ich hab meinen Code-Block mit Zeilennummern jetzt mit <div>s gemacht, die exakte Ausrichtung erfolgt mit JavaScript. (Ist nur ein Experiment. Weiß nicht, ob ich das nachher so übernehme.)
Sieht so aus:
links floating div mit Zeilennummer, width: 50px
rechts naneben: links floating div mit inhalt, width: 500px (korrigiert mit JS)

Wenn man jetzt Text markieren will, markiert er halt immer noch alles, inkl. Zeilennummern. Kann man in CSS nicht was einstellen, dass divs woanders hinverschoben werden oder anderweitig von der Textselektion ausgenommen werden? Die CSS-Links konnten mir nicht helfen dabei, die W3 Specs sagen mir auch nix in der Richtung. (Wäre so eine Markierungssperre am Ende vielleicht auch für Tabellen machbar?)