DIVs + CSS anstatt Tabellen: Modernes Design von Webseiten (HTML, CSS und Javascript)

[thread]2286[/thread]

DIVs + CSS anstatt Tabellen: Modernes Design von Webseiten

Leser: 1

bloonix

2006-01-22 17:43

User since
2005-12-17
1615 Artikel
HausmeisterIn

Hallo Leute,

also so ganz bin ich mit diesen Modernitäten überhaupt nicht
einverstanden. Überall wird angeprangert, Tabellen tatsächlich
nur noch für tabellarische Daten zu nutzen und nicht mehr um
eine Webseite zu gestalten. Nur diese verdammten DIV's
können einfach nicht mithalten!

Beim Desing meiner Homepage versuche ich gerade vergeblich,
mein Tabellendenken durch DIV's einzutauschen und stoße
dabei ziemlich schnell auf die Grenzen.

Es fängt damit an, dass ich in den Vielzahlen von DIV's, die
wirklich sehr dynamisch sein müssen, da der Inhalt variieren
kann, den Text hier und da gerne vertikal zentrieren möchte,
aber das kann ein DIV leider nicht - zumindest nicht einheitlich
für alle Browser. Also wenn ich jetzt in jedes DIV-Element eine
Tabelle lege

Code: (dl )

<div class="irgend_eine_position">
   <table>
      <tr>
         <td style="vertical-align:middle;">mein Text</td>
      </tr>
   </table>
</div>

nur um den Text vertikal zu positionieren, dann kann ich doch
auch gleich eine große Tabelle einsetzen und die DIV's weg-
lassen.

Der absolute Gau ist auch noch, dass wohl jeder Browser
seinen eigenen Willen beim Positionieren von DIV's besitzt :-)

Was meint Ihr dazu und vor allem zu diesen schlecht
auferlegten Regeln zum Webseitendesign? Haltet ihr euch
an sowas?

Greez,
opi\n\n

What is a good module? That's hard to say.
What is good code? That's also hard to say.
One man's Thing of Beauty is another's man's Evil Hack.

jan

2006-01-22 17:58

User since
2003-08-04
2536 Artikel
ModeratorIn

Code: (dl )

<div style="display: table-row"><div style="display: table-data;"></div><div style="display: table-data;"></div></div>

um die semantiknazis ruhigzustellen und sich trotzdem nicht mit allem rumzuschlagen ;)

bloonix

2006-01-22 18:04

User since
2005-12-17
1615 Artikel
HausmeisterIn

[quote=jan,22.01.2006, 16:58]

Code: (dl )

<div style="display: table-row"><div style="display: table-data;"></div><div style="display: table-data;"></div></div>

[/quote]
Und du bist dir auch 100% sicher, dass das in allen Browsern
funktioniert? Da wäre ich mir nicht so sicher!

What is a good module? That's hard to say.
What is good code? That's also hard to say.
One man's Thing of Beauty is another's man's Evil Hack.

jan

2006-01-22 21:31

User since
2003-08-04
2536 Artikel
ModeratorIn

es sollte zumindest in allen funktionieren, die css unterstützen - und die, die das nicht tun, können im allgemeinen auch keine tabellen.

grundsätzlich aber bin ich eh nicht so der designfreak, sodass für mich die einschränkungen, die eine deutliche inhalt-darstellung-trennung mit sich bringt, nicht so schlimm ist. und maddox macht vor, wie man auch mit minimalistischstem design maximalistischsten erfolg haben kann ;)

bloonix

2006-01-23 00:11

User since
2005-12-17
1615 Artikel
HausmeisterIn

[quote=jan,22.01.2006, 20:31]es sollte zumindest in allen funktionieren, die css unterstützen - und die, die das nicht tun, können im allgemeinen auch keine tabellen.[/quote]
Weder in Opera, noch in Firefox klappt das und beide Browser gehören
zu denen, die CSS weitestgehend beherrschen :-)

Tabellen haben zudem nichts mit CSS zu tun!

