Ergebnis 1 bis 5 von 5

Thema: Logo im Header über den Randfließen lassen?

  1. #1
    HTML Newbie
    Registriert seit
    05.05.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Logo im Header über den Randfließen lassen?

    Hallo, ich versuche ein Logo im Header einzubauen, das über den Rand läuft: siehe Foto Unbenannt.jpg
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Logo im Header über den Randfließen lassen?

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.05.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Logo im Header über den Randfließen lassen?

    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.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    05.05.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Logo im Header über den Randfließen lassen?

    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?

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Logo im Header über den Randfließen lassen?

    www.css4you.de

    und das ausrichten mit position: absolute UND right:0
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Logo-Position im header
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.04.2013, 23:15
  2. [suche] logo + header erstellung
    Von chubbysonne im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 08.06.2010, 13:48
  3. [suche] [S] Designer für Header bzw. Logo
    Von newswatchr im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 27.12.2009, 18:33
  4. Logo drehen lassen
    Von Billbos im Forum Flash Forum
    Antworten: 5
    Letzter Beitrag: 05.05.2009, 08:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •