<div>.. mal naiv gefragt...

[Susanne]

Ihr Lieben,

Elemente mit Hilfe von <div> auf der Seite zu positionieren finde ich eigentlich sehr elegant, aber... äh... wie berücksichtige ich denn unterschiedliche Bildschirmauflösungen?
Will sagen

<div style="position:absolute; top:170px; left:270px;">

ist ja wohl bei 800 x 600er Auflösung was anderes als bei 1024 x 768?

Für zwei Grafiken habe ich jetzt ein javascript geschnitzt, welches - naja - zwei Auflösungen abfragt und dann per document.write den style mit den top- und left- Angaben auf die Seite schreibt. Aber ist das der richtige Weg?

Ich gebe zu, noch bin ich eher ein Webstümper, aber ich meine begriffen zu haben, daß ein <div>-basiertes Layout dem "klassischen" Tabellenlayout vorzuziehen ist? Habe ich SELFHTML etwas überlesen? Gibt es einen Trick? Sehe ich das vielleicht zu verkniffen?

Viele Grüße
Susanne

[Ole]

hi

<div style="position:absolute; top:170px; left:270px;">

ist ja wohl bei 800 x 600er Auflösung was anderes als bei 1024 x 768?

nein ist es nicht, denn pixel bleibt pixel. du bist jedesmal 170 pixel vom oberen und 270 pixel vom linken rand entfernt.

es gibt aber außer pixeln noch eine menge anderer maßeinheiten, sowohl absolute als auch relative. siehe:

http://selfhtml.teamone.de/css/formate/wertzuweisung.htm

so long
ole
(8-)>

[Nichtsnutz]

Hi!

<div style="position:absolute; top:170px; left:270px;">

ist ja wohl bei 800 x 600er Auflösung was anderes als bei 1024 x 768?

Nein, die Pixel bleiben immer gleich, nur wirkt es ein bischen weiter nach rechts-unten. Wenn du ein gleiches Erscheinungsbild haben willst, dann nimm doch einfach "top:10%; left:20%" (variierbar!), damit wirkt es immer gleich, ausser das Browserfenster wird verkleinert.

Für zwei Grafiken habe ich jetzt ein javascript geschnitzt, welches - naja - zwei Auflösungen abfragt und dann per document.write den style mit den top- und left- Angaben auf die Seite schreibt. Aber ist das der richtige Weg?

Unwichtig, weil siehe oben! Ausserdem müsstest du dann auch noch für alle Auflösungen der Welt Scripts schreiben (am besten stufenlos und durch einen Algorhythmus die px-Zahl durch die Auflösung ermitteln). Aber, das sollte eigentlich jetzt unwichtig für dich sein.

Viele Grüße

Gruß zurück!

[Susanne]

Nein, die Pixel bleiben immer gleich, nur wirkt es ein bischen weiter nach rechts-unten. Wenn du ein gleiches Erscheinungsbild haben willst, dann nimm doch einfach "top:10%; left:20%" (variierbar!), damit wirkt es immer gleich, ausser das Browserfenster wird verkleinert.

Huh, ja! Klingt logisch und einsichtig! Ich habe das mit meinem lustigen "möwen.gif" gleich getestet (auch mit anderen Maßeinheiten), und dennoch: das Tier lungert immer in einer anderen Ecke herum. Sieht jedenfalls so aus. Vielleicht habe ich einen Knick in der Optik - oooder aber: Die Seite baut sich nunmal aus Tabellen auf, deshalb liegt die Grafik dann bei unterschiedlichen Auflösungen über einem anderen Tabellenbereich? Umpf. Wahrscheinlich muß ich noch viel üben.

Jedenfalls verschärften Dank für die Anregungen, Euch allen.

[Calocybe]

Moin!

Elemente mit Hilfe von <div> auf der Seite zu positionieren finde ich eigentlich sehr elegant, aber... äh... wie berücksichtige ich denn unterschiedliche Bildschirmauflösungen?

Durch ein gutes (d.h. aufloesungsunabhaengiges) Layout. ;-)

<div style="position:absolute; top:170px; left:270px;">

Ich nehme an, die Backslashes sind da drin, weil Du das aus irgendeinem (PHP|Java|Perl)-Script rauskopiert hast?

ist ja wohl bei 800 x 600er Auflösung was anderes als bei 1024 x 768?

Nein, warum? Das DIV wird immer 170px von oben und 270px von links beginnend hingesetzt. Warum sollte das von der Aufloesung abhaengen?

Für zwei Grafiken habe ich jetzt ein javascript geschnitzt, welches - naja - zwei Auflösungen abfragt und dann per document.write den style mit den top- und left- Angaben auf die Seite schreibt. Aber ist das der richtige Weg?

Keine gute Sache. Erstens sehen Benutzer ohne JS schon mal gar nichts, weiterhin ist document.write immer etwas problematisch - manche Browser stuerzen da gerne mal ab.

Ich gebe zu, noch bin ich eher ein Webstümper, aber ich meine begriffen zu haben, daß ein <div>-basiertes Layout dem "klassischen" Tabellenlayout vorzuziehen ist?

Prinzipiell schon, aber es gibt auch Ausnahmefaelle.

So long

[Hans-Peter Rieger]

Ihr Lieben,

wow, was für eine Begrüßung. Können wir das als in der Self-FAQ nicht irgendwie als "Referenz" aufnehmen.

Hallo, liebe Susanne,

Antworten hat es ja nun schon einige gegeben. Deine Skepsis gegenüber <div>s (insbesondere wenn Du eine langjährige <table>-Nutzerin bist, kann ich gut nachvollziehen. Mit ging es damals nicht anders, als ich den Schritt gewagt habe. Es gehört wirklich eine etwas andere "Denke" zur Arbeit in einem <div> geprägten Web.

Ich meine beobachtet zu haben, dass <div> basierte Seiten im Internet in letzter Zeit häufiger werden und dass dies oft besser zu den oftmals wirklich sehr ausgefeilten Layouts passt als eher text-orientierte Layouts, die sich der Fenstergröße anpassen. Schau Dir doch mal (a) die Web-Auftritte "großer" Firmen an und wie oft diese für 800 * 600 Pixel ausgelegt (um mal den unpassenden Begriff "optimiert" zu vermeiden) sind und (b) wie wenig das eigentlich stört, wenn man die Seiten mit 1024 * 768 oder gar mit 1280 * 1024 Pixel betrachtet.
Ich glaube, dass auch dynamische (also prozentuale) Breiten letztendlich Platz kosten (jetzt gehts aber schon fast ins philosophische), dass diese auch irgendwo (vielleicht bei 640 bis 1280 Breitenpixel) ihre physikalischen Sinngrenzen finden und dass man in letzter Zeit statt dessen lieber statisch(er)e Layouts mit ausgefeilterer, absoluter Positionierung verwendet.

Tabellen haben bei bestimmten Anwendungen unschlagbare Vorteile. Bei dem oben beschriebenen "Trend" überwiegen aber die Vorteile von <div>s.

Kann das jemand aus der Gemeinde bestätigen ?

Ciao
Hans-Peter

[Susanne]

Ihr Lieben,

wow, was für eine Begrüßung. Können wir das als in der Self-FAQ nicht irgendwie als "Referenz" aufnehmen.

;-)) Ich dachte mir, der Ton macht die Musik... schließlich möchte ich ja, daß mir die "alten Hasen" ihre Tips verraten... außerdem bin ich selbst bis jetzt immer auf's Freundlichste vom Forum behandelt worden.

Tabellen haben bei bestimmten Anwendungen unschlagbare Vorteile. Bei dem oben beschriebenen "Trend" überwiegen aber die Vorteile von <div>s.

Tja, und genau da hänge ich nun.
Sind <table>s und <div>s natürliche Feinde?
Ich hatte mir das so schön ausgemalt: Die gehabte eckige Tabelle als Grundlayout (extra so, daß sie auch bei 800 x 600 noch paßt), includes für Navigation-Links, Navigation-Oben und in der Mitte Content, dann ein wenig Aufpeppen mit schönen Grafiken, die dann beliebig über der Tabelle "schweben".

