Mobile Browser - Header nicht korrekt dargestellt

    Ich noch mal. :) Nachdem mir in den letzten Stunden hier so toll geholfen wurde, hab ich noch eine abschließende Frage:

    Meine Seite http://friseur-struwwelpeter.de/wordpress/ bzw. der zugehörige Header wird bei Abruf über einen mobilen Browser nicht korrekt dargestellt - der übrige Inhalt ist automatisch durch das Theme für die entsprechende Nutzung konfiguriert worden. Welche PHP dient denn der Konfiguration oder ist es vllt. sogar möglich ein anderes Bild bei mobiler Nutzung als Header einzustellen? Mein verwendetes Theme ist Local Business.

    Noch mal viele Grüße :)

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    füge hier

    Code
    .header {
    width:100%;
    background:url(images/headerbg.png) no-repeat scroll center transparent;
    border:solid 1px #064a72;
    margin:0;
    padding:0;
    overflow:hidden;
}

    mal

    Code
    background-size: 100%;


    hinzu

    ach ja, dann hast du noch ein Logo definiert

    Code
    wordpress/wp-content/themes/local-business/images/logo.png

    das nicht gefunden wird, vermutlich gelöscht weil du es nicht mehr benötigst
    den Part solltest du löschen

    Mh... ich glaub, ich hab was kaputt gemacht ^^ Hab die background-size eingefügt, den Logo-Part gelöscht und darüber hinaus auch alles überflüssige entfernt, wo ich die Grafiken rausgenommen hab. Jetzt hab ich allerdings gar kein Header mehr - zumindest wenn ich die Größe in % angebe. Definier ich Headerhöhe und -breite mit px, dann wird der Header im normalen Browser korrekt angezeigt, im mobilen logischer Weise aber nicht...

    nun wenn du den Inhalt des Headers nicht verwendest ( Logo, Social, Contact usw.), kannst du das Bild auch direkt einbinden, statt als Hintergrund

    Also in der header.php

    Code
    <div class="header"><img width="950" height="172" src="http://friseur-struwwelpeter.de/wordpress/wp-content/themes/local-business/images/headerbg.png"></div>

    und in die style.css dann

    Code
    .header img {
    height: 100%;
    width: 100%;
}

    den Hintergrund dann löschen

    ach ja kleiner Fehler

    Code
    .header img {
    height: [COLOR="#FF0000"]100%[/COLOR];
    width: 100%;
}

    bei height: sollte "auto" stehen (ohne die Anführungszeichen)

    und das leere alte header div natürlich löschen

    Also... es funktioniert erst mal :) Danke dafür! Allerdings musste ich bisschen was abändern: Hab die Höhe auf 2% und Breite auf 100.2% festgelegt. Nur so sieht es ordentlich aus ^^ Muss allerdings auch dazu sagen, dass ich in der Header lediglich den entsprechenden Eintag mit deinem ersetzt hab, weil ich nicht wusste, was ich noch löschen darf. Weiß nicht, ob das etwas damit zu tun hat.

    Ok... so funktioniert es auch :) Allerdings muss ich die Breite trotzdem auf 100.2px setzen, da es sonst nicht bündig abschließt. Ich würde allerdings sagen, dass wir das so lassen :) Was mich noch interessieren würde ist, ob man auch einen alternativen Header bei mobilen Browsern festlegen kann. Allerdings keine Mühen mehr machen, sollte die Frage nicht auf anhieb beantwortet werden können.

    Wie gesagt, bin sehr zufrieden :) Vielen vielen Dank Art of Pic!

    Zitat von freshprince689

    Allerdings muss ich die Breite trotzdem auf 100.2px setzen, da es sonst nicht bündig abschließt.


    liegt daran, das du den css Code für den Header komplett entfernt hast, statt nur den darin definierten background

    zumindest dies sollte wieder rein

    Code
    .header { 
    border:solid 1px #064a72;
    margin:0;
    padding:0;
}


    Zitat von freshprince689

    Was mich noch interessieren würde ist, ob man auch einen alternativen Header bei mobilen Browsern festlegen kann.

    auch das geht, müsste aber selbst erst mal nachsehen wie genau

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden