Header - Überlagerung Bild

Hallo,

ich verzweifele an folgender Umsetzung.

Ich möchte gerne, dass in meinem Header über dem normalen Headerbild ein kleines zweites Bild "drüberliegt".

Was mir fehlt zur Umsetzung ist wohl die Schwierigkeit, dass das aufgerufene Bild quasi keine Klasse im CSS hat, bzw. die Anweisungen des Headers gültig sind.

Ich möchte im Endeffekt das überlagernde Bild wie folgt definieren:

- 100 * 100 px
- feste Position in x und y Pixel vom linken und oberen Rand des Blogs (nicht Fenster) entfernt
- z-index erhöht, so dass das Bild immer "Über" dem Headerbild erscheint

Größte Problem für mich ist es wie erwähnt zu definieren, dass dieses zusätzliche Bild eine eigene Klasse bekommt.

Kann mir bitte jemand auf die Sprünge helfen?!

Link meiner Baustelle

Danke vorab!

Ok, bin einen Schritt weiter.

Aufruf des Bildes in der header.php mit

<div class="Logo-2"><img src="smilies.gif"></div>

Ergänzung in der stylesheet.css

div.Logo-2 {
    position: absolute;
    top: -30px;
    left:100px;
    width:100px;
    hight:100px;
    z-index:10000;
}

.site-titel und .site-description habe ich mit display:none ausgeblendet.

Im Grunde ist erreicht, was ich optisch erzielen wollte - mal abgesehen davon, dass es nur ein Test ist und später natürlich entsprechend mit den passenden Grafiken stimmen muss.

Dennoch bleiben offenen Fragen:

- Ist mein Weg nun eine gute Variante? Oder hätte ich etwas anders/ besser/kompatibler machen können?

- Hinsichtlich des Titels und der Beschreibung: display:none oder lieber in der den Aufruf header.php entfernen?

Ergänzung:

Der Link oben scheint nicht zu funktionieren, da er einen Umlaut enthält.

http://www.l%c3%bcttelbracht.de

Sorry für den Alleinunterhalter...

Aber folgendes ist wohl doch nicht in Ordnung.

#branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
}

Dieser Abschnitt in der CSS umschreibt unter anderem den Wert, wie breit das Headerbild innerhalb des Blogs ist.
Ändere ich den Wert von 100%, so verändert sich in gleicher Proportion auch die Größe meines Smilies.

Also habe ich meine Hasuaufgaben wohl doch nur halb gelöst und hoffe nun auf einen Nachhilfelehrer :)

Danke für Deinen Beitrag.
Im Grunde haben wir es beide nahezu identisch eingebunden.

Gehe ich allerdings nun hin und wähle im Firebug Dein Logo oder aber den Header, stolpere ich über die originale sowie child-CSS:

#branding img {
    border-bottom: 0 solid #000000;
    border-top: 0 solid #000000;
    display: block;
    float: left;
    width: 100%;
}

Ändere ich hier width auf z.B. 50%, so wird der Header schmaler, jedoch verändert sich auch die Größe des Logos. Dies ist der Punkt, den ich vermeiden möchte, da es ggfs. beabsichtigt ist, den Header ggfs. in der Breite anzupassen.

Daher suche ich noch nach einem Weg diese Zuweisungen zu lösen.
Und da bin ich wohl definitiv zu dumm für.

Ist ja kein Thema. Brauchst Dich ja auch nicht entschuldigen :)

Du versuchst Dein Logo ja im Grund wie ich einzubinden, jedoch ist die Stelle leicht anders. Bei mir ist es halt beabsichtigt, dass das Logo aus dem Headerbereich oben übersteht und das Headerbild überlagert.

Du hingegen setzt es ja bewusst nach rechts mit zu site-description bzw. site-titel.

Im Endeffekt gleiche Vorgehensweise, jedoch ist für mich die Verbindung der Variablen "width: 100%" zwischen Headerbild und meiner zusätzlichen Grafik ein "No-Go".

Also - warten wir mal auf die Experten. Du wirst von einer eventuellen Lösung auch Nutzen tragen, auch wenn Dir das jetzt nicht direkt als Problemstellung vorliegt.

Erledigt. Minimale Änderung, jedoch große Wirkung.

<div id="Logo-2"><img src="smilies.gif"></div>

#Logo-2 img {
    position: absolute;
    top: -30px;
    left:100px;
    width:100px;
    hight:100px;
    z-index:10000;
}