Anzeige - [Hier werben]
(?) Tags raten (?) css design, div, tabellenlos, tabellenloses design (edit)
Seiten: (2) 1 [2]  ( Neuster Beitrag anzeigen )
Reply to this topicStart new topicStart Poll
Diskussion

tabellenloses design, layout mit <div>'s

benutzt ihr's?

Andi Jacomet
ah,ja!
Geschrieben am: Do 23.11.2006, 22:22
Report PostQuote Post

AyomRank 2
****

Gruppe: Member (aktiv)
Beiträge: 15
Mitglied seit: 23.11.2006


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...


--------------------
Top
PMUsers Website
Top
 
 
MarkusH
  #22 Geschrieben am: Fr 24.11.2006, 03:51 (+05:28)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 83
Mitglied seit: 2.11.2006


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".
Top
PM
Top
 
Peter Bucher
#23 Geschrieben am: Fr 24.11.2006, 11:56 (+08:05)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 160
Mitglied seit: 3.08.2004


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


--------------------
Microsoft MVP - Visual Developer ASP / ASP.NET

http://www.aspnetzone.de/blogs/peterbucher/ - Auf den Spuren von .NET
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community
Top
PMEmail PosterUsers Website
Top
 
Themenmixer
#24 Geschrieben am: Fr 24.11.2006, 12:47 (+00:50)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 104
Mitglied seit: 5.01.2006


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.


--------------------
Themenmix.de - Die Antwort für das Durcheinander ist 42!
Rezepte für den Schnellkochtopf - Nicht einfach nur Rezepte; hier gibts Schnellkochtopfrezepte in epischer Länge.
Top
PMEmail PosterUsers Website
Top
 
Dominic
#25 Geschrieben am: Fr 24.11.2006, 14:55 (+02:07)
Report PostQuote Post

AyomRank 3
******

Gruppe: Member (aktiv)
Beiträge: 41
Mitglied seit: 2.11.2004


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.

Top
PMEmail PosterICQ
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:

Topic Options Seiten: (2) 1 [2]  Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Layout, Inhalte und Calls to Action autoenthusiast 546 2 Do 18.09.2014, 16:54
Feedback: neues Design für mobisim.de AdMarkt 497 0 Do 3.04.2014, 09:05
CSS flexibles Layout? Ronny84 4169 12 Fr 4.10.2013, 08:41


Günstig werben auf Ayom:
Kontakt: ayom@small-n-tall.com



Anzeigen

Textlinks kaufen oder anbieten





[Hier werben]

 

Statistiken:
Top 10 Autoren heute
Top 50 Autoren insgesamt