mein kleines Forum in XHTML

[Alex]

Hallo,

ich hab mal versucht, in "meinem kleinen Forum" (http://alex.ilosuna.org/forum/) die Tabellen rauszuschmeißen. Allerdings gibt's auch noch welche (Board-Ansicht), aber wenn ich das richtig verstanden habe, ist das OK, solange sie nicht mißbraucht werden.
Könnt Ihr einfach mal schauen (auch gerne in den Quelltext), was ihr so von dem Layout haltet und wie das in verschiedenen Browsern aussieht? Opera z.B. macht mir da noch Sorgen (siehe Screenshot: http://alex.ilosuna.org/img/screenshot_opera.gif) und für Netscape 4.* & Co. hab ich auch noch keine Lösung.

Danke & Grüße, Alex

[Michael Bieri]

Hallo

hmm, schaut ganz nett aus! Aber ich würde das mit den Icons die sich irgendwie verändern, weglassen, das wirkt sehr nervös.

Gruss

Michael

[molily]

Hallo Alex,

Opera z.B. macht mir da noch Sorgen (siehe Screenshot: http://alex.ilosuna.org/img/screenshot_opera.gif)

Das scheint ein Bug zu sein. Ein Beispiel:

<div id="a"><p>bla</p><p>bla</p><p>bla</p></div>
<div id="b"><p>bla</p><p>bla</p><p>bla</p></div>
<div id="c"><p>bla</p><p>bla</p><p>bla</p></div>

#a, #b, #c {margin:0; padding:20px; color:#000;}
#a {background-color: #ffffbb;}
#b {background-color: #fffff0;}
#c {background-color: #ffffbb;}

Das führt im Opera 7.11 dazu, dass zwischen den div-Elementen Abstände zu sehen sind. Nach näherer Untersuchung wirst du feststellen, dass diese Abstände so groß sind wie das margin-bottom der p-Elemente innerhalb der div-Elemente. Dies kannst du wahrscheinlich nur dadurch unterbinden, indem du explizit margin-bottom auf 0 setzt und die Abstände zwischen den p-Elementen stattdessen mit padding-bottom realisierst. Beispielsweise:

p {margin:0; padding:0 0 10px 0;}

Abgesehen davon scheint mir der Code teilweise ziemlich überladen und komplex, wenig strukturelles/logisches Markup, massig div-Elemente (du wirst antworten, dass sie für das Layout nötig sind, jaja...).

#topnav .left ist beispielsweise in der Regel eine Überschrift.

<p> </p> lässt sich mit CSS lösen.

Wenn die Spalten leer bleiben, solltest du vielleicht <div class="left"> </div> usw. komplett heraus nehmen, die height-Angabe des Elternelements sollte die Höhe auch so sichern.

<b>User-Name:</b><br /><input type="text" name="username" /><br /><br /> ließe sich auch eleganter lösen, mit label (dann CSS-formatiert, display:block) und eventuell mit ul, beispielsweise:
<form><ul>
<li><label for="username">User-Name:</label> <input ... id="username"/></li>
...

Anstatt b-Elemente können je nach Kontext Strukturelemente wie Überschriften verwendet werden, ansonsten ist das strong-Element vorzuziehen.

<p><span class="small">...</span></p> -- Wenn dir jeweils kein bedeutungsreicherer Klassenname einfällt (small zielt auf die Präsentation ohne dahinterliegenden semantischen Grund), dann vielleicht eher .anmerkung, zumindest aber ist das span-Element i.d.R. überflüssig: <p class="small">...</p>

Hm, ich glaube nicht, dass verschachtelte div-Elemente die Threadstruktur unbedingt passend wiedergeben... Vergleiche die dieses Forums.

Das Stylesheet ließe sich m.M.n. effizienter, also kürzer aufbauen, sodass Wiederholungen möglichst vermieden werden, vor allem das ständige Wiederholen von font-family und font-size.
Wenn ich mich nicht irre sollte folgendes:

.reply:link           { padding-left: 16px; color: #0000cc; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:visited        { padding-left: 16px; color: #800080; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:hover          { padding-left: 16px; color: #0000ff; text-decoration: underline; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:active         { padding-left: 16px; color: #0000cc; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }

So abkürzbar sein:

a.reply                {padding-left: 16px; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left;}
a.reply:link           {color: #0000cc; text-decoration: none;}
a.reply:visited        {color: #800080; text-decoration: none;}
a.reply:hover          {color: #0000ff; text-decoration: underline;}
a.reply:active         {color: #0000cc; text-decoration: none;}

Bitte arbeite noch einmal http://selfhtml.teamone.de/html/xhtml/unterschiede.htm durch, ich finde beispielsweise keine XML-Namensraumangabe. Statt des Metatags solltest du die Sprache über xml:lang="de" im html-Element angeben (in XHTML 1.0 zusätzlich lang="de").

Im Archiv findest du einiges darüber, wieso du momentan besser XHTML 1.0 anstatt 1.1 schreiben solltest.

Grüße,
Mathias

[Alex]

Hallo Mathias,

Danke für Deine ausführliche Kritik! Ich werde das mal nach und nach durchgehen.

Grüße, Alex