Zur Boardunity Forenstartseite
  #1  
Alt 07.09.2004, 23:39
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960

Tabellenloses Layout


Hey,
es gibt ja ein paar Aktivisten im Web, die ne ziemlich krasse Meinung gegen Tabellen für's Seitenlayout haben. Nun dachte ich mir, OK, wenn schon XHTML, dann wieso nicht auch mal tabellenloses Layout... Hab dann mal etwas experimentiert (Grundlagenforschung), um zu sehen, wie ich was basteln kann. Bin dabei auch darauf aufmerksam geworden, dass ich ohne Tabellen u.U. etwas mehr/einfachere Layout-Möglichkeiten habe, grade was das CSS:float angeht. Nur irgendwie stoße ich mit meinen Versuchen sehr schnell an die Grenzen meiner Fähigkeiten. Eine fundamentale Sache, die mir bis jetzt ziemlich unmöglich scheint, ist Elemente rechts auszurichten, und gleichzeitig vertikal auszurichten.

Ich hab z.B. einen Block, der als Header eines Absatzes gelten soll. Alles, was in dem drin steht, soll vertikal mittig sein. Jetzt will ich was links und was rechts drin stehen haben. Dazu fällt mir nur float:left und float:right ein, aber dabei wird alles vertikal oben angeordnet und nirgendwo anders.

Hier das einfache Beispiel:
<div style="background:silver; padding: 3px">
<div style="float:left">links</div>
<div style="float:right">rechts</div>
<div style="clear:both"></div>
</div>

Das clear:both funktioniert seltsamerweise auch nur, wenn ich oben das padding:3px einfüge. Ansonsten geht der weitere Inhalt zwar danach wieder, aber der Header-Hintergrund ist nicht grau sondern weiß.

Naja, alles ziemlich verwirrend so. Kann mir jemand vielleicht sogar nen Link auf ein "Wörterbuch" geben, das mir eine direkte Formulierung bestimmter Situationen mit <div>s ermöglicht? Sowas wäre schon sehr hilfreich. Sonst muss ich wohl oder übel weiter mit Tabellen layouten, weil's einfach nicht anders geht:

<table>
<tr valign="middle">
<td>links</td>
<td align="right">rechts</td>
</tr>
</table>
__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #2  
Alt 08.09.2004, 08:18
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.605
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

  #3  
Alt 08.09.2004, 08:43
Mitglied
 
Registriert seit: 01.2004
Beiträge: 173
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


Geändert von utopia (08.09.2004 um 13:34 Uhr).
  #4  
Alt 08.09.2004, 09:40
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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...

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #5  
Alt 08.09.2004, 12:00
Aktiv (oder so?)
 
Registriert seit: 04.2004
Beiträge: 95
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


Geändert von Eduard Zintz (08.09.2004 um 12:04 Uhr). Grund: Screenshot gefunden
  #6  
Alt 08.09.2004, 14:04
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.605
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)

  #7  
Alt 08.09.2004, 15:24
Mitglied
 
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 777
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.

__________________
Patrick Gotthardt
Patrick Gotthardt on Software
  #8  
Alt 08.09.2004, 18:17
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #9  
Alt 08.09.2004, 19:30
Mitglied
 
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 777
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?
Code:
<div><p style="float:left;">Links</p><p style="float:right;">Rechts</p></div>
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)

__________________
Patrick Gotthardt
Patrick Gotthardt on Software
  #10  
Alt 08.09.2004, 19:37
Mitglied
 
Registriert seit: 01.2004
Beiträge: 173
@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

  #11  
Alt 08.09.2004, 19:39
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #12  
Alt 08.09.2004, 20:01
Mitglied
 
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 777
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:
Code:
margin-top: auto; margin-bottom:auto;
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.

__________________
Patrick Gotthardt
Patrick Gotthardt on Software
  #13  
Alt 08.09.2004, 20:23
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)

Geändert von LonelyPixel (10.09.2004 um 17:44 Uhr). Grund: Test des Begründungsfelds (2)
  #14  
Alt 10.09.2004, 17:44
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #15  
Alt 22.09.2004, 13:36
Benutzerbild von IChao
Mitglied
 
Registriert seit: 09.2004
Beiträge: 13
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.

  #16  
Alt 22.09.2004, 13:44
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #17  
Alt 22.09.2004, 15:38
Benutzerbild von Philipp Gérard
Zeitdenken
 
Registriert seit: 09.2003
Ort: Wien
Beiträge: 828
Zitat:
Zitat von utopia
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.
Leiden können ist subjektiv. Bei manchen Layouts macht es Sinn, bei anderen nicht. Je nach Fall verwendet man es oder nicht.

Zitat:
Zitat von utopia
2. kann ich bei Divs das Verhalten, dass alles bei Vergrößerung der Schrift zum Layerbrei verkommt, absolut nicht leiden.
Das muss nicht sein. Denk an Zeitdenken, spiel da mal mit den Größeneinstellungen.

Zitat:
Zitat von utopia
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).
Keine absoluten Werte und min-height & max-height. Der IEX kann das aber - wie immer - noch nicht so recht.

Grüße,
Philipp

__________________
Philipp Gérard
Gewöhnliche Menschen denken nur daran, wie sie ihre Zeit verbringen. Ein intelligenter Mensch versucht sie zu nützen. - Arthur Schopenhauer
  #18  
Alt 22.09.2004, 22:57
Mitglied
 
Registriert seit: 01.2004
Beiträge: 173
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.

  #19  
Alt 23.09.2004, 09:51
Benutzerbild von Acyd Burn
phpBB Lead Developer
 
Registriert seit: 09.2003
Ort: Oldenburg
Beiträge: 106
schon mal versucht width:% beim div zu benutzen? Für den IE würde ich dann einen clearfix empfehlen.

__________________
Meik Sievertsen
phpBB Development Team Leader
phpBB3 Development | phpBB / Projekte: mobilfunk-guenstiger | stromtarife vergleichen/wechseln
  #20  
Alt 23.09.2004, 09:55
Benutzerbild von IChao
Mitglied
 
Registriert seit: 09.2004
Beiträge: 13
~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.

  #21  
Alt 23.09.2004, 10:30
Mitglied
 
Registriert seit: 01.2004
Beiträge: 173
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.

  #22  
Alt 23.09.2004, 12:10
Benutzerbild von Philipp Gérard
Zeitdenken
 
Registriert seit: 09.2003
Ort: Wien
Beiträge: 828
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.

__________________
Philipp Gérard
Gewöhnliche Menschen denken nur daran, wie sie ihre Zeit verbringen. Ein intelligenter Mensch versucht sie zu nützen. - Arthur Schopenhauer
  #23  
Alt 24.09.2004, 14:54
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 960
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?)

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Neues Layout, wie gefällts? ftalmon Projektvorstellung und Bewertung 6 21.11.2003 10:06
Layout beim Apboard Soltano Forensoftware 6 08.09.2002 19:20






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24