Logo im Header über den Randfließen lassen?

  • Hallo, ich versuche ein Logo im Header einzubauen, das über den Rand läuft: siehe Foto
    ich bin mir nicht sicher, in welches <div> das Logo muss. Muss ich mit z-index arbeiten?
    der Code:
    div id="header">
    <div id="emotion">
    <div id="emotion-header" >
    <div id="emotion-header-title"><span>titel der Seite</span>
    </div>
    </div>
    </div>
    </div>


    CSS
    div#header {
    border-top: 50px solid white;
    background-color: #0093DD;
    }
    div#emotion {
    margin: auto auto;
    width:990px;
    position:relative;
    z-index: 1;
    }
    div#emotion-header{
    width: 990px;
    height:82px;
    overflow:visible;
    background-image: url(Bilder/logo1.png); (Größe 130x130px)
    background-repeat:no-repeat;
    background-position:left;
    top: ???

    background: #0093dd;
    }
    div#emotion-header-title{
    text-align:right;
    top:20px;
    font: italic bold 40px 'Times New Roman',Times,serif;
    color: #fff;
    background-color: #0093dd;
    }


    Vielen Dank für Eure Hilfe

  • ins div "header" gib dem header nen position:relative
    dem logo (wenns verlinkt is, machste nen a-tag und das img vom logo da rein)
    dann gib dem a-tag nen position:absolute; und positionierst es mit left und top-werten, bis es so aussieht, wie du es magst

  • Hallo, das Logo sitzt jetzt richtig, es soll kein <a> sein. soweit sogut. Aber der Text ist nicht sichtbar. Hier der Code:


    <div id="header">
    <div id="emotion">
    <div id="emotion-header" style=" background: #0093dd; width: 990px; height:82px; overflow:visible; ">
    <img id="emotion-header-logo" src="bilder/logo1.png" alt="Tierklinik Scholz Saarpfalz" style=" border-top: -25px; padding: 0px;" name="emotion-header-logo">
    <strong id="emotion-header-title" style="right: 0px; font: italic bold 40px 'Times New Roman', Times, serif; color: #FFFFFF;">Tierklinik Scholz Saarpfalz</strong>
    </div>
    </div>
    </div>
    </div>


    Ist da ein <div< zuviel?
    Beim Ausrichten des Logos hat es erst geklappt, als ich die Position in px statt % angegeben habe.

  • Hallo, ich habe das Problem gelöst: der <strong> id muss haben: style="position:absolute" statt style="right: 0px;
    Das habe ich nur durch Probieren rausgefunden. Wieso kann ich einen <div> mit position:absolute rechts ausrichten?