Email Icon in header

    Hallo, anbei noch ein Problem:
    Ich würde gerne einen email button an einer bestimmten Stelle in meinem Header platzieren, komme aber nur zu folgendem Ergebnis:
    Kann ich das icon auch ohne komplette weisse Spalte und genau positioniert in die untere Ecke setzen? Danke vielmals für Ideen.
    Grüße, Kat
    simonsmeier.com

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    in der index.php hier einfügen:

    HTML
    <div id="page" class="hfeed site">
Hier Mailicon einfügen
    <header id="masthead" class="site-header" role="banner">
        <hgroup>

    Moment, meinst du dann so (was ist mit den änderungen in header.php und style css?)

    [COLOR=#000080]<div id=[COLOR=#0000FF]"page"[/COLOR] class=[COLOR=#0000FF]"hfeed site"[/COLOR]>[/COLOR][FONT=Helvetica]http://simonsmeier.com/wp-content/upl…/email_icon.jpg[/FONT][COLOR=#000080]<header id=[COLOR=#0000FF]"masthead"[/COLOR] class=[COLOR=#0000FF]"site-header"[/COLOR] role=[COLOR=#0000FF]"banner"[/COLOR]>[/COLOR][COLOR=#000080]<hgroup>
    [/COLOR]

    sorry, ich hab das mit dem code kasten noch nicht so drauf.. excuses!
    header.php ->
    [COLOR=#101010]<div id="header_icons">[/COLOR]
    [COLOR=#101010]
    [/COLOR]
    [COLOR=#101010]<a href="[/COLOR]mailto:kathrin@simonsmeier.com[COLOR=#101010]" target="_blank">[/COLOR]
    [COLOR=#101010]<img src="http://[/COLOR]simonsmeier.com/wp-content/uploads/2013/07/email_icon.jpg[COLOR=#101010]" width="40px"></a>[/COLOR]
    [COLOR=#101010]

    und dann style.css ->
    [COLOR=#101010]
    [/COLOR]
    [COLOR=#101010]#header_icons { [/COLOR]
    [COLOR=#101010] float:right; [/COLOR]
    [COLOR=#101010] padding-top:5px; [/COLOR]
    [COLOR=#101010] width:40px; [/COLOR]
    [COLOR=#101010] z-index:-9999; [/COLOR]
    [COLOR=#101010] padding-bottom:10px; [/COLOR]
    [COLOR=#101010]} [/COLOR]
    [COLOR=#101010]
    [/COLOR]
    [COLOR=#101010]#header_icons img { [/COLOR]
    [COLOR=#101010] float:right; [/COLOR]
    [COLOR=#101010] height:40px; [/COLOR]
    [COLOR=#101010] width:40px; [/COLOR]
    [COLOR=#101010] margin:0; [/COLOR]
    [COLOR=#101010] margin-left:10px; [/COLOR]
    [COLOR=#101010]}[/COLOR]
    [/COLOR]

    Einmal editiert, zuletzt von Amsterdam (29. Juli 2013 um 13:14)

    Eigentlich brauchst du keine css Angaben, du wolltest es doch links haben:

    Sorry, natürlich in die header.php

    HTML
    <div id="page" class="hfeed site">


<a href="mailto:kathrin@simonsmeier.com" target="_blank">
<img src="http://simonsmeier.com/wp-content/uploads/2013/07/email_icon.jpg" width="40px"></a>


    <header id="masthead" class="site-header" role="banner">
        <hgroup>


    So läufts

    okay, ich muss ausser in der header.php aber auch noch die index.php abändern.
    wie wird das mail icon eingefügt, einfach der nur dateiname.jpg, oder sonst noch irgendein attribut?
    Danke, bgeissler!

    Nee, bis jetzt keinen Erfolg. Habe auch die index.php abgeändert (bgeissler), aber das ergebnis ist nach wie vor weißer balken oben an der page, mit dem icon drauf (mailto funktioniert). Hat jemand die zündende Idee? Dankeschön.

    Habe jetzt verstanden, hatte dein Bild falsch interpretiert.
    Folgendes: Dein Headerbild ist in den Vordergund gestellt. Dadurch kannst du das Mailicon nicht darüber legen.

    Hier mal ein Code, Headerbild als Hintergrund und der Mailbutton im Vordergrund.

    HTML
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner" style="background-image:URL(http://simonsmeier.com/wp-content/uploads/2013/07/simonsmeier_header_20132.jpg); height:200px; width:960px;">


<div id=mailbutton style="position:absolute;top:170px;left:170px;"><a href="mailto:kathrin@simonsmeier.com" target="_blank">
<img src="http://simonsmeier.com/wp-content/uploads/2013/07/email_icon.jpg" width="40px"></a>


        <hgroup>


    Für mich der Einfachheithalber habe ich den HTML Code in der Header.php geändert.
    Die ganzen Massangaben kannst in die style.css übernehmen.

    Wunderschön! Tausend Dank, Bgeissler! Ich bin bgeisslert ;-) Musste erst noch ein bisschen rum probieren, aber nun sitzt alles perfekt.

    Apropos, ich habe nur in der header.php den code von Dir eingefügt und den code vom vorherigen header gelöscht und so hat es funktioniert.
    ...Allerdings ist es doch immer ein Pixelspiel, mit dem Header und Hintergrund denn wenn man eingeloggt ist und der admin bar ganz oben steht, verschiebt sich die ganze chose im Auge des Admin. Also muss man sich erst ausloggen, um sich das resultat anzusehen.

    Einmal editiert, zuletzt von Amsterdam (30. Juli 2013 um 13:26)

    Ähm, noch ne Frage, besteht die Möglichkeit, den Header auch noch als Homebutton anklickbar zu behalten (ausser natürlich im Bereich des email buttons)? jetzt ist der header nur Bild, danke für infos!

    Sollte so funktionieren:

    HTML
    <header style="height:200px; width:960px;" role="banner" class="site-header" id="masthead"><a href="http://simonsmeier.com/"><img src="http://simonsmeier.com/wp-content/uploads/2013/07/simonsmeier_header_20132.jpg" /></a>


<div style="position:absolute;top:150px;left:155px;" id="mailbutton"><a target="_blank" href="mailto:kathrin@simonsmei
er.com">
<img width="60px" src="http://simonsmeier.com/wp-content/uploads/2013/07/email_icon.jpg"></a>


        <hgroup>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden