1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Flexible Header-Grafik?

Dieses Thema im Forum "Design" wurde erstellt von philine, 24. August 2017.

Schlagworte:
Seite 2 von 2
  1. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Der <head>... </head> ist nicht der <header>. In den <head> Bereich gehören keine HTML Elemente.
    Suche im <body> ... </body> nach dem Tag
    <header class="site-header" id="site-header" role="banner">

    und füge das Bild direkt dahinter ein.
     
    #21 Sailor56, 29. August 2017
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    ... ich seh es gerade. Bei dir liegt der Fall doch etwas anders. Du hast Inhalt in deinem Header und dein Bild ist mehr so eine Art 'Füllfunk' dem es nichts ausmacht, wenn es nicht immer ganz zu sehen ist.
    Dann solltest du über die Lösung nachdenken, das Bild nicht direkt einzufügen, sondern als Hintergrund zum Header einzurichten.

    #site-header {
    background-image: url("dein_bild.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    }
     
    #22 Sailor56, 29. August 2017
    Zuletzt bearbeitet: 29. August 2017
  3. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Danke ;) Das klappt soweit, jedoch geht das Hintergrundbild noch nicht bis zum Seitenrand.
    Kann das evtl. am Theme liegen?
     
    #23 rafael_, 30. August 2017
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Das kann ich ohne Link zur Seite nicht erkennen.
    Aber vielleicht hat dein #site-header noch ein Margin rechts/ links.
    Füge doch mal testhalber die CSS Anweisung 'margin: 0px;' hinzu.
     
    #24 Sailor56, 30. August 2017
  5. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Habe die Seite im Moment noch auf einem Testserver laufen, daher leider kein Link :(
    margin: 0px; hat leider nicht den gewünschten Effekt gebracht.
    Header.jpg
     
    #25 rafael_, 30. August 2017
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Dann könnte noch ein Padding beim <body> oder <html> diesen Effekt verursachen... also neuer Test
    html, body {
    padding: 0px;
    }
     
    #26 Sailor56, 30. August 2017
  7. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Sollte das auch nicht helfen, dann gibt es noch weiter 'Störquellen'.
    Dein Header steckt noch in 2 weiteren Elternelementen drin:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    untersuche doch mal diese beiden Div's ... #max-width und #overflow-container... , ob sich dort irgendwelche margin und padding verstecken?
     
    #27 Sailor56, 30. August 2017
  8. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Das #max-width und #overflow-container war es. So sah der Code aus:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Nachdem ich das angepasst habe:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Jetzt sieht es so aus, wie ich es haben wollte. Header.jpg
    Vielen vielen Dank für die Hilfe ;)
     
    #28 rafael_, 30. August 2017
  9. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Moin,

    ich folgende Problematik:

    Anstatt ein Bild in dem Header zu verwenden, soll jetzt ein Video im Hintergrund des Headers laufen.
    Ich habe es so wie in dem nachfolgendem Code ausprobiert:

    header.php:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    style.css:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Leider verläuft das Video nicht bis zum linken und rechten Seitenrand, wie im Bild zu sehen: header1.jpg
    Wenn ich das weiter anpasse, ist das Video länger als der Header: header2.jpg
    Hat jemand evtl. einen Tipp für mich? ;)

    Gruß Rafael
     
    #29 rafael_, 4. September 2017
  10. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Moin,

    ich habe das Video soweit eingebunden, jedoch wird das Video beim mir im Header
    bei einem 28 Zoll Monitor nicht bis zum Seitenrand dargestellt:

    https://www.dropbox.com/s/60w6gpa8wvi8t34/Header.png?dl=0

    Bei einem 13 und 17 Zoll Monitor läuft das ohne Probleme, muss ich das Video bearbeiten
    oder kann das per Code sozusagen an den Seitenrändern angeheftet werden?

    Ein weiteres Problem ist, dass beispielsweise beim Login:
    https://www.dropbox.com/s/2bdbbuvy1zu8552/LogIn.png?dl=0
    Da sieht das auf einmal so schmal aus.

    header.php:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    style.css:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Vielleicht hatte jemand schon ähnliche Probleme und kann mir evtl. Tipps geben?

    Danke ;)
     
    #30 rafael_, 12. September 2017
  11. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ohne Link zur Seite ist sowas echt schwierig. Mit Link wäre es vermutlich eine Sache von 3 Min. Ich vermute irgendwo stört eine max-width o. ä.
     
    #31 SirEctor, 13. September 2017
  12. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    #32 rafael_, 13. September 2017
  13. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Du gibst dem Video nur eine Höhe von 392px und darauf skaliert es. D. h. irgendwann kann es nicht mehr breiter werden, weil nicht genug Höhe da ist.

    Versuch mal folgendes:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Damit gibst du dem Video soviel Höhe wie benötigt wird, damit es in der Breite skalieren kann. Und dem Header sagst du gleichzeitig, dass er das Video unten abschneiden soll ..... also mal grob formuliert.
     
    #33 SirEctor, 13. September 2017
  14. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Genau das war es, perfekt. Vielen vielen Dank ;)

    Jetzt fehlt das nur noch mit dem Log-In, dass es auf die volle Seitenbreite angezeigt wird.
     
    #34 rafael_, 13. September 2017
  15. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Wer hat dem .overflow-container denn die position:absolute verpasst und warum? Das stört.
     
    #35 SirEctor, 13. September 2017
  16. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Oh neeein, wie blöd von mir -.-
    Das war der Fehler, jetzt funktioniert das auch mit dem Login.
    Vielen vielen Dank für deine Hilfe. ich weiß gar nicht, wie ich das wieder gut machen kann ;)
     
    #36 rafael_, 13. September 2017
  17. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ich könnte jetzt einen Kaffee vertragen. Schieb mal einen rüber :mrgreen:

    Schön dass es jetzt funktioniert hat.
     
    #37 SirEctor, 13. September 2017
  18. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    *Einen großen Kaffee mit Keks rüber schieb* :D

    Vielen Dank nochmal ;)
     
    #38 rafael_, 13. September 2017
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
Seite 2 von 2
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden