CSS Bewertung

[Christian Walgenbach]

Hallo,

habe eine Homepage im 3-Spalten-Layout unter http://www.lfzm.de

Ich möchte wissen, ob sich meine Seite korrekt in Sachen "Browser kleiner machen" verhält.

by Christian

[Cyx23]

Hallo,

habe eine Homepage im 3-Spalten-Layout unter [.. "www.lfzm.de" ]

Ich möchte wissen, ob sich meine Seite korrekt in Sachen "Browser kleiner machen" verhält.

warum hast du nicht einfach eine Tabelle genommen?

Grüsse

Cyx23

p.s., zu "marquee" und Gesundheitsschäden Zitat aus d. Quelltext:

blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
...
 setInterval("doBlink()",1500)

[Christian Walgenbach]

Hallo Cyx23,

warum hast du nicht einfach eine Tabelle genommen?

habe im Forum gelesen, dass ein 3-Spalten Layout mit CSS und Div-Container besser sein soll.

by Christian

[Detlef G.]

Hallo Christian,

schön, dass du den Versuch aufgegeben hast, die Seite als 100%ige
Framenachbildung zu erstellen.

habe im Forum gelesen, dass ein 3-Spalten Layout mit CSS und Div-Container besser sein soll.

Naja, es ist gut, wenn Tabellen nur für tabellarische Daten verwendet werden.
Der Sinn beim CSS-Layouts soll aber darin bestehen den Seiteninhalt logisch
auszuzeichnen, zu strukturieren, so dass die Seite ohne CSS zwar nicht schön
aber übersichtlich und gut benutzbar ist. Es sollten (soweit wie möglich)
keine Elemente enthalten sein, die nicht zum eigentlichen Inhalt gehören.
Div und Span sollten nur zum Gruppieren anderer Elemente verwendet werden.
Alles, was das Aussehen betrifft gehört dann ins CSS.

Wenn ich mir aber dein Menü ansehe ...
Für mich sind die Hauptpunkte eine Liste, die jeweils eine weitere Liste
mit den Unterpunkten enthält.

Der Quelltext sieht aber aus, als ob du von einer Tabelle ausgegangen bist,
die Tabellenelemente durch Divs und Spans ersetzt hast und die Spacergifs
durch Absätze.

Und bitte nimm das nervige Geblinke raus.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Und bitte nimm das nervige Geblinke raus.

Da ist Selbsthilfe angesagt. ;-)

blink { text-decoration:none !important; }
blink:before { content:'<blink>'; color:red; font: normal 15px monospace; }
blink:after { content:'</blink>'; color:red; font: normal 15px monospace; }

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Und bitte nimm das nervige Geblinke raus.
Da ist Selbsthilfe angesagt. ;-)

...

Ja, damit wäre _mir_ geholfen, Christian und seinen Seitenbesuchern wohl weniger.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

Und bitte nimm das nervige Geblinke raus.
Da ist Selbsthilfe angesagt. ;-)
Ja, damit wäre _mir_ geholfen, Christian und seinen Seitenbesuchern wohl weniger.

Wieso? Christian muß das doch nur ins CSS der Seite mit aufnehmen ;-)

cu,
Andreas

[Ingo Turski]

Hi,

Ja, damit wäre _mir_ geholfen

schön. Deshalb hatte ich auch Dir geantwortet. ;-)

freundliche Grüße
Ingo

[Christian Walgenbach]

Hallo Detlef,

danke für die Antwort. Habe es aber noch nicht richtig verstanden.

Der Sinn beim CSS-Layouts soll aber darin bestehen den Seiteninhalt logisch
auszuzeichnen, zu strukturieren, so dass die Seite ohne CSS zwar nicht schön
aber übersichtlich und gut benutzbar ist. Es sollten (soweit wie möglich)
keine Elemente enthalten sein, die nicht zum eigentlichen Inhalt gehören.
Div und Span sollten nur zum Gruppieren anderer Elemente verwendet werden.
Alles, was das Aussehen betrifft gehört dann ins CSS.

Wenn ich mir aber dein Menü ansehe ...
Für mich sind die Hauptpunkte eine Liste, die jeweils eine weitere Liste
mit den Unterpunkten enthält.

Der Quelltext sieht aber aus, als ob du von einer Tabelle ausgegangen bist,
die Tabellenelemente durch Divs und Spans ersetzt hast und die Spacergifs
durch Absätze.

Weis nicht, was ich konkret verändern soll.

Und bitte nimm das nervige Geblinke raus.

Hast recht. Habe ich herausgenommen.

by Christian

[Detlef G.]

Hallo Christian

danke für die Antwort. Habe es aber noch nicht richtig verstanden.

Weis nicht, was ich konkret verändern soll.

Du hast viel gelernt, wie du mit CSS arbeiten kannst.
Was du meiner Meinung nach nur noch nicht richtig verstanden hast, du kannst
(fast) jedes HTML-Element mit CSS formatieren. Du brauchst (fast) keine
Divs oder Spans dafür.

Wie sollte die Seite also geschrieben werden?
Stelle dir vor, es gäbe kein CSS und keine Attribute im HTML.

Die Startseite) stellt eine logische Struktur dar.

• ein Logo

• eine Hauptüberschrift <h1>
    (auch wenn statt Text eine Grafik verwendet wird alt-Text!)

• eine Liste <ul> mit Listenpunkten <li>, darin die Links <a> oder wieder
    Listen mit Listenpunkten, darin dann die Links
  <u>
   <li>Hauptseite</li>
   <li>Unser Angebot
    <ul>
     <li><a>Aktuelles</a></li>
     <li><a>Heilpraktiker</a></li>
  ...

• Absatz mit Logo

• Absatz mit Link

Genau diese wird geschrieben.

Dann werden diese Elemente mittels CSS formatiert.
(z.B. margin, padding, float, clear, border, color, height, width)
Dazu wird wo nötig id oder class eingefügt und eventuell auch Elemente
mittels div gruppiert. Nicht für alles wird eine Klasse oder ID gebraucht,
du kannst auch mit Nachfahrenselektoren arbeiten.
(z.B. #Navi a formatiert nur Links innerhalb von #Navi)

Die Listen und Listenpunkte werden mit margin und padding angepasst, die
Listenpunkte ausgeblendet. Die <li> oder <a> der inneren Listen erhalten ein
größeres padding-left und die Ordner als Hintergrundbild.

Du brauchst effektiv nur einen Bruchteil des Quelltextes.

Das ist alles.

Auf Wiederlesen
Detlef

[Cyx23]

Hallo Christian,

warum hast du nicht einfach eine Tabelle genommen?

habe im Forum gelesen, dass ein 3-Spalten Layout mit CSS und Div-Container besser sein soll.

warum?

Um den Bezug zum Thema Barrierefreiheit aber gleich herzustellen, häufigst geäussertes Argument gegen Tabellen dürfte der Wunsch nach "Barrierefreiheit" sein, obwohl einfache nicht verschachtelte (Layout-) Tabellen wohl ähnlich barrierefrei seien können wie Divs, und Tabellen wegen der besseren Zugänglichkeit und höherer Flexibilität (besonders beim IE) Vorteile haben. Doch ich wollte hier jetzt kein Tabellenlayout, sondern Barrierefreiheit empfehlen.

Denn das Geblinke auf der betr. Seite nervt nicht nur und hindert am Zugang, es führt zugleich dazu dass die betr. Seite nicht barrierefrei ist, und da bin ich eigentlich immer noch der Meinung wie 7/2004: "gerade beim Thema d. betr. Auftritts ist doch eine barrierefreiere und zugänglichere Lösung angebracht".

Grüsse

Cyx23

[ichen]

Moin!

habe im Forum gelesen, dass ein 3-Spalten Layout mit CSS und Div-Container besser sein soll.

da geht es darum tabellen nur dann zu verwenden, wenn man tabellarische datn darstellen möchte. es geht ums rein logische.

tschüssi
ichen

[Cyx23]

Hallo.

habe im Forum gelesen, dass ein 3-Spalten Layout mit CSS und Div-Container besser sein soll.

da geht es darum tabellen nur dann zu verwenden, wenn man tabellarische datn darstellen möchte. es geht ums rein logische.

Aber wohl weniger als Logelei, zumal "rein logisch" manche Layouttabelle auch noch begründbar wäre. Sondern als semantisch richtiges HTML mit der Hoffnung auf bessere Verwaltungseigenschaften und bessere Barrierefreiheit.
Die besseren Verwaltungseigenschaften sind durch aufwändigeres CSS und mehr oder weniger benötigte zusätzliche Div-Container womöglich ohne Tabellen auch verschlechtert worden. Bleibt noch die Barrierefreiheit, die aber i.d. Praxis ohne Hacks und Klimmzüge auch nicht funktioniert, und durch Verzicht auf einfache Layouttabellen auch nicht immer gesteigert wird, ob nun ein Screenreader drei DIVs oder drei TDs hintereinander vorliest.

Grüsse

Cyx23

[Thomas J.S.]

Hallo,

Ich möchte wissen, ob sich meine Seite korrekt in Sachen "Browser kleiner machen" verhält.

Du hast ziemlich lange an die Seite gearbeitet ;-)
Aber zumindes im IE 6, Firefox 1 und Opera 7.54 macht sie sich sie gut.
Aber bitte _ändere_ dieses blaue Farbe im Gästebuch!

Grüße
Thomas