tabellenloses design, layout mit <div>'s

Josh

Josh

Legendäres Mitglied
hallo.

ich hab mich etwas über tabellenloses layout mit div's erkundigt. das klingt alles schön und gut und funktioniert auch für kleinere seiten, welche durchgehend das gleiche statische layout haben sollen.
sobald man aber dynamisch mehrere bereiche anzeigen will oder mehrere div's übereinander kriegt man riesenprobleme, weil da die browser sehr unterschiedlich interpretieren. deshalb habe ich mich entschieden, weiterhin mit (teilweise verschachtelten) tabellen zu arbeiten, da hier attribute wie width='100%' von allen browsern mehr oder weniger gleich gut unterstützt werden.
bei kleinen pages mit 3-4 bereichen sind div's mit css aber eine gute wahl.
smile.gif


was ist eure meinung dazu?

grüsse
j0sh
 
So nen Zufall!

hab gerade übers Wochenende auch ein wenig experimentiert und bin zum gleichen Schluss gekommen. Hatte aber vor allem Probleme mit unterschiedlichen Höhen.

Hat aber dazu geführt, dass ich nun mein CSS verbessert habe.

Franz
 
css ist ne tolle sache, solange aber browser wie IE und Mozilla das padding und margin attribut gegensätzlich verwenden ists ne teilweise holprige geschichte... :-/
 
Habe ne Präsenz mit DIVs aufgebaut, ist aber wirklich nur für kleine Seiten, wobei ich grade am probieren bin, wie man evtl die Höhen besser verwalten kann.

Man kann die Bereiche gegenseitig austricksen, damit Sie das machen was man will, doch leider wird ein DIV-Bereich den man mit 100% Breite angibt irgendwie doch viel Größer als man es erwarten würde.

Das mit den CSS-Kenntnissen habe ich dann auch schnell bemerkt
wink.gif
 
das problem ist, dass wenn man 2 div's z.b. mit float:left; nebeneinander stellt und das eine von beiden auf width:100% setzt, dann wird als 100% die breite des GANZEN fensters verwendet, nicht der REST des fensters minus des ersten div's. da wäre ein attribut width:*; recht nützlich, um die ganze breite mit mehreren div's zu nutzen...

da sind tabellen doch angenehmer zum arbeiten. allerdings bin ich mit beiden varianten nicht so recht glücklich, solange jeder browser das ein bisschen anders interpretiert, denn oft muss das zeugs pixelgenau sein... :-/
 
hab das schonmal in nem anderen thread gepostet, aber ich kann euch nur nochmals csszengarden.com empfehlen.
das lustige am table-less-design mit css ist, dass man - vorausgesetzt, man bestückt die styles der page mit den richtigen eigenschaften - beispielsweise im firefox das design einer solchen page ändern kann, indem man eines der verschiedenen css auswählt...
so, das war jetzt ein richtiger sch****-satz...
nochmal...
css-design page basteln, dem plaintext-html-file damit ein design verpassen, und dann eventuell noch weitere stylesheets erstellen, für andere designs mit gleichem content/gleicher page. danach mit firefox die page besuchen, und unten links kann man dann auswählen, mit welchem style (und somit design) die page angezeigt werden soll
wink.gif
 
;-) Auch ich benutze kein Tabellenloses Layout. Bzw sehr selten und in der Regel immernoch mit Tabellen kombiniert.
Sicherlich wäre es bei perfekten CSS Kentnissen möglich, aber ich musste so oft (auch 100% height ;-) komische Effekte beheben, die im andern Browser noch wunderbar ausssahen, dass ich der Meinung bin Tabellenloses Layout muss nicht besser sein, weil der Code übersichtlicher wird etc. Wenn ich schlechter damit arbeiten kann, bleibe ich lieber bei den Techniken, die ich behersche, und spare somit Zeit und Geld.
 
Servus,

mit Tabellen ist man einfach hinterher, zumal man auch die Suchmachienenfreundlichkeit beachten sollte. So kann man den Inhalt im Quelltext ganz oben platzieren, obwohl er durch CSS an einer anderen Stelle angebracht ist. Wer CSS nutzt ist seinen mitstreitern um längen vorraus.

Gute Beispiele ->
Stern.de
Lycos.de

Gruss
m0ndo
 
dann frag ich euch div-götter einmal, ob ihr eure pages auch auf verschiedenen browsern testet? ich hab mit IE6, Mozilla 1.6 und Opera 6.5 ein tabellenloses, statisches und relativ einfaches design machen wollen mit div's. einziger knackpunkt: die ganze seite soll in der mitte des bildschirms zentriert sein!
also, ihr götter, zeit mir euren code!

und ich kann euch sagen: immer 1 einziger browser stellt sich quer, und es ist nicht immer derselbe!
tongue.gif
 
QUOTE (j0sh @ Di 8.6.2004, 8:08) das problem ist, dass wenn man 2 div's z.b. mit float:left; nebeneinander stellt und das eine von beiden auf width:100% setzt, dann wird als 100% die breite des GANZEN fensters verwendet, nicht der REST des fensters minus des ersten div's. da wäre ein attribut width:*; recht nützlich, um die ganze breite mit mehreren div's zu nutzen...

da sind tabellen doch angenehmer zum arbeiten. allerdings bin ich mit beiden varianten nicht so recht glücklich, solange jeder browser das ein bisschen anders interpretiert, denn oft muss das zeugs pixelgenau sein... :-/
man kan die sogenanten div's ( css container ) auch übereinander legen das klappt dan den dafür sind sie ja da
gans krasse probleme gibts damit aber bei opera da zerhauts die ganze seite
und die container erscheinen immer der reihe nach egal welche position man angibt
natürlich kann man auch Tabellen in die container einfügen das macht sich dan noch besser
 