Naja. Das nächste Web fange ich anders an.

CU
Susanne

[stefan]

Hi,

Sind <table>s und <div>s natürliche Feinde?

Naja, so halbwegs. Eigentlich sind Tabellen ja auch nur dazu da, tabellarische Inhalte darzustellen. Bloss beherrschten früher viele Browser garkein CSS, und da warscheinlich viele Leute reines Fliess-Text-layout mit ein paar Bildern zwischendrin zu öde fanden, haben sie halt die Tabellen fürs Layouten zweckentfremdet.

Heute können aber viele Browser schon ganz ordentlich CSS. Also gibt es (ausser der lieben Gewohnheit) keinen guten Grund mehr Layout-Tabellen zu verwenden. Für ein CSS-basiertes Layout rate ich Dir Folgendes:

Schreib erstmal Deine Seite in HTML im Fliesstext, mit allen Elementen, die Du haben willst (Du hast da schon sowas wie Navigation, Content etc. aufgezählt).

Achte dabei auf eine gute, _logische_ Auszeichnung (Überschriften, <em>, <strong>, <cite>, <bockquopte>, <li> usw.). Falls Dir unklar ist, was logisches Auszeichnen (im Gegensatz zum Layouten/optischen Gestalten) bedeutet, in SELFHTML  findest Du jede Menge Erklärungen (http://selfhtml.teamone.de/html/text/index.htm und speziell http://selfhtml.teamone.de/html/text/logisch.htm).

Jetzt sollte Deine Seite sehr verständlich, aber auch ziemlich trist (ist Ansichtssache) aussehen.

Als nächstes kannst Du nach belieben Deine Elemente entweder einzeln, oder in <div>s zusammengefasst formatiernen und positionieren. Dazu empfehlen sich manchmal "px", manchmal "%" und manchmal "em" Einheiten (kommt drauf an, wie sich die Elemente zueinander verhalten sollen). Prinzipiell ist aber bei Breiten-Angaben und Positonierungen beim Benutzen von "%" der Vorteil, dass die Seite skalierbar bleibt, sich die Elemente also proportional zur Fenstergrösse anordnen (um auf Deine Ausgangsfrage zurückzukommen).

Der Vorteil von Dieser ganzen Prozedur: Die Seite bleibt auch ohne CSS gut lesbar und Du hast kein Kruschelmuschel mit Layout-Tabellen.

Um zu Deinen "schwebenden" Graphiken zurückzukommen: Wenn diese unbedingt an einer bestimmten Stelle Positioniert werden sollen, nehme ich an, dass sie sich inhaltlich auch auf Diese Stelle beziehen. Schreib sie also ersteinmal in den Fliess-Text, an die inhaltlich richtige Stelle, umfasse beides mit einem <div> und positioniere die Graphiken nachher innerhalb des <div>s. Nicht nur <div>s können mit CSS positioniert werden, auch bei allen anderen HTML-Elementen ist dies möglich.

Naja, genug aus dem Nähkästchen geplaudert, vielleicht hilfts Dir ja irgendwie weiter :)

viel Erfolg + schö
stefan

[Susanne]

Stefan, ich bin beeindruckt von dieser ausführlichen Antwort, damit kann ich echt was anfangen! Ich freue mich darauf, die beschriebene Vorgehensweise auszuprobieren!

Vielen Dank
Susanne

[Michael Jendryschik]

Sind <table>s und <div>s natürliche Feinde?

Nein! Überlege dir ein Konzept und erarbeite eine Lösung, mit der du dein Konzept umsetzen kannst.
Allerdings: Tabellen sind geordnet angezeigte Daten in parallelen Spalten oder rechtwinkligen Anordnungen, welche sich nach einer bestimmten Regel aufeinander beziehen. Tabellen eignen sich dazu, Informationen in (visuell) sinnvolle Untermengen zu organisieren. Das XHTML Tabellen-Modell erlaubt es Autoren, Daten (wie zum Beispiel Text, Bilder, Hyperlinks, Formulare oder andere Tabellen) in Spalten und Zeilen anzuordnen. Tabellen sind eigentlich nicht dazu gedacht, das gesamt Seitenlayout zu konzipieren. Das solltest du beachten. Dennoch ist eine saubere Tabellen-Lösung einer skurrilen <div>-Tag-Soup vorzuziehen, wenn die Umsetzung deines Konzeptes mit sinnvollem Markup zum Scheitern verurteilt ist.