What is a good module? That's hard to say.
What is good code? That's also hard to say.
One man's Thing of Beauty is another's man's Evil Hack.

jan

2006-01-23 02:08

User since
2003-08-04
2536 Artikel
ModeratorIn

watt? da hast du entweder einen fehler gemacht oder meinen pseudocode für vollständig gehalten.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

esskar

2006-01-23 05:30

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

[quote=jan,23.01.2006, 01:08]watt? da hast du entweder einen fehler gemacht oder meinen pseudocode für vollständig gehalten.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display[/quote]
ob das IE 7 verstehen wird!

GwenDragon

2006-01-23 09:15

User since
2005-01-17
14748 Artikel
Admin1

Was heißt eigentlich für alle Browser? IE + FF?

Quote
Was meint Ihr dazu und vor allem zu diesen schlecht
auferlegten Regeln zum Webseitendesign? Haltet ihr euch
an sowas?

Das ist wie mit dem Programmieren. Schlampig gearbeitet funktioniert es garantiert nur auf dem Firefox/Mozilla und dem IE.
Konqueror, Opera, Safari haben dann das Nachsehen bzw. sehen nichts Gescheites.

Sicher sind solche Regeln nicht nutzlos.
Wenn es solche Regeln nicht gäbe, würden nur Leute mit dem IE die Webseiten ansehen können. Schließlich ist der IE ja Standard.

Wer heute zu faul ist, sich mit CSS zu beschäftigen, wird früher oder später seinen HTML-Code in die Tonne treten dürfen.

Tebellen sind nicht verboten. Sie aber als Designelement - Design im Sinne von Positionierung - zu benuitzen, ist Unsinn.

CSS bietet viel und macht den Code schlank. Seiten laden schneller und lassen sich schnell ändern.

Du mußt das CSS leider anpassen, da es Browser gibt, die das Boxmodell etwas unterschiedlich oder falsch auslegen.
Zudem nicht vergessen: den Doctype. Ohne diese Angabe ist der Browser im Quirksmode und zeigt so schlecht wie der IE an.

CSS ist so sinnvoll wie [font=courier new]use strict;[/font]
Es geht auch ohne. Meist.\n\n

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

GwenDragon

2006-01-23 09:28

User since
2005-01-17
14748 Artikel
Admin1

Gucksd du hier für de DIV:
Pseudo-Tabelle mit vertikal zentriertem Text ;)

Code: (dl )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
div.tdzm {
    vertical-align: middle;
    display: table-cell;
    padding: 5px;
    border:  solid thin red; }

</style>
</head><body>

<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="tdzm">Tabelle</div>
  <div  class="td">Kurzer Brief an ein Idol. Lieber Onkel Reinhard, schon lange wollte ich Dir sagen, da&szlig; ich Dich f&uuml;r einen ganz tollen Texter halte. Ich wei&szlig;, Du h&ouml;rst sehr gerne Lob, und deshalb kann man nicht oft genug sagen, da&szlig; Du der Gr&ouml;&szlig;te bist. Gerade in Deinem Alter ist man ja gesegnet, wenn man noch so witzig schreiben kann wie Du. Viele Deiner Werberkollegen sind ja schon zu wichtig, um noch Humor zu haben. Du bist da ganz anders. Du kannst richtig komisch sein. Und das, obwohl Du in Deinem sehr langen Leben auch schon viele unangenehme Dinge schreiben mu&szlig;test. Texte f&uuml;r McDonald's zum Beispiel. Oder kleine Reime f&uuml;r Onkel Norbert. Nein, Du hast es wirklich nicht leicht gehabt. Und dann noch die Selbstdarstellung f&uuml;r Tante Ika. Erinnerst Du Dich? Da hat sich selbst einer wie Du schwergetan. </div>
 </div>
</div>

</body>
</html>

\n\n

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

renee

2006-01-23 11:40

User since
2003-08-04
14371 Artikel
ModeratorIn

Das ist aber auch nicht fuer alle Browser - siehe esskars Post!

OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/

View all threads created 2006-01-22 17:43.