Mein Fazit ist:
statische Seiten auf jedenfall mit <div>. Dynamische Websites mit Tabellen als Transnational 4.
Es braucht einfach viel zuviel Zeit bis ein tabellenloses Desing auf alle Browser angepasst ist. Mit Tabellen ist man überall dabei.
Ich weiss auch nicht ob eine <div>-Suppe wirklich besser als eine schlanke mit CSS formatierte Tabelle ist.
Das ganze getue um barrierefrei ist mehr eine Marketinggeschichte. Vor ein paar Jahren hiess es, so schlank wie möglich.
Jetzt wo AJAX Trumpf darf wieder rumgesaut werden wie wild. :)
gruss
Antoine
 
QUOTE (j0sh @ Sa 12.6.2004, 17:17) die ganze seite soll in der mitte des bildschirms zentriert sein!
also, ihr götter, zeit mir euren code!


Mit CSS:


CODE
body {
text-align: center;
}


div#container {
margin: 0 auto;
}

// oder das

div#container {
background-position:center;
}



Ohne CSS:


CODE
<div align="center"></div>



Noch fragen?
 
Sorry, ich war gerade etwas erstaunt über eure Diskusion. Ich hatte nicht damit gerechnet, dass bei euch Profis wirklich noch diese Frage (Tabelle oder CSS) gestellt wird.
ohmy.gif


Aus Sicht der Benutzer, der Suchmaschinen und der Programmierer gibt es klare Vorteile für CSS-Layouts. Die Seiten können klarer definiert und verwaltet werden während verschachtelte Tabellenlayouts einem zuweilen sehr viele Nerven kosten können, sollte man da mal per Hand etwas nachbessern müssen.

Außerdem sind inzwischen die meisten wichtigen Probleme rund um CSS gelöst, gerade im englischsprachigen Bereich gibt es hunderte Seiten mit abermals hunderten Tutorials um auch die Verrücktesten Sachen mit CSS zu bewerkstelligen.

Meiner Meinung nach sollten moderne Webseiten mit CSS organisiert werden um vor allem für die Nutzer Barrierefrei zu sein. Auch die ein oder andere bessere Platzierung im Index beliebter Suchmaschinen kann mit Tabellenlosen Seiten leichter erreicht werden.

Was meint Ihr dazu?
 
Ich glaube man sollte bei den Einträgen auch beachten dass das hier vor 2.5 Jahren besprochen worden ist und seitdem sicher viele Seiten und Programmierer wesentlich mehr auf css setzen
cool.gif
 
QUOTE (j0sh @ Sa 12.6.2004, 16:17) also, ihr götter, zeit mir euren code!

http://www.sunrise.ch

Tabellenfrei in der Mitte zentriert.

Gruss Sandro

Edit:

QUOTE dass das hier vor 2.5 Jahren besprochen


hab ich erst danach gesehen...
 
QUOTE (hatschi1810 @ Do 23.11.2006, 16:58) Ich glaube man sollte bei den Einträgen auch beachten dass das hier vor 2.5 Jahren besprochen worden ist

Jetzt hab ich es auch gesehen. Da kann man doch mal sehen wieviel sich die letzten Jahre getan hat. Allerdings habe ich auch schon 2004 auf CSS gesetzt.
cool.gif
 
Und der sunrise eShop ist mit Tabellen gemacht. Sunrise eShop
Also: Warum ist eine CSS Formatierte Tabelle schlecher als ein Layout mit <div>'s ? Tabelle braucht auf jedenfall weniger Code.
Ich denke die Frage ist: Wie tieft ist das Ganze verschachtelt?
Hinter dem besten und modernsten Desing das nur auf Container baut, steht ein 'altes' Desing aus Tabellen oder Frames worauf die alten Browser ausweichen können.
IE5 und Co ist leider noch vielerorts in gebrauch. Wenn ab heute alle nur noch die neusten Browser verwenden, schreibe ich alle meine Codes auf div's um.
Letzte Frage, warum bringen Container den Usern mehr Vorteile als Tabellen? Dem User ist es eh egal solange es funktioniert.
Gruss
Antoine
 
Hallo zusammen

Erstmal, sorry für das Thread ausgraben.
Aber dieser Link musste ich einfach posten :)

QUOTE
Und der sunrise eShop ist mit Tabellen gemacht. Sunrise eShop
Also: Warum ist eine CSS Formatierte Tabelle schlecher als ein Layout mit <div>'s ? Tabelle braucht auf jedenfall weniger Code.
Ich denke die Frage ist: Wie tieft ist das Ganze verschachtelt?
Hinter dem besten und modernsten Desing das nur auf Container baut, steht ein 'altes' Desing aus Tabellen oder Frames worauf die alten Browser ausweichen können.
IE5 und Co ist leider noch vielerorts in gebrauch. Wenn ab heute alle nur noch die neusten Browser verwenden, schreibe ich alle meine Codes auf div's um.
Letzte Frage, warum bringen Container den Usern mehr Vorteile als Tabellen? Dem User ist es eh egal solange es funktioniert.


Hast du mein Link angeschaut?
Nach diesem sollten sich deine Fragen eigentlich nicht mehr stellen.


Ich setze schon seit einiger Zeit nur noch auf Tabellenloses Design, für tabellarische Daten verwende(t) ich aber natürlich immer noch Tabellen.
Die Vorteile überwiegen einfach und ich könnte gar nicht mehr mit Tabellen arbeiten, bin schon so daran gewohnt und überzeugt :)


Gruss Peter
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben