DIVs vs Tabellen

[bloonix]

Hallo zusammen,

vor langer Zeit schon habe ich mal gelesen, dass Tabellen zum
Layout von Webseiten deprecated sind. Nun habe ich vor einigen
Tagen angefangen, meine Homepage zu entwickeln und musste
feststellen, dass ich für das Grundgerüst alleine schon 20 DIVs
benötige. Die meistgenutzen Browser wie IE, Firefox und Opera
zeigen die Seite richtig an, nur weiß ich nicht, ob ich das so
richtig gemacht habe oder ob man das besser machen könnte.
Es scheint so, als würde die Seite in ein DIV-Chaos ausarten. :)

Für die folgenden "Dinge" habe ich einen DIV benötigt:

* 800px um den Content zu fixieren
* zum zentrieren des Contents
* 10 Linkblöcke in der oberen Navigation
* weitere 6 DIV-Boxen für Textblöcke oder Bilder
* rechte Navigation
* linke Navigation

Das Grundgerüst kann man hier sehen.

VG,
bloonix

[hubert n.]

Servus!
Vielleicht solltest du uns sagen, wie es fertig als richtige Seite aussehen soll. So wie du es uns präsentierst ist es (zumindest für mich) nicht möglich zu sagen, ob du etwas vereinfachen kannst, weil ich dein Ziel nicht kenne.
servus, hubert

[bloonix]

Servus!
Vielleicht solltest du uns sagen, wie es fertig als richtige Seite aussehen soll. So wie du es uns präsentierst ist es (zumindest für mich) nicht möglich zu sagen, ob du etwas vereinfachen kannst, weil ich dein Ziel nicht kenne.
servus, hubert

Hallo Hubert,

vielen Dank für deine schnelle Antwort.

Das Grundgerüst der Seite ist soweit fertig. Damit meine ich,
dass nur doch die Boxen 1-6 mit Leben gefüllt werden müssen, also
mit Text, mit Bildern etc. Es wird sich am Layout nicht mehr viel
ändern, nur das die Position der Boxen variiert.

Gruss,
bloonix

[Gunther]

Hallo,

Es scheint so, als würde die Seite in ein DIV-Chaos ausarten. :)

es scheint richtig. Du verwendest unnötigerweise viel zu viele DIVs. Es gibt in HTML durchaus auch noch andere Elemente, die sich mit CSS bspw. positionieren lassen.

Mir scheint, du hast einen Entwurf in tabellenform gemacht und diesen 1:1 (jede Tabellenzelle = 1 DIV) umgesetzt, nur halt ohne Tabellen zu verwenden. Das ist nicht der richtige Ansatz.

Überlege dir, was für Inhalte wohin kommen sollen und wähle die dazu semantisch korrekten HTML-Tags aus und positioniere diese ggf. per CSS in der gewünschten Form. DIVs dienen als "Container" für andere Elemente und sollten eigentlich nur da verwendet werden, wo man sich dadurch die wiederholte Positionierung anderer Elemente sparen kann. Typische Beispiele sind mehrspaltige Layouts. Dort werden dann halt die Spalten per DIV "erzeugt" und per CSS entsprechend formatiert. Innerhalb der DIV-Container finden sich dann bspw. <p> Elemente wieder, die Text und Bilder enthalten (pro Absatz ein P-Element).

Und daraus folgt quasi automatisch: Wo kein Inhalt (Content), da auch kein Element (egal welches, ausser eben DIV-Elementen als Container). Das ist u.a. auf deine vier farbigen DIVs links oben bezogen.

Gruß Gunther

[bloonix]

Hallo Gunther,

danke für deine Antwort. Mir ist allerdings noch nicht ganz klar,
was du mir sagen wolltest, deshalb frage ich nochmal nach, falls
es recht ist. :)

Mir scheint, du hast einen Entwurf in tabellenform gemacht und diesen 1:1 (jede Tabellenzelle = 1 DIV) umgesetzt, nur halt ohne Tabellen zu verwenden. Das ist nicht der richtige Ansatz.

Da liegst du nicht ganz richtig. Ich habe mir beim Entwurf der
Seite keine Gedanken um Tabellen oder DIVs gemacht, sondern habe
ein Boxenmodell entworfen. Die Boxen sehen ebenso schematisch aus
wie eine Tabelle, aber das hat nichts zu sagen.

Überlege dir, was für Inhalte wohin kommen sollen und wähle die dazu semantisch korrekten HTML-Tags aus und positioniere diese ggf. per CSS in der gewünschten Form.

Meinst du damit, dass ich für die obere Navigation keine a-Elemente
in DIVs verwenden soll, sondern nur die a-Elemente? Ohne DIV, als
Block?

DIVs dienen als "Container" für andere Elemente und sollten eigentlich nur da verwendet werden, wo man sich dadurch die wiederholte Positionierung anderer Elemente sparen kann. Typische Beispiele sind mehrspaltige Layouts. Dort werden dann halt die Spalten per DIV "erzeugt" und per CSS entsprechend formatiert. Innerhalb der DIV-Container finden sich dann bspw. <p> Elemente wieder, die Text und Bilder enthalten (pro Absatz ein P-Element).

Nun, in meinen DIVs finden sich a-Elemente wieder, was soweit ok
ist, wenn ich dich richtig verstanden habe.

Und daraus folgt quasi automatisch: Wo kein Inhalt (Content), da auch kein Element (egal welches, ausser eben DIV-Elementen als Container). Das ist u.a. auf deine vier farbigen DIVs links oben bezogen.

Findest du die vier kleinen DIVs oben links also nicht richtig?
Welches Element - kein Image - würdest du dafür verwenden?

Gruss,
bloonix

[hubert n.]

Servus!
Ich habe mal eine Frage. Brauchst du _wirklich_ so viele Boxen? Ich kann es mir irgendwie nicht vorstellen, kann aber trotzdem sein ;-). Aber an deiner Stelle würde ich mir einfach mal Layouts anschauen, die mit CSS gemacht sind. CSS Zen Garden ist dafür perfekt. Ich glaube nämlich, dass du noch zu sehr in deinem Tabellendenken drin bist. Bei mir war es auch so, aber sowas ist heilbar ;)

Meinst du damit, dass ich für die obere Navigation keine a-Elemente
in DIVs verwenden soll, sondern nur die a-Elemente? Ohne DIV, als
Block?

Eine Navigation gehört eigentlich in eine Liste. Aber das wird bei deinem Design etwas schwierig.

Und daraus folgt quasi automatisch: Wo kein Inhalt (Content), da auch kein Element (egal welches, ausser eben DIV-Elementen als Container). Das ist u.a. auf deine vier farbigen DIVs links oben bezogen.

Findest du die vier kleinen DIVs oben links also nicht richtig?
Welches Element - kein Image - würdest du dafür verwenden?

Warum kein Image? Das ist m.E. die einzig richtige Lösung dafür.
servus
ps: Das ist auch gut.

[bloonix]

Ich habe mal eine Frage. Brauchst du _wirklich_ so viele Boxen?

Ja, denn die Boxen machen Änderungen spielend leicht über eine
zentrale CSS Datei, ohne den HTML-Code ändern zu müssen. Wenn ich
nur die 13. Box farblich ändern möchte, dann geht das nicht so
einfach.

Ich glaube nämlich, dass du noch zu sehr in deinem Tabellendenken drin bist. Bei mir war es auch so, aber sowas ist heilbar ;)

Das ist meine erste Seite, die ich entwickel! Ich kann also nichts
mit Tabellendenken anfangen! Meine Rede war von schematisch, nicht
tabellarisch. Das Tabellen auch schematisch sind, hat nichts mit
meinem Entwurf zu tun. :)

Eine Navigation gehört eigentlich in eine Liste. Aber das wird bei deinem Design etwas schwierig.

Nein, das ist nicht ganz richtig. Eine Navigation muss nicht zwingend
in eine Liste gehören, womit du wahrscheinlich auf ul-Elemente
anspielst. Es gibt Layouts, wie du selbst schon angedeutet hast,
die eine Auflistung mit ul schwer bzw. unzumutbar machen. Das heißt
nicht, dass das Layout unzumutbar ist, sondern nur, dass ul-Elemente
auch irgendwann nicht mehr verwendet werden sollten.

Warum kein Image? Das ist m.E. die einzige Lösung dafür.
servus

Okay, das werde ich mir nochmal durch den Kopf gehen lassen, denn
hier ist es wohl wirklich optimaler, wenn ich ein Image entwerfe,
was ja mit Gimp oder so nicht schwer sein sollte.

Ich danke allen für die offene Meinung.

Gruss,
bloonix

[hubert n.]

servus!

Ich habe mal eine Frage. Brauchst du _wirklich_ so viele Boxen?

Ja, denn die Boxen machen Änderungen spielend leicht über eine
zentrale CSS Datei, ohne den HTML-Code ändern zu müssen. Wenn ich
nur die 13. Box farblich ändern möchte, dann geht das nicht so
einfach.

Stimmt. Das Verändern wird durch CSS erleichtert. Ich glaube nur vor, dass deine Seite dadurch sehr bunt wird. Dabei spielt jetzt mein eigener Geschmack aber mithinein. Ich mag lieber ruhige Seite mit gleichmäßigen Farben.

Ich glaube nämlich, dass du noch zu sehr in deinem Tabellendenken drin bist. Bei mir war es auch so, aber sowas ist heilbar ;)

Das ist meine erste Seite, die ich entwickel! Ich kann also nichts
mit Tabellendenken anfangen! Meine Rede war von schematisch, nicht
tabellarisch. Das Tabellen auch schematisch sind, hat nichts mit
meinem Entwurf zu tun. :)

Achso! Ich dachte du würdest gerade von Tabellen auf CSS umsteigen. Weil diesen Umstieg fand ich sehr schwierig.

Eine Navigation gehört eigentlich in eine Liste. Aber das wird bei deinem Design etwas schwierig.

Nein, das ist nicht ganz richtig. Eine Navigation muss nicht zwingend
in eine Liste gehören, womit du wahrscheinlich auf ul-Elemente
anspielst. Es gibt Layouts, wie du selbst schon angedeutet hast,
die eine Auflistung mit ul schwer bzw. unzumutbar machen. Das heißt
nicht, dass das Layout unzumutbar ist, sondern nur, dass ul-Elemente
auch irgendwann nicht mehr verwendet werden sollten.

Ich meinte auch nicht, dass dein Layout unzumutbar ist! Ich meinte es genauso, wie du es gerade beschrieben hast :) Eine Navigation muss auch nicht zwingend in eine Liste. Das ist kein Standard oder so. Aber eine Navigation ist eine _Liste_ von Links. Deswegen wäre es semantisch eigentlich besser, wenn du es in eine Liste packen würdest.
Aber ich würde es an deiner Stelle auch nicht in eine Liste packen, da das sehr umständlich wäre.
servus

[bloonix]

Stimmt. Das Verändern wird durch CSS erleichtert. Ich glaube nur vor, dass deine Seite dadurch sehr bunt wird.

Keine Sorge, die bunten Boxen sind nur da um das Gerüst kenntlich
zu machen und um zu schauen, ob sie die richtigen Länge haben. Sie
werden einen weißen Hintergrund bekommen. :)

Aber ich würde es an deiner Stelle auch nicht in eine Liste
packen, da das sehr umständlich wäre.
servus

Ich habe es mir trotzdem mal zu Herzen genommen und die Navigation
geändert.

Hier ein weiteres Layout.

[hubert n.]

servus!

Stimmt. Das Verändern wird durch CSS erleichtert. Ich glaube nur vor, dass deine Seite dadurch sehr bunt wird.

Keine Sorge, die bunten Boxen sind nur da um das Gerüst kenntlich
zu machen und um zu schauen, ob sie die richtigen Länge haben. Sie
werden einen weißen Hintergrund bekommen. :)

Aber strenggenommen brauchst du dann nur eine Div-Box ;)

Aber ich würde es an deiner Stelle auch nicht in eine Liste
packen, da das sehr umständlich wäre.
servus

Ich habe es mir trotzdem mal zu Herzen genommen und die Navigation
geändert.

Das sieht nicht schlecht aus! Weiter so!
servus

[Patrick Andrieu]

Hallo bloonix!

Hier ein weiteres Layout.

In FF sieht es gut aus. Nicht so im IE (6)...

Viele Grüße aus Frankfurt/Main,
Patrick

[bloonix]

Hallo Patrick,

In FF sieht es gut aus. Nicht so im IE (6)...

Danke! :)

Hast du einen Screenshot oder kannst du mir erklären, was mit IE
nicht so aussieht, wie es aussehen sollte? Ich habe mir schon
gedacht, dass es da Unterschiede geben wird. :(

Gruss,
bloonix

[Patrick Andrieu]

Hallo bloonix!

Hast du einen Screenshot

http://atomic-eggs.com/z_testdir/bloonix.gif

Ich habe mir schon gedacht, dass es da Unterschiede geben wird. :(

Hast Du keinen IE zum testen? Wenn nicht, gibt es Dienste die Captures machen, da hättest Du es auch sehen können. Adressen habe ich derzeit keine zur Hand, vielleicht aber ein Mitleser hier.

Viele Grüße aus Frankfurt/Main,
Patrick

[bloonix]

Hast Du keinen IE zum testen? Wenn nicht, gibt es Dienste die Captures machen, da hättest Du es auch sehen können. Adressen habe ich derzeit keine zur Hand, vielleicht aber ein Mitleser hier.

Nein, sorry, ich habe nur Linux in Benutzung. Ich habe mal angedacht,
eventuell Windows unter VMWare zu installieren oder 5 GB von der
Platte zu klauen... mal schauen.

Hmmm... das kann nur an irgendein margin oder padding liegen...

Kannst du jetzt nochmal nachschauen? Ich habe ein "margin: 0 auto"
nach "margin: 0 0" in "#navigation ul {}" geändert.

[Mathias Brodala]

Hallo bloonix.

Hast Du keinen IE zum testen? [...]

Nein, sorry, ich habe nur Linux in Benutzung.

... was kein Hindernis darstellt.

Einen schönen Donnerstag noch.

Gruß, Mathias

[Patrick Andrieu]

Hallo bloonix!

Hmmm... das kann nur an irgendein margin oder padding liegen...
Kannst du jetzt nochmal nachschauen? Ich habe ein "margin: 0 auto"
nach "margin: 0 0" in "#navigation ul {}" geändert.

Jetzt sieht es gut aus. Der Text im IE ist gerinfüger weiter nach unten gestreckt, anscheinend macht IE die Abstände zw. den Abschnitten etwas Größer.

  
<p style="margin-top: 20px; margin-bottom: 20px;">  
<b>Willkommen auf meiner Homepage! :)</b>  
<p>  
Mein Name ist Jonny Schulz und ich bin Administrator f&uuml;r Linux- und Datenbanksysteme, insbesondere  
Debian, SuSE, Red Hat, Oracle und MySQL.  
<p>  
<img style="float: right; margin: 6px;" src="jonny.jpg" alt="thats me"/>  
Beruflich wie auch in meiner freien Zeit entwickel ich Perlskripts, welche mir die Adminstration von Linuxsystemen vereinfachen. Ganz besonders was die Performance von Systemen betrifft, versuche ich immer einen Schritt voraus zu sein.  
<p>  
Auch das Entwickeln von Hilfswerkzeugen, die &uuml;ber dein Browser gesteuert werden, macht mir besonders Spa&szlig;.  
<p>  
Vielleicht ist in meiner kleinen - jedoch stetig wachsenden - Skriptsammlung auch was f&uuml;r Sie dabei. Schauen Sie sich einfach um.  
<p>  
Viel Spa&szlig; auf den folgenden Seiten w&uuml;nscht Ihnen  
</p>  

<b> ist zwar nicht verboten, doch nicht mehr empfohlen. <strong> erzielt derzeit in den gängigen Browsern fetten Text (wenn durch CSS nicht anders formatiert).

<p> muss man zwar nicht schließen, wenn Du es aber im letzten Absatz machst, solltest Du es überall machen und evtl. alles in einer Zeile schreiben:

<p>Inhalt</p>
<p>Weiterer Inhalt</p>
<p>Noch mehr Zeugs</p> (bessere Übersicht - ok, jeder macht es wie es will, ich komme jedenfalls so besser zurecht).

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Re nochmal!

Wenn ich schon dabei mit (für Dich hoffentlich konstrutkive) Kritik... das Folgenden ist mir eben erst aufgefallen:

Beruflich wie auch in meiner freien Zeit entwickel ich Perlskripts,

Korrekt wäre:
entwickle ich Perlskripte
       ^                ^

Die Mehrzahl von Skript (Deutsch) ist Skripte (haut mich einer, wenn ich mich irre, ich habe jetzt nicht nachgeprüft). Daher entweder Perlskripte oder Perl-Scripts schreiben.

Auch das Entwickeln von Hilfswerkzeugen, die &uuml;ber dein

Browser

Du meinst wahrscheinlich nicht meinen Browser ;) Außerdem kommt nach über in dem Fall ein Akusativ: "die über einen Browser"

Vielleicht ist in meiner kleinen - jedoch stetig wachsenden - Skriptsammlung

Ich würde auch hier eher Skriptesammlung schreiben, Du hast ja sicherlich mehr als ein Skript in Deiner Sammlung ;)

Das HTML-gerechte Kodieren der Umlauten kannst Du Dir mit einer ensprechenden Charset-Angabe sparen.

versuche ich immer einen Schritt voraus zu sein.

^^

Hier ist der Akkusativ falsch:
versuche ich immer, ein Schritt voraus zu sein.
                  ^ Komma vor Nebensatz

Richtig wäre er in:
versuche ich immer, einen Schritt weiter zu gehen.

Viele Grüße aus Frankfurt/Main,
Patrick

[bloonix]

Hallo,

also ich bin froh für jede konstruktive Meinung!

entwickle ich Perlskripte
       ^                ^

es gibt drei zulässige Pluralformen von Skript:

1. Skripten
2. Skripte
3. Skripts

Auch das Entwickeln von Hilfswerkzeugen, die &uuml;ber dein
Browser

Oops... ein "i" zuviel :)

Vielleicht ist in meiner kleinen - jedoch stetig wachsenden - Skriptsammlung

Skriptesammlung passt hier natürlich eher!

Bei dem Rest gebe ich dir vollkommen Recht, obwohl ich den Text
nur flüchtig geschrieben habe um die Seite mit Leben zu füllen.
Ich bemühe mich derzeit noch um den Code, also verschwende deine
Zeit - wenn - erst mit der Rechtschreibung, wenn die Seite online
geht. *g*

Danke trotzdem für deine Ratschläge. Die sind sehr hilfreich.

Gruss,
bloonix

[Patrick Andrieu]

Hallo bloonix!

es gibt drei zulässige Pluralformen von Skript:

1. Skripten
2. Skripte
3. Skripts

Na siehst Du, da habe ich wieder was gelernt! Persönlich jedoch werde ich bei dem Plural "Skripte" bleiben ;)

nur flüchtig geschrieben habe um die Seite mit Leben zu füllen.

War mir auch klar, ber ich dachte, was ich jetzt sehe kann ich auch jetzt schon mitteilen. Wer weiß, was ich in zwei Wochen mache ;)

Danke trotzdem für deine Ratschläge. Die sind sehr hilfreich.

Danke, gerne geschehen!

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Hi,

es gibt drei zulässige Pluralformen von Skript:

1. Skripten
2. Skripte
3. Skripts

Die Form 1. ist sehr ungewöhnlich; ich würde sie nur in wissenschaftlichen Kontexten benutzen, wo man auch den Singular Skriptum benutzt. Ansonsten scheint die Pluralform "Skripte" üblich zu sein; lediglich in der Umgangssprache hat sich "Skripts" sehr verbreitet - allerdings nur bei Komposita wie Javascripts, Perlscripts oder Installationsscripts. Wobei im technisch-wissenschaftliche Umfeld alle drei Formen, wie auch der Singular, auch gern mit 'c' geschrieben werden (Script anstatt Skript).

Vielleicht ist in meiner kleinen - jedoch stetig wachsenden - Skriptsammlung
Skriptesammlung passt hier natürlich eher!

Geschmackssache. Schließlich redet ja auch keiner von einer Muschelnsammlung oder einer Schuhesammlung. Ob vor "Sammlung" nun der Singular oder der Plural verwendet wird, scheint mir nicht durch eine Regel festgelegt zu sein.

So long,
 Martin

[Der Martin]

Hallo Patrick,

Beruflich wie auch in meiner freien Zeit entwickel ich Perlskripts,
Korrekt wäre:
entwickle ich Perlskripte
       ^                ^

natürlich ist "entwickle" richtig, das andere ist ausgeprägte Umgangssprache. Den Plural "Perlscripts", dann aber bitte mit 'c', finde ich dagegen in Ordnung.

versuche ich immer einen Schritt voraus zu sein.
                         ^^

Hier ist der Akkusativ falsch:
versuche ich immer, ein Schritt voraus zu sein.

Nein, auch wenn ich zugebe, dass Nicht-Muttersprachkler in der deutschen Grammatik manchmal besser Bescheid wissen als Eingeborene. Aber mit welcher Begründung siehst du hier den Akkusativ als falsch? Selbst Maßeinheiten werden im Fließtext dekliniert: "Es dauert noch ein_en_ Tag", "Geh mal ein_en_ Meter zur Seite", und eben auch "Ich bin immer ein_en_ Schritt voraus".

^ Komma vor Nebensatz

Der Hinweis ist allerdings richtig. Man könnte das Komma sogar wahlweise an zwei verschiedenen Stellen setzen:
 a) ... versuche ich immer, einen Schritt voraus zu sein.
 b) ... versuche ich, immer einen Schritt voraus zu sein.

Richtig wäre er in:
versuche ich immer, einen Schritt weiter zu gehen.

Das ist grammatikalisch dieselbe Situation. Beidesmal Akkusativ.

Schönen Abend noch,
 Martin

[Patrick Andrieu]

Hallo Martin!

Ich mach beim Tippen öfters Aumerksamkeitsfehler - meistens neige ich dazu, fast überall einen "n" hinzuzufügen, aber in Grammatik hoffe ich, fit zu sein. Schließlich hatte ich gute Deutschlehrer, sowohl in Schule und Uni. Wir durften genug "Übungen mit Präpositionen, Pronomen und Verben" (oder wie das Heft mal hieß) machen!

Hier ist der Akkusativ falsch:
versuche ich immer, ein Schritt voraus zu sein.
Nein, auch wenn ich zugebe, dass Nicht-Muttersprachkler in der deutschen Grammatik manchmal besser Bescheid wissen als Eingeborene. Aber mit welcher Begründung siehst du hier den Akkusativ als falsch? Selbst Maßeinheiten werden im Fließtext dekliniert: "Es dauert noch ein_en_ Tag", "Geh mal ein_en_ Meter zur Seite", und eben auch "Ich bin immer ein_en_ Schritt voraus".
Das ist grammatikalisch dieselbe Situation. Beidesmal Akkusativ.

Nein. Das Verb "sein" generiert nie einen Akkusativ. Haben, dauern, gehen dagegen schon. Schlag mal nach?

auch wenn ich zugebe, dass Nicht-Muttersprachkler in der deutschen Grammatik manchmal besser Bescheid wissen als Eingeborene

Bin ich Dir da ein Schritt voraus? ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Bonsoir Patrick,

Das Verb "sein" generiert nie einen Akkusativ.

d'accord. Aber das hier ist eine etwas andere Satzkonstruktion. Der Satz entsteht nicht aus "Ich bin ein Schritt", sondern aus "Ich bin voraus". Der Zusatz "einen Schritt" ist eine adverbiale Ergänzung zu "voraus": Wieviel voraus? - Einen Schritt.

auch wenn ich zugebe, dass Nicht-Muttersprachler in der deutschen Grammatik manchmal besser Bescheid wissen als Eingeborene
Bin ich Dir da ein Schritt voraus? ;)

Ich glaube nicht, ich bin mir in diesem Fall sehr sicher, wenn auch ein gewisser Rest Zweifel bleibt. Als Telefonjoker bei Günter Jauch würde ich sagen, "zu mindestens 90% sicher".

Schönen Abend noch,
 Martin

[Mathias Brodala]

Hallo Martin.

Bin ich Dir da ein Schritt voraus? ;)

Ich glaube nicht, ich bin mir in diesem Fall sehr sicher, wenn auch ein gewisser Rest Zweifel bleibt.

Zudem heißt es ja „der“ Schritt und nicht „das“ Schritt.

Einen schönen Donnerstag noch.

Gruß, Mathias

[Patrick Andrieu]

Hallo Mathias!

Bin ich Dir da ein Schritt voraus? ;)
Zudem heißt es ja „der“ Schritt und nicht „das“ Schritt.

Es heißt auch "Der Martin" und trotzdem nicht "ich bin nicht den Martin" ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo Patrick!

Schritt voraus...

Die mehrheitliche Schreibweise scheint Euch Recht zu geben:

Schritt voraus

Wahrscheinlich, weil in dem Satz irgend ein Akkusativ-generierendes Verb unterstellt wird.

Viele Grüße aus Frankfurt/Main,
Patrick

[Detlef G.]

Hallo bloonix

Ich habe es mir trotzdem mal zu Herzen genommen und die Navigation
geändert.

Hier ein weiteres Layout.

Sieht ganz gut aus.
Allerdings setzt du exra gefloatete Elemente ein, um jeweils ein Hintergrundschnipselchen anzuzeigen. Zerschnittene Grafiken anneinanderzulegen war bei Tabellenlayouts üblich. Bei einem CSS-Layout ist es meist vorteilhafter die notwendigen Teile übereinander zu legen. Außerdem bringt es keine wirklichen Vorteile zu kleine Grafiken zu verwenden, weil jede einzelne Grafik extra vom Server angefordert werden und von diesem auch extra übertragen werden muss. Dabei gehen etliche Bytes nur für diese Kommunikation drauf, so dass viele kleine Grafiken leicht mehr Ladezeit und Traffik verbrauchen können, als wenige etwas größere.

