BLEIBARTIG - Graphic Design

1. Schreibe erst HTML und dann CSS

Warum? Weil man sich so sehr viel Code sparen kann. Man erkennt sofort Strukturen, welche öfters auf einer Webseite vorkommen und kann sie so mit Klassen ansprechen. Vor allem CSS-Strukturen wie:

#main ul {}

bieten sich hierbei an.

2. Strukturiere dein CSS entsprechend des HTML Codes

Du vergibst in HTML eindeutig Namen und Klassen, somit lässt sich später eine logische Reihenfolge aufbauen, welche leicht nachvollziehbar ist. Damit klar ist, welcher CSS-Part an welchen HTML-Part geknüpft ist, solltest du die Reihenfolge im CSS Code entsprechend der im HTML Code anpassen. Praktisches HTML Beispiel:

<div id="header"><h1 id="logo">Logo</h1></div>
<div id="main"><p>Ein Paragraph</p></div>
<div id="footer"><p>Ein Paragraph</p></div>

dazu das passende CSS:

/*////////////////HEADER//////////////////*/
div#header {}

/*////////////////MAIN/////////////////////*/
div#main{}

/*////////////////FOOTER/////////////////*/
div#footer{}

Das ganze kann man sich als CSS-Liste vorstellen, weiterführendes HTML in den einzelnen Bereichen header,main und footer werden dann direkt unter die Überschrift eingefügt. Somit ergibt sich im weitesten Sinne eine solche CSS-Struktur:

• Header
  • Logo
    • Slogan
  • Subnavi
  • Advertisment
  • usw.
• Main
  • Inside
    • h2
    • usw.
  • usw.
• Footer
  • Copyright
  • Footer-Nav
  • usw.
• usw.

3. Nutze die Möglichkeiten, welche CSS dir bietet

Pseudoklassen und verschachtelte CSS-Klassen können dazu beitragen, die Dateigröße des CSS gering zu halten.

Pseudoklassen

Eine Liste aller Pseudoklassen findest du hier. Die von mir am meist genutzten sind vor allem:

• :hover
• :visited
• :first-child
• :last-child

Verinnerlich diese und übe, bis du sie sicher beherrscht. Wenn du dir nun denkst

Der Internet-Explorer 6 versteht :hover aber nur bei <a>

da hast du Recht, allerdings gibt es hierfür einen Hack.

Verschachteltes CSS

Keine Sorge, dieser Abschnitt hat nichts mit einem Tabellensalat o.ä. zu tun Wir schöpfen die Möglichkeiten von CSS einfach so gut wie es geht aus, hier nun ein praktisches Beispiel - bezogen auf den HTML-Code von Punkt 1:

statt das Logo direkt mit

#logo

anzusprechen, könnten wir auch folgendes tun

#header h1

Nur was bringt das? Ganz einfach, wenn man die nötigsten HTML-Elemente vorab styled, benötigt man keine speziellen Definierungen mehr. Man gibt jedem Element Style-Eigenschaften, welche für alle des selben Typs gelten.

4. Räume Browserkompatibilitätsschwierigkeiten direkt aus dem Weg

Glaube mir, nichts ist schlimmer als nach dem Fertigstellen eines Projekts zu erkennen, dass die erstellte Webseite in allen möglichen Browsern Probleme macht. Folgende Tipps kann ich dir geben.

• Block-Elemente mit horizontaler Ausrichtung (float) erhalten kein Außenabstand (margin)
  • Lösung: Erstelle einen zweiten Container in dem obrigen und gebe diesem einen Innenabstand
• Baue keine Pixelgenauen Webseiten - em und % sind deine Freunde
• Verwende keine Breitenangabe, welche nicht lösbar sind, das wären z.B.
  • Kombinationen aus 33%
  • Besser sind hier: 75% + 25% oder auch der goldene Schnitt:
    Teilung einer Strecke im Verhältnis des Goldenen Schnittes: a verhält sich zu b wie a+b zu a (wikipedia)
• Folgende Javascripts könnten für dich noch von Interesse sein
  • ie7-js
  • PNG Fix
  • Whatever :hover
  • min-width und max-width im IE6

Ich hoffe ich konnte euch mit diesem Beitrag ein wenig helfen. Kommentare sind gerne gesehen