Oberhalb des headers etwas einfügen

[Orpheus]

Ich bearbeite eine Wordpress-Seite. Leider bin ich ein ziemlicher Anfänger. Was ich erreichen möchte, ist, oberhalb des headers eine schmalen andersfarbigen Bereich von geringer Höhe zu erzeigen, in den ich dann einen direkten Link zum Mailkontakt unterbringen würde.
Bisher habe ich da folgenden Code eingefügt

<p style="text-align: center; font-size: small; background-color: #d2c4b9; color: blue; height=“50"><a href="tel:0xxxx">0xxxx</a></p>

Das klappt im Prinzip auch. Was mich aber wundert, ist, dass dieser Bereich dann nicht nahtlos in den header übergeht, sondern dass dazwischen dann ein schmaler weißer Balken auftaucht. Vermutlich ist das so, wie ich es mache, ziemlich schräg. Wie müsste es denn richtig sein? Danke für jede Hilfe.

 

[Oliver77]

Wie immer wäre ein Link hilfreich!

 

[Rolf B]

Hallo Orpheus,

p Elemente haben standardmäßig einen oberen und unteren Außenabstand (margin). Das kann der Störer sein. Du kannst ihn mit margin:0 im style-Attribut beseitigen (dann ist er oben und unten weg). Wenn Du ihn nur unten beseitigen willst, setze nur margin-bottom:0.

Margin kann aber auch aus dem Header kommen. Es gibt komplexe Regeln, wie Ränder behandelt werden und wie sie sich ggf. überlagern (margin collapse), oder eben auch nicht.

Die Frage nach dem "richtig" ist ein weites Feld. Wenn man Wordpress einsetzt, sollte man sich bemühen, mit dem Template zu arbeiten und nicht Krieg dagegen zu führen. Ob Du eine Chance hast, es richtig zu machen, hängt von deinen Wordpress-Kenntnissen und von den Möglichkeiten des Templates ab, das Du verwendest. Ob Dir jemand helfen kann, hängt dann auch davon ab, ob der Helfer Wordpress bzw. das konkret verwendete Template kennt.

Rolf

 

[Orpheus]

@oliver: Ja, da hast du recht. Ich arbeite hier aber mit einem lokalen Entwirf, der nicht online ist.

@Rolf: Super, damit kann ich etwas anfangen! Vielen lieben Dank.

 

[manya-57]

<p style="text-align: center; font-size: small; background-color: #d2c4b9; color: blue; height=“50"><a href="tel:0xxxx">0xxxx</a></p>

Hallo,

In deinem Code hat height=50 keine Wirkung, weil das kein CSS ist.
Es wird also ignoriert und die Höhe deines braunen banners wird durch die Schrifthöhe darin festgelegt. Das kannst du leicht ausprobieren, indem du mal testhalber height=“500" schreibst. ;-)

Wenn du die Höhe des banners bestimmen willst, dann mit "height: 50px" (oder was auch immer) im Inline-Style.

Grüße

manya

 

[Orpheus]

Hallo manya, vielen Dank. Damit komme ich weiter! LG