Schau dir mal meine Variante zu deinem Layout an und frage ruhig hier nach.

Auf Wiederlesen
Detlef

[bloonix]

Hallo Detlef,

Schau dir mal meine Variante zu deinem Layout an und frage ruhig hier nach.

So wie das aussieht, hast du die Navi in genau zwei Teile zusammen,
gesetzt. Sowas hatte ich mir zunächst auch gedacht. Allerdings
spielte auch die Übertragung der Grafik bei mir eine Rolle.

Die rechte und linke Navi-Grafiken sind jeweils 6x40 Pixel gross.
Die mittlere Grafik ist 1x40 Pixel gross. Somit werden drei
kleinere Grafiken übertragen, was ziemlich fix gehen sollte und
weniger KB sind. Wenn ich insgesamt zwei Grafiken mit jeweils
400x40 Pixel erstellen würde, dann wären diese knapp 100 Mal Größer.
Liege ich da falsch?

Vielen Dank für dein Beispiellayout.

Hast du die zwei Balken auch mit Gimp erstellt? Oder kennst du
eine gute Seite, wo man sich diverse Grafiken frei herunterladen
kann?

Gruss,
bloonix

[Detlef G.]

Hallo bloonix

So wie das aussieht, hast du die Navi in genau zwei Teile zusammen,
gesetzt. Sowas hatte ich mir zunächst auch gedacht. Allerdings
spielte auch die Übertragung der Grafik bei mir eine Rolle.

Genau, desshalb zwei Grafiken im richtigen Format statt drei.

Die rechte und linke Navi-Grafiken sind jeweils 6x40 Pixel gross.

jeweils als JPG mit 515 Byte

Die mittlere Grafik ist 1x40 Pixel gross.

als JPG 435 Byte

Somit werden drei
kleinere Grafiken übertragen, was ziemlich fix gehen sollte und
weniger KB sind. Wenn ich insgesamt zwei Grafiken mit jeweils
400x40 Pixel erstellen würde, dann wären diese knapp 100 Mal Größer.

navi-left.png 603 Byte und navi-right.png 584 Byte

Liege ich da falsch?

Ja

Du vergisst dabei dass die Grafiken nicht als unkomprimierte Bitmaps gespeichert werden, sondern in einem komprimierenden Grafikformat. Dadurch kann es durchaus passieren, dass der Bildinhalt und die Wahl des dazu passenden Dateiformats einen größeren Einfluss auf die Dateigröße hat, als die Abmessungen.
Grafiken, die überwiegend durchgehende Farbflächen oder/und gerade Linien aufweisen können bei GIF und bei PNG (dort auch gleichmäßige Farbverläufe) sehr effektiv komprimiert werden.

Jetzt rechnen wir mal.
Bei deinem Beispiel muss der Browser drei Grafiken einzeln anfordern, also zusammem knapp 1,5 KB an Nutzdaten, dafür schickt er drei Anfragen an den Server und bekommt drei Antworten mit noch einmal jeweils etwa 1 KB an Headerdaten.
Das ergibt also etwa 4,5 KB.

Bei meinem Beispiel werden zwei Grafiken mit zusammen knapp 1,2 KB und zwei Header übertragen, das ergibt 3,2 KB.

In deinem Fall, bei festzementierter Seitenbreite würde auch eine Grafik von knapp 800 Byte reichen. Die zwei Grafiken erlauben dir aber diese für jede Breite bis maximal 1600px vewenden zu können.

Hast du die zwei Balken auch mit Gimp erstellt?

Nein, ich habe sie überhaupt nicht "erstellt".
Für navi-right.png habe ich einfach deine navigation-middle.jpg auf die entsprechend Breite gezogen und dann navigation-right.jpg draufgeklebt. Dann habe ich diese einfach horizontal gespiegelt um navi-left.png zu erhalten.

Mit Gimp arbeite ich nicht, damit habe ich mich noch nie wirklich beschäftigt. Ich verwende Ulead PhotoImpact 8, daran habe ich mich gewöhnt.

Auf Wiederlesen
Detlef