Der heilige Martin: Header neu gestalten

Beitrag lesen

Nun, die Grafik, die ja auf jeder Seite zu sehen ist, ist richtig schlecht. Sie beinhaltet Text und zwei sehr pixelige Bilder

HTML-seitig ersetzt Du den kompletten <header>-Block (mitsamt des nachfolgenden <br>, das dort ganz einsam und allein steht und bitterlich weint) durch dieses:

<header>
    <h1>Audio-Bibel<br><img src="kopfhoerer.png"><span>NeÜ</span><img src="bibel.png"></h1>
    <p>Deutschsprachige MP3-Dateien der <span>n</span>euen <span>e</span>vangelistischen <span>Ü</span>bersetzung zum kostenlosen Download.</p>
    <p>Übersetzer: Karl-Heinz Vanheiden</p>
</header>

In der CSS-Datei löscht Du die beiden Blöcke .header und #headerimage (jeder Block wird durch geschweifte Klammern umfasst). Anschließend fügst Du nachfolgende Zeilen hinzu.

Je nach Gusto müsstest Du die Schriftgröße anpassen, sie ist im Block header h1 als font-size festgelegt. Mir ist sie in Deinem Original deutlich zu groß, der halbe Bildschirm ist voll Überschrift. Sowas macht man bei Zeitungsüberschriften, damit sie am Zeitungsstand aus der Ferne zu erkennen sind, aber nicht auf Webseiten. Gut, ist natürlich Geschmackssache.
Den Abstand der kleinen Dekobiler zum mittigen Text NeÜ kannst Du im Block header h1 img mittels des padding-Wertes regulieren (die 0 ist der Innenabstand oben/unten, 1em ist der Innenabstand rechts/links).

header {
    color: #00f;
    margin: 1em 0 2em;
    text-align: center;
}
header h1 {
    font-size: 5em;
    font-style: italic;
    margin: 0;
}
header h1 img {
    height: 1em;
    padding: 0 1em;
    vertical-align: middle;
}

header span {
    color: #f00;
}

header p {
    margin: 0;
}

An den Grafiken musst Du unbedingt nochmal arbeiten. Behalte jedoch die Originale!

Beschneide die Bilder erstmal so, dass nahezu kein oder gar kein Rand mehr vorhanden ist. Die Größe kannst Du ohne weiteres auf 200 oder gar 100 Pixel Höhe beschränken, abhängig davon, wie groß Du sie auf dem Bildschirm haben möchtest. Abschließend benutze als Dateiformat jpg mit einer Qualität von 70% bis 80%, das ist für so kleine Dekoelemente ausreichend (orientiere Dich am tatsächlichen Ergebnis, probiere verschiedene Stufen).

Im HTML-Code oben habe ich "kopfhoerer.jpg" und "bibel.jpg" als Pfade bzw. Dateinamen benutzt, diese musst Du gegebenenfalls entsprechend anpassen.

0 76

Header neu gestalten

  1. 0
    1. 0
      1. 0
        1. 0
          1. 0
          2. 2
            1. 0
              1. 0
              2. 0
                1. 0
                  1. 0
                    1. 0
                      1. 1
                        1. 0
                          1. 1
                            1. 1
                              1. 1
                            2. 0
                              1. 2
                                1. 0
                                  1. 0
                                2. 0
                                  1. 0
                                3. 0
                            3. 0
                              1. 0
                                1. 0
                                  1. 0
                                  2. 0
                                    1. 0
                                      1. 0
                                        1. 0
                                          1. 0
                                            1. 0
                                            2. 0
                                              1. 0
                                            3. 0
                                              1. 2
                                                1. 0
                                                  1. 1
                                                    1. 0
                                                      1. 0
                                                        1. 0
                                                          1. 0
                                                            1. 1
                                                              1. 0
                                                2. 1
                                          2. 0
                  2. 0
                    1. 0
                      1. 0
                        1. 1
                    2. 0
            2. 0
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                        1. 0
                      2. 0
          3. 0
  2. 0
    1. 0
    2. 0
    3. 0
      1. 0
    4. 0
      1. 0
      2. 0
    5. 0
      1. 0
      2. 0
        1. 0
          1. 0