2 Grafiken mit Breitenanpassung

[Matthias Apsel]

Om nah hoo pez nyeetz, Beginnerin!

Das "Maggie-Moden" soll srcollbar sein...die Grafik auf der linken Seite nicht...zudem sollte die Größe nicht nur für meinen Bildschirm passend sein (denke,bei eurem Bildschirm schaut das furchtbar aus...)

Maggie-Moden könnte das Hintergrundbild eines header-Elementes sein oder auch

<header>  
  <h1><a href="...">Maggie-Moden</a></h1>  
</header>

und die beiden Figuren links und rechts der Überschrift werden als Pseudoelemente generiert.

generierter Inhalt --> content

Die Grafik der linken Seite das Hintergrundbild des html-Elements. Damit es in der ganzen Höhe schön grau ist, bekommt das html-Element grau als Hintergrundfarbe. Damit die Inhalte neben dem Bild bleiben, bekommt das html-Element einen linken Innenabstand in der Breite des Bildes.

Das body-Element bekommt einen weißen Hintergrund.

Für ("Unten") solltest du kein Bild verwenden, weil dann z.B. deine Adresse nicht ausgewählt und kopiert werden kann.

Hier ist angebracht:

<footer>  
  <address>Hauptplatz...</address>  
</footer>

Siehe auch: Selfblog - HTML5-Serie

Damit es auf allen Bildschirmen deinen Vorstellungen entsprechend aussieht, benötigst du

• u.U. maximale Breitenangaben
• prozentuale Breitenangaben

Die Darstellung auf tablets und smartphones ist noch mal eine andere Geschichte.

Matthias