MI

[Michael Jendryschik]

Antworten hat es ja nun schon einige gegeben. Deine Skepsis gegenüber <div>s (insbesondere wenn Du eine langjährige <table>-Nutzerin bist, kann ich gut nachvollziehen. Mit ging es damals nicht anders, als ich den Schritt gewagt habe.

In HTML gibt es nur gutes und schlechtes Markup, sprich: logisches und unlogisches Markup. Man muss abwägen, ob eine Tabelle oder eine Lösung mit 'div' die richtige Auszeichnung ist. Ich sehe nicht, wo hier ein Schritt gewagt werden muss.

Es gehört wirklich eine etwas andere "Denke" zur Arbeit in einem <div> geprägten Web.
                                                                  ^^^^^^^^^^^^^^^^^^^
Wenn ich so etwas lesen muss, wird mir schlecht.

Ich glaube, dass auch dynamische (also prozentuale) Breiten letztendlich Platz kosten (jetzt gehts aber schon fast ins philosophische), dass diese auch irgendwo (vielleicht bei 640 bis 1280 Breitenpixel) ihre physikalischen Sinngrenzen finden und dass man in letzter Zeit statt dessen lieber statisch(er)e Layouts mit ausgefeilterer, absoluter Positionierung verwendet.

Es steht dir frei, dein Browserfenster auf die Größe zu skalieren, die dir ein angenehmes Betrachten der Inhalte ermöglicht. Ich persönlich finde ein festes Layout, egal ob mit Tabellen oder 'div' realisiert, dumm, daher kann ich weder einen Trend erkennen, noch deine Ansicht bestätigen.´

MI

[Hans-Peter Rieger]

Hi Michael,

In HTML gibt es nur gutes und schlechtes Markup,

und nur gute und schlechte Menschen und auf die Schlechten schmeißen wir Bomben.

Man muss abwägen, ob eine Tabelle oder eine Lösung mit 'div' die richtige Auszeichnung ist. Ich sehe nicht, wo hier ein Schritt gewagt werden muss.

Sehr viele Leute haben ihr Layout lange Zeit mit Tabellen gestaltet. Um nun zusätzlich oder ersatzweise ein doch recht andere gestalterische Methode zu verwenden, ist dazu selbstverständlich ein anderes Vorgehen notwendig. Es geht hier nicht um das technische, sondern um das gestalterische Element.

Wenn ich so etwas lesen muss, wird mir schlecht.

Wenn Du das Rentenalter erreichen möchtest, dann solltest Du Dich entweder mal um Deinen Blutdruck kümmern oder Dir vielleicht überlegen, wie Du mit Deinen Mitmenschen umgehen möchtest. In jedem Fall hinterlasst Du hier mit derlei inadäquatem Gepöpel einen schlechten Eindruck.

Ich persönlich finde ... daher kann ich weder einen Trend erkennen, noch deine Ansicht bestätigen.´

Na dann halt nicht. Deine Kausal-Kette ist übrigens nicht wirklich geschlossen.

Ciao
Hans-Peter

PS: Und den Ball immer schön flach halten

[MudGuard]

Hi,

Für zwei Grafiken habe ich jetzt ein javascript geschnitzt, welches - naja - zwei Auflösungen abfragt und dann per document.write den style mit den top- und left- Angaben auf die Seite schreibt. Aber ist das der richtige Weg?

Nein.

1. steht Javascript nicht immer zur Verfügung
2. hat die Bildschirmauflösung noch immer nichts mit dem zur Verfügung stehenden Platz zu tun. Fenster können sowohl kleinere als auch größere Breiten/Höhen (unabhängig voneinander) haben als der Bildschirm (gib mal im IE in der Adreßzeile folgendes ein:
javascript:resizeTo(100,2000);
und staune).

cu,
Andreas