WebStyleBoard

Testsystem: Windows 98, 1280x1024 Pix, GeForce 4 mit AntiAliasing, Netscape 7, IE 6

http://validator.w3.org/check?uri=http%3…&doctype=Inline
3 Fehler

<script type="text/javascript"> statt <script language="javascript">


Sieht gut aus, ist skalierbar, aber leider wird das &raquo; in eine Zeile geschrieben wenn das Wort in der Navi zu lang ist. Ersetze dort bitte die Leerzeichen durch "&amp;nbsp;", dann wird das in eine Zeile gequetscht

Hallo DukeXP!

Ich passe den Nedstat-Code auch immer XHTML1.0 konform an.

Wenn du ein Beispiel willst, kannst du mal bei www.brueche.com nachschauen, befindet sich im Quelltext der oberen Frames.


Chacabaou.

Ich schaue mal ein bisschen hinter die Kulissen...

Das HTML sieht soweit ganz gut aus, abgesehen davon, dass es ein Tabellenlayout ist. Die Navigation ließe sich aber bestimmt noch vereinfachen. Wozu etwa immer das P-Element in den Tabellenzellen?

Der Blick ins CSS zeigt einiges, was sich noch optimieren ließe:

• Eigenschaften wie -family für Fonts werden vererbt. Selektoren wie

  	Quellcode
  1 2 3 4 5	body, td, tr, p, h1, h2, h3 { font-family:Verdana,Helvetica,Arial,sans-serif; color:#000000; font-size:10pt; }

  sind also redundant. Es reicht ein

  	Quellcode
  1	body {

  Die Angabe von Arial bei der font-family ist IMO Unsinn, da ich noch keinen Rechner gesehen habe und mir auch keinen denken kann, der keine Verdana, dafür aber eine Arial hat. Um valides CSS zu schreiben ist die Angabe eines Hintergrundes zur Vordergrundfarbe nötig. Wenn Du Dich da nicht auf weiss festlegen willst, empfehle ich transparent. Schriftgrößen in Punkt anzugeben ist nicht gut, man riskiert, dass viele Leser die Größe nicht mehr anpassen können - und das obwohl die Seite auch bei wesentlich größeren Schriftgraden noch gut aussieht, ich habs ausprobiert. Am besten: Größenangaben für Fließtext weglassen, die anderen relativ vergrößern. Warum definierst Du für normalen Fließtext die gleiche Schrift (-Größe!) wie für h*?? Du änderst es doch sowieso wieder! Mein Vorschlag:

  	Quellcode
  1 2 3 4 5	body { font-family : Verdana, Helvetica, sans-serif; color : black; background : white url(sowieso.png); }

  
  
  
• Gilt nicht nur für diese Tabelle:

  	Quellcode
  1	table.layoutaufteilung

  Wenn Du ein bestimmtes Element nur einmal verwenden willst, empfiehlt sich die Verwendung einer ID statt einer class. Ist zwar logisch, aber nicht ganz so wichtig.
  
  
• Wenn Du schon CSS verwendest, dann doch bitte konsequent. Im CSS stehen jede Menge auch redundante Angaben zu irgendwelchen vertical- oder text-aligns, im HTML aber auch! Nicht sehr schön.
  
  
• Du solltest Dir mal die Shorthands zu Gemüte führen, damit lässt sich einiges abkürzen: Aus

  	Quellcode
  1 2 3 4	td.quicknav { background-image:url(../images/blackback.gif); background-color:#000000; }

  wird dann

  	Quellcode
  1	[...] { background: black url(../images/blackback.gif }

  Aus

  	Quellcode
  1 2 3 4	padding-top:20px; padding-bottom:20px; padding-left:10px; padding-right:10px;

  wird

  	Quellcode
  1	padding: 20px 10px

Mehr Gutes zu der effektiven Verwendung von CSS kannst Du bestimmt bei Michael Jendryschik nachlesen: http://www.jendryschik.de/wsdev/einfuehrung/ im CSS-Teil.

Aber im Großen und Ganzen ist der Weg gut.

mem

Das ist ein IE-Problem, das ich kenne, mit Geckobrausern etwa klappt es IMO. Du musst halt explizit nachdefinieren. Tut mir leid.

mem

Zitat

Original von DukeXP
Jetzt entschuldigt sich Memowe schon für Browser-Fehler!

Nein, ich habe mich dafür entschuldigt, Dir auf die Schnelle keine effektive Lösung bieten zu können...

Zitat

Hab' eine Lösung gefunden ...

	Quellcode
1 2	... body, td, h2, h3 { Hier kommt die Definition der Schriftgröße hin

Wieso sollen Fließtexte und h1 die gleichen Größen haben? Wieso willst Du für body eine Schriftgröße definieren? Willst Du etwa looses HTML schreiben?

mem

Zitat

Original von DukeXP
[IRONIE EIN]Klar, loses HTML ist der letzte Schrei[IRONIE AUS]

<erklär mode="SendungmitderMaus">
Das ist der Armin. Armin hat einen Computer von Onkel Aldi geklau^H^H^Hauft und will jetzt damit ins Internet. Das Internet ist nämlich son großes Ding mit gaanz vielen Schnüren - und da klinkt sich der Armin mit seinem neuen Computer von Onkel Aldi jetzt ein. Dann startet Armin ein Fenster, das Outlook heisst. Da steht dann auf einmal, dass seine alte Freundin "Lindy" eine neue Seite hätte, und er sie sich mal unbedingt ansehen solle. Da Armin sich nicht an "Lindy" erinnert, klickt er auf den Link und aufeinmal poppen viiele kleine Fensterchen auf seinem Schreibtisch im Computer, den der Armin bei Onkel Aldi geklau^H^H^Hauft. Das nennt man Multimedia. Was der Armin nicht gemerkt hat: ein anderes Programm hat jetzt unbemerkt die eMails von dem Armin an jemanden geschickt, der auch mit seinem Computer an den vielen Schnüren dran ist - der kann das jetzt alles lesen. Zudem hat der Armin jetzt ein neues Programm bei sich auf dem Computer, das sich neu mit den vielen Schnüren verbindet. Dadurch verschwinden jetzt nach und nach ganz viele Euros von dem Konto von Armin - macht aber nichts, das WDR-Gehalt ist ja happig genug. Der Armin hat mittlerweile ganz viel Spaß mit der "Lindy" gehabt. Und weil er ein ganz schlaues Kerlchen ist, will er jetzt für die anderen Leute in dem Ding mit den vielen Kabeln auch sowas anbieten. Also fragt er jemanden, den er in der BuddyList bei seinem großen Bruder AOL hat, wie das geht. Der in der BuddyList sagt ihm, er solle das mit Frontpage machen. Und darum kauft sich der Armin bei Onkel Aldi noch ein Paket, wo Frontpage draufsteht. Damit kann er dann auch so schöne Bilder in das Ding mit den Kabeln einspeisen. Das klappt auch ganz gut, bis eines Tages jemand sagt, er würde zuviele komische Dinge in seinem Quelltext haben und erstmal ordentlich eine DTD angeben. Und da der Armin so viel Mist mit Frontpage gemacht hat, darf er nur HTML 4.01 Transitional schreiben. Und die DTD zu HTML 4.01 Transitional heisst "loose". Jetzt hat der Armin aber genug gelernt. Morgen wird er sich ein Päckchen mit dem Namen "Flash" kaufen. Am Schlüss aber drückt Armin erstmal noch auf Start, um den Computer, den er von Onkel Aldi geklau^H^H^Hauft hat, wieder auszumachen.
<sound type="Maus-Jingle" />
</erklär>

SCNR!
mem