Anmelden, um zu folgen  
Folger 0
Josh

tabellenloses design, layout mit <div>'s

24 Beiträge in diesem Thema

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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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... :-/

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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... :-/

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
;-) 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.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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?

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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?

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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...

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
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

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Bestimmt ist es möglich eine sauber Website ohne Tabellen zu bekommen. Hat man float, clear, margin. auto ... im Griff macht es keine Schwierigkeiten eine saubere Seite aufzuziehen.
Nach einiger Zeit hat man auch genügend Vorlagen auf Lager um jedes Problem lösen zu können. div mit id versehen machen es wunderbar leicht DOM rauf und runter mit Java Script auf Knoten zu greifen zu können. Solange ich eine kontrollierte Umgebung habe, ist div und css so oder so der Trumpf - Keine Frage.
Sobald man aber Webemittel von Affiliates, Homepagetools, Applets, Flash Gimmiks und so einbaut wird das sauber Valide Desing durch allerlei iframes, Minitabellen und der Gleichen Elemente mehr versaut.
Für so eine Umgebung nehme ich eine Tabelle, für eine Umgebung die ich nicht 100% selber geschaffen habe, habe ich auch nicht 100% Verantwortung. Also warum in so einem Fall rumurksen und nicht gleich von Anfang an eine Tabelle nehmen?
Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.
Antoine
PS: Die Websites von twin4matic sind eher einfache nicht komplexe Sites, dafür optisch wunderschön. So was ist einfach mit div zu machen

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Das Wichtigste wurde sicher schon gesagt. Dieser Linkkönnte vielleicht für Umsteiger noch von Nutzen sein - ein Ausschnitt aus meinen Kursen für Volkshochschule und Uni-Leute. Insbesondere daslege ich Neulingen ans Herz. Ich weihe in diesen Kursen zumeist blutige AnfängerInnen in die Thematik ein (12-20 Stunden Workshop), die selbst Websites machen wollen.

Ich habe die Erfahrung gemacht, dass "mit Tabledesign Einsteigen, aber sicher auch CSS mit auf den Weg Geben" die didaktisch beste Lösung ist für Leute, die das noch nie gemacht haben. Wer noch nie Objekte webdesignmässig auf dem Bildschirm positioniert hat, ist ganz froh, fixe Grenzen auf dem Bildschirm zu haben.

Und ich gebe zu: Wenns "quick & dirty" sein muss und der Auftraggeber null Budget hat (solls ja geben...), bin ich mit einem Tabellengerüst immer noch schneller, und der Kunde checkt die Betreuung auch besser, da er meist sowas wie WYSIWYG hat. Aber da bin ich etwas konservativ und streite regelmässig mit meinen Berufkollegen...

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
QUOTE
Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.

Das liegt wohl daran, wie die CSS-Umsetzung erfolgt. Wenn jemand Tabellen mit Divs nachbaut, dann wirds in der Regel auch Murx und dann solte man mMn auch lieber bei Tabellen bleiben.

Mal ein Beispiel:
Reiner HTML-Code für komplett zentrierten Splah-Screen (Die Styles lasse ich weg, weil ich es immer wiederverwenden kann):
Tabellenlayout:
CODE
<table width="100%" height="100%" celpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td><img src="logo.png" height="500" width="600" alt=""></td>
<td>&nbsp;</td>
</tr>
</table>


CSS-Layout:
CODE
<div id="splash"><img src="logo.png" height="500" width="600" alt="" /></div>


Oder eine horizontale Navigation (oft gesehen):
Tabellen:
CODE
<table width="750" celpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="seite1.html"><img src="punkt.gif" alt="">Punkt 1</a></td>
<td width="150"><a href="seite2.html"><img src="punkt.gif" alt="">Punkt 2</a></td>
<td width="150"><a href="seite3.html"><img src="punkt.gif" alt="">Punkt 3</a></td>
<td width="150"><a href="seite4.html"><img src="punkt.gif" alt="">Punkt 4</a></td>
<td width="150"><a href="seite5.html"><img src="punkt.gif" alt="">Punkt 5</a></td>
</tr>
</table>


CSS(Bilder werden einmalig als Hintergrundbild per CSS festgelegt):
CODE
<ul id="navi">
<li><a href="seite1.html">Punkt 1</a></li>
<li><a href="seite2.html">Punkt 2</a></li>
<li><a href="seite3.html">Punkt 3</a></li>
<li><a href="seite4.html">Punkt 4</a></li>
<li><a href="seite5.html">Punkt 5</a></li>
</ul>


Die CSS-Angaben lasse ich weg, denn sie stehen sowieso in einer externen CSS-Datei und müssen nicht bei jedem Seitenabruf erneut abgerufen werden, sondern werden vom Browser gecacht, wohingegen ein Großteil der Auszeichnungen im Tabellenlayout stehen und der ganze Wust jedesmal neu übertragen werden muß. In der Regel potentieren sich ja die Tabellen, je nach verwendeten Elementen.
Div-Suppen ergeben sich in der Regel dort, wo <div>s nicht sinnvoll eingesetzt werden. Zum Beispiel anstatt eines <p> oder sinnlose Umschließungen a la Tabellennachbau.

