Header - Überlagerung Bild

Dieses Thema im Forum "Design" wurde erstellt von nucknuck, 22. März 2012.

  1. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    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!
     
  2. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    Ok, bin einen Schritt weiter.

    Aufruf des Bildes in der header.php mit

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ergänzung in der stylesheet.css

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    .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üttelbracht.de
     
    #2 nucknuck, 22. März 2012
    Zuletzt bearbeitet: 22. März 2012
  3. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    Sorry für den Alleinunterhalter...

    Aber folgendes ist wohl doch nicht in Ordnung.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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 :)
     
  4. somaya

    somaya Well-Known Member

    Registriert seit:
    6. Oktober 2011
    Beiträge:
    100
    Zustimmungen:
    0
    Header Überlagerungsbild

    Hallo, bin zwar im großen und ganzen Laie, aber schau mal die Seite www.tauchclub-reutlingen.de an, da habe ich ein Logo angebracht. Hat auch lange gedauert. Wenn Du in die style.css und die header.php schaust, siehst Du wie ich das gebastelt habe.
     
  5. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    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:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ä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.
     
  6. somaya

    somaya Well-Known Member

    Registriert seit:
    6. Oktober 2011
    Beiträge:
    100
    Zustimmungen:
    0
    Header Überlagerung Bild

    Hallo, ich hatte da border-bottom und top auf null gesetzt, da ich sonst über und unter dem Logo einen Strich/Balken hatte. Wie gesagt bin Laie und habe das durch viel Zeit und probieren so hingebastelt.
     
  7. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    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.
     
  8. nucknuck

    nucknuck Well-Known Member

    Registriert seit:
    21. Juli 2010
    Beiträge:
    94
    Zustimmungen:
    0
    Erledigt. Minimale Änderung, jedoch große Wirkung.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!