komplett auf Tabellen verzichten

[Luy]

Hi,

ich habe jetzt schon öfter gelesen, dass man mithilfe von CSS komplett auf Tabellen verzichten kann und soll. Soweit so gut.
Wenn ich ich jetzt aber z.b. einen zentrierten Hauptbereich auf meiner Seite habe, der 750px breit ist und einen grauen Hintergrund hat, und darin will ich weitere Elemente relativ mit Pixelangaben positionieren. Ein Elemte soll also z.b. 50 Pixel vom Rand dieses Bereiches entfernt sein. Dieses müsste also 2 Klassen angehören: der des Hauptbereiches und zusätzlich einer weiteren, die relativ 50px positioniert...
Ist das möglich und vor allem sinnvoll, oder soll ich besser Tabellen verwenden?

Vielen Dank schonmal!

[Ingo Turski]

Hi,

ich habe jetzt schon öfter gelesen, dass man mithilfe von CSS komplett auf Tabellen verzichten kann und soll.

nö. Du vergißt, daß es auch tabellarische Daten gibt, für die eine Tabelle die sinnvollste Auszeichnung darstellt.

Wenn ich ich jetzt aber z.b. einen zentrierten Hauptbereich auf meiner Seite habe, der 750px breit ist

width:750px;

und einen grauen Hintergrund hat

background:gray;

Ein Elemte soll also z.b. 50 Pixel vom Rand dieses Bereiches entfernt sein

margin:50px;

Dieses müsste also 2 Klassen angehören: der des Hauptbereiches und zusätzlich einer weiteren, die relativ 50px positioniert...

wieso zwei Klassen angehören und wieso positioniert?

Ist das möglich und vor allem sinnvoll, oder soll ich besser Tabellen verwenden?

Ja, ja, nein.

freundliche Grüße
Ingo

[Sven Rautenberg]

Moin!

ich habe jetzt schon öfter gelesen, dass man mithilfe von CSS komplett auf Tabellen verzichten kann und soll. Soweit so gut.

Das ist nicht ganz richtig. Man soll auf Layout-Tabellen verzichten. Tabellarische Daten gehören natürlich weiterhin in Tabellen hinein.

Wenn ich ich jetzt aber z.b. einen zentrierten Hauptbereich auf meiner Seite habe, der 750px breit ist und einen grauen Hintergrund hat, und darin will ich weitere Elemente relativ mit Pixelangaben positionieren. Ein Elemte soll also z.b. 50 Pixel vom Rand dieses Bereiches entfernt sein. Dieses müsste also 2 Klassen angehören: der des Hauptbereiches und zusätzlich einer weiteren, die relativ 50px positioniert...

<div id="bereich">
  <div id="element2">
  Irgendwas
  </div>
</div>

body { text-align:center; }
#bereich {
  position:relative;
  width:750px;
  margin: 0px auto;
  text-align:left;
  background-color:#888;
}
#element2 {
  position:absolute;
  left:50px;
  top:20px;
}

Ist das möglich und vor allem sinnvoll, oder soll ich besser Tabellen verwenden?

Ist möglich, ist sinnvoll, ist alles eine Frage, was konkret du willst. Man MUSS keine absolute Positionierung verwenden - ich verwende sie beispielsweise nur, wenn es absolut nicht anders geht (beispielsweise für Javascript-Ausklappmenüs - aber auch die werden seltener).

- Sven Rautenberg

[Rüdiger]

Hi,

es gibt auch andere Stellen, wo das schön erklärt wird - z.B. hier:
http://www.css4you.de/wslayout1/index.php

HTH,
Rüdiger

[shev]

"Wenn ich ich jetzt aber z.b. einen zentrierten Hauptbereich auf meiner Seite habe"

Probier mal (ich lasse die : weg, und auch evtl.  , )

margin-left 0px
margin-right auto

"der 750px breit ist"

width 750 px

"grauen Hintergrund hat"
safe webcolours wäre zB für grey der Wert 808080
die korrekte und sichere anzeige wäre dann mit
background-color #808080
möglich

ich persönlich arbeite aber lieber mit
background-color grey

weil ich dann beim lesen des codes eher weiss, was das nochmals war
manche browser könnten dies etwas dumm interpretieren, aber ich persönlich kümmere mich absichtlich nicht um "careless egocentric browser" wie IE und halte mich nur an W3 (und an tipps von der mozilla community)

"und darin will ich weitere Elemente relativ mit Pixelangaben positionieren"
ich persönlich bin nicht so gut versiert mit inherited values

die einzelnen elemente lassen sich aber recht gut mit den margin werten voneinander absetzen, so wie mit
margin-right 1em

und so weiter. ich experimentiere oft herum, verwende zwecks einfachheit aber klassen, die ich kombiniere wie
marr1em marl3em
wäre
margin right  1em
margin left  3em

"Ein Elemte soll also z.b. 50 Pixel vom Rand dieses Bereiches entfernt sein."
wurde schon beantwortet von einem vor-poster

"Dieses müsste also 2 Klassen angehören: der des Hauptbereiches und zusätzlich einer weiteren, die relativ 50px positioniert..."
bin nicht sicher was du meinst. du kannst
class="class1 class2 class3" kombinieren

"Ist das möglich und vor allem sinnvoll, oder soll ich besser Tabellen verwenden?"
klar is es möglich, es is so ziemlich alles möglich wenn es um das positionieren geht

sinnvoll ist es meiner meinung nur, wenn man sich arbeit erspart
ich zB benutze tabellen noch immer, allerdings nicht beim "hauptlayout"
sprich, früher hatte ich tabelle für die ganze page,
jetz benuze ich positionierte div's und in denen ab und zu mit css verschönte tabellen (verschönt heisst hier --> die benutzung und handhabung erleichternd)
ich persönlich verwende

[MudGuard]

Hi,

ich persönlich arbeite aber lieber mit
background-color grey

Solltest Du aber nicht.
[auch] bei CSS ist amerikanisches Englisch im Einsatz (z.B. "color" - nicht wie im britischen Englisch "colour").
Und im amerikanischen Englisch wird grau als gray geschrieben (im britischen Englisch als grey).

gray ist in CSS 2 (und in HTML 4.01) als Farbwert definiert, grey nicht.

ich persönlich [...] halte mich nur an W3

und dann nimmst Du grey statt gray? ;-)

und so weiter. ich experimentiere oft herum, verwende zwecks einfachheit aber klassen, die ich kombiniere wie
marr1em marl3em
wäre
margin right  1em
margin left  3em

Also Klassen nach den Eigenschaften zu benennen, die sie zum Zeitpunkt der ersten Benutzung haben, halte ich für ungünstig...
Stell Dir mal vor, Du beschließt irgendwann, den Rand doch in der Breite zu verändern:
Dann hast Du Klassennamen, die nicht mehr zu ihren Eigenschaften passen.
Oder Du mußt sämtliche Vorkommen von class="marr1em" ändern.

cu,
Andreas

[Luy]

Ok, cool, vielen vielen Dank, ihr habt mir wirklich geholfen!!!!