Weiterhin:
Will ich meine horizontale Navigation mit einem anderen Navigationsbildchen (das punkt.gif im Beispiel oben) versehen, muss das in jeder Datei jedesmal neu ersetzt werden(vielleicht überspitzt in Zeiten von includes und "ateiübergreifendes Suchen&Ersetzen", wenn ich Tabellen verwende. Verwende ich CSS muß ich nur einen Eintrag in meiner CSS-Datei ändern und fertig. Möchte ich gar aus meiner horizontalen Navi nun doch eine vertikale machen, muß ich die ganze Tabelle auseinanderdröseln und das auf jeder Seite. Beim CSS-Layout muß ich nur wenige Änderungen an den Styles vornehmen und schon sieht die Navi ganz anders aus; der Quellecode in der HTML-Datei bleibt dagegen gleich.

Außerdem: Wie man an den Beispiellinks von Andi schön sieht, ist man nicht mehr auf die rechteckige Struktur der Tabellen angeweisen, sondern man kann Dinge ohne große Probleme und Tabellenverschachtelungen "aufeinanderlegen".

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Hallo Antoine

QUOTE
Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.
Antoine

Tabellen für ein Design können nicht sauber sein, denn eine Tabelle ist für tabellarische Daten gedacht,
nicht um ein unsichtbares Raster für das Layout zu ziehen.
Ich glaube dir ist der Begriff "Div-Suppe" nicht ganz klar, hier ist eigentlich genau der Punkt.
Man sollte immer das sematisch korrekte Html Element auswählen,
für eine Liste <ul>, <ol>, ... für Absätze <p>, etc.... und für tabellarische Tabellen eben <table>.
Wenn man das nicht macht, hat man eine Div Suppe, wenn man sich aber an diese Regel hält, ist es keine Div Suppe.
Auch wenn es mal ein wenig mehr Divs sind, um ein komplexeres Layout zu bewerkstelligen.

Eine Seite die das ganze schön aufzeigt: http://css.fractatulum.net/sample/suppe/div_suppe1.htm

QUOTE
PS: Die Websites von twin4matic sind eher einfache nicht komplexe Sites, dafür optisch wunderschön. So was ist einfach mit div zu machen

Jep, unser Moto ist ja auch: simple & smart
Danke für das Kompliment, freut uns zu hören :-)

Nur um eines klarzustellen, man kann alles, Betonung auf _alles_, mit CSS und Divs machen,
es gibt keine Grenzen.
Aber natürlich gibt es mehr Aufwand, vorallem wenn man noch kein Experte ist und wenig Übung darin hat.


Gruss Peter

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Oh Mann .... wer wärmt diesen Thread denn immer wieder auf?
Startdatum war: Mo 7.6.2004, 10:22

Ich dachte ich trau meinen Augen nicht ...

Men Beitrag ist zwar oT, aber ich konnte mir den dann doch nicht verkneifen.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
naja, obwohl dieser Thread schon 2 1/2 Jahre alt ist, so ist er doch brandaktuell...
bin zurzeit gerade damit beschäftigt, ein Newsportal in typo3 umzusetzen, das Layout muss zu 100% CSS-basierend sein, also keine Tabellen...
Leider gibts andauernd wieder neue probleme mit CSS-Positioning. Dennoch werden wir auf CSS-P setzen, dies aus folgenden Gründen:

1. keyword-density: bei content-basierenden websites zählt die keyword-dichte. und selbst wenn man ein sehr komplexes CSS-layout hat, so kann man dies in ein externes Stylesheet auslagern, womit die Dichte des Contents in der eigentlichen HTML-Seite grösser ist.

2. Trennung von Design und Inhalt: mit CSS ist es viel einfacher das Design von inhalt zu trennen. Um die Schriftart zu ändern brauche ich mit CSS eine einzige Code-Zeile zu ändern, ohne CSS wäre dies äusserst aufwandig.

3. Ladezeiten: bei grösseren Seiten durchaus ein Grund für CSS. Das eingebundene CSS-Stylesheet braucht ein einziges mal geladen zu werden; tabellen müssen jedoch bei jedem Seitenaufruf neu geladen werden...

nun zur Frage, wann man auf CSS und wann auf Tabellen setzen sollte:
Tabellen kann man bei kleineren oder sehr grafiklastigen Websites benutzen. CSS sollte man bei Websites mit viel Content wie etwa Blogs, News-Portale oder Online-Shops verwenden, da man einen suchmaschinenfreundlicheren Quellcode bekommt.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

Erstellen Sie einen Account oder melde Sie sich an um kommentieren zu können

You need to be a member in order to leave a comment

Create an account

Registrieren Sie einen neuen Account in unserer Community. Es ist einfach!


Register a new account

Anmelden

Haben Sie bereits einen Account? Dann melden Sie sich hier an.


Jetzt Anmelden
Anmelden, um zu folgen  
Folger 0