Beiträge von ChiefIntensiv

  • Produktbilder werden verschwommen dargestellt

    Hallo Zusammen,

    ich habe mir vor einigen Tagen WooCommerce installiert, ich möchte Postkarten auf meiner Homepage anbieten.
    Leider werden die Produktbilder verschwommen und verpixelt darfgestellt.
    Siehe:
    http://radwildlife.com/produkt/nr-006/



    http://radwildlife.com/produkt/nr-006/ Das Bild wird in 624px x 366px dargestellt aber max-width beträgt 300px, ich denke hier liegt der Fehler?
    Siehe:
    [Blockierte Grafik: http://www.bilder-upload.eu/thumb/307edb-1520337974.jpg]

    Auch die "related products" unter dem Produkt, sowieso die klein dargestellten Produktbilder in der Übersicht werden verschwommen dargestellt:
    http://radwildlife.com/produkt-kategorie/postkarten/

    Seit Tagen google ich nach einer Lösung, finde aber nichts, vielleicht weiß jemand wie ich das Problem lösen kann?

    Danke !

  • Internet Explorer stellt Bild anders dar als in Firefox

    Hallo Zusammen,

    mir ist heute aufgefallen dass Internet Explorer meine Bilder nicht richtig darstellt, bei Firefox ist alles in Ordnung, das Plugin das ich nutze heißt Jetpack-Carousel.

    Internet Explorer (falsch dargestellt):


    Firefox (so soll es sein):


    Der Link zum Bild ist folgender:

    http://radwildlife.com/ground-squirrel/#jp-carousel-158


    Kann mir wer helfen sodass das Bild im Internet Explorer dargestellt wird wie in Firefox?


    Danke!

  • Header-Image an Bildschirmgröße automatisch anpassen

    Zitat von djheke
    Code
    [COLOR=#0000ff]<a href="http://test-66838.alfa3044.alfahosting-server.de/"[/COLOR]>[COLOR=#ff0000]<img  class="serwus"  src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg"  alt="header">[/COLOR][COLOR=#0000ff]</a>[/COLOR]

    Super vielen Dank !


    Auch das ist eine schöne Alternative um den Header an die jeweilige Fensterbreite anzupassen !
    Gefällt mir ausgesprochen gut!

    Gruß

    ChiefIntensiv

  • Header-Image an Bildschirmgröße automatisch anpassen

    Hallo Zusammen,

    habe es jetzt endlich geschafft !!!

    Ich wusste nicht dass ich unter header.php diesen HTML Code eingeben musste damit das ganze greift.

    Also habe ich mein Bild jetzt im header.php folgenden HTML code eingebene

    PHP
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
[COLOR=#ff0000][size=10]  [B]            <img class="headerbild" src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg" alt="header" >[/B][/SIZE][/COLOR]
            </a>

    und dann im stylesheet.php folgenden Code

    Code
    img.headerbild {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 4px auto;
}


    Vielen Dank an Stef, Nassar und MrMurphy. Ohne euch hätte ich das nicht geschafft.

    Jetzt kommt man zwar nicht mehr zu Startseite wenn man auf den Header klickt - aber das ist mir nicht so wichtig wie dass der Header richtig skaliert auch bei kleineren Bildschirmen.
    Wenn ihr noch einen Tipp habt wie diese Funktion wieder einbaue dann wäre das super, ist aber im Moment nicht so notwendig.


    Danke Nochmals

    Viele Grüße

  • Header-Image an Bildschirmgröße automatisch anpassen

    hi stef !

    Das heißt ich füge den HTML Code dann einfach in Wordpress unter Editor im stylesheet.php ein, hab ich das richtig verstanden? Und wo im stylesheet füge ich den Code ein?

    Gruß

  • Header-Image an Bildschirmgröße automatisch anpassen

    Zitat von Sassar

    ich kann dir eine Schritt für Schritt anleitung geben :) aber dafür solltest du das HTML umbauen da sonst der CSS Code einfach den Rahmen sprengt. Wenn du das Bild also mittels des HTML Tags <img /> einbindest kannst du, wie von mir weiter oben schon geschriebenen code, einfach anwenden. Dieser Funktioniert aber nur bei einen Image Element nicht bei einen Background Image :)

    Lg Sassar


    Okay, verstehe und wie binde ich mittels HTML Tags das Bild ein? Brauche ich dafür ein Programm?

  • Header-Image an Bildschirmgröße automatisch anpassen

    Hallo Sassar,


    Danke für deine Erklärungen ! Das ist eine Sprache für sich,.. die ich vermutlich nie sprechen werde... Eigentlich wollte ich ein einziges Problem lösen, entpuppt sich doch schwieriger als gedacht.

    Hast du trotzdem noch eine ausführliche Schritt-für-Schritt Anleitung wie ich diesen Raum loswerde, sodass wenn ich die Seite über mein Smartphone oder Laptop aufrufe, das Bild an die Navbar anknüpft?

    Siehe:

    http://img5.fotos-hochladen.net/uploads/39edo4q2vwl.jpg


    Gruß

  • Header-Image an Bildschirmgröße automatisch anpassen

    Okay, wie binde ich ein Bild in html ein ?

    Zitat von Stef


    Wozu gehört denn dies hier?

    Code
    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1557px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

    Der gehört zum header, der ist glaub ich dafür da dass wenn man draufklickt man wieder zur Startseite kommt!
    Ich verwende das Twenty-Thirteen Theme für Wordpress, wenn das hilft.

  • Header-Image an Bildschirmgröße automatisch anpassen

    So ? :


    Da bekomme ich leider nur einen weißen Balken

    Siehe hier:
    http://test-66838.alfa3044.alfahosting-server.de/

    Ich glaube ich habe dem Bild keinen id/class namen zugeordnet, wüsste auch nicht wo ich das finde, vermutlich wird auch deshalb jetzt nichts angezeigt.. bin leider blutiger Anfänger.

    hmm das kann doch nicht so schwer sein.... :(:(:(

  • Header-Image an Bildschirmgröße automatisch anpassen

    Zitat von Sassar

    Ich habe mir mal deinen Code angeschaut. Es ist möglich mit CSS dein Problem zu lösen. Jedoch muss man dazu sagen das die strucktur einfach nicht optimal ist. Besser ist es wenn du das Logo der Webseite als <img> einbindest. Und nicht wie derzeit als Background-Image. Den das Background Image übernimmt keine Höhe vom Fließtext, ein ImageElement jedoch schon. Wenn du das Image als Bild einfügst kannst du das Bild mit folgenden Eigenschaften immer mittig positionieren und es Scalliert mit. Und der Content richtet sich nach deinem Logo.

    Code
    img.irgendEineKlasse{
  display: inline-block;
  min-width: 400px;
  max-width: 1557px;
  width: 100%;
  margin: 0 auto;
}

    Lg Sassar


    Hallo Sassar,

    Wo im stylesheet.css füge ich den Code ein?

    Bzw. wie gehe ich da genau vor?

    Was genau ist gemeint mit "img.irgendEineKlasse" ? - Beschäftige mich erst 1 woche mit diesen Codes, hab einiges durchschaut aber noch lange nicht alles :)

    Gruß

  • Header-Image an Bildschirmgröße automatisch anpassen

    Hallo MrMurphy,

    danke für deine ausführliche Antwort und Erklärung !!

    Im Stylesheet sieht es jetzt folgendermaßen aus:

    Wenn ich jetzt die Seite mit dem Smartphone öffne sieht es so aus:

    Das Headerbild wird leider wieder abgeschnitten.


    Wenn ich folgenden Code eingeben:


    Sieht es am Smartphone so aus:

    Hier sieht man dass das Bild nicht mehr abgeschnitten wird, jedoch entsteht ein Raum zwischen Navbar und Bild den ich nicht unbedingt haben möchte.
    Diesen Raum meine ich:


    Die Frage ist jetzt - wie binde ich das Bild ein damit es gleichzeitig nicht abgeschnitten wird und sodass kein Raum entsteht zwischen Navbar und Bild?

  • Header-Image an Bildschirmgröße automatisch anpassen

    Zitat von MrMurphy

    Hallo

    Das Bild verschiebt sich nur hinter die Navigation.

    Ich sehe eher das Problem dass das Bild bei Smartphonebreite im Hochformat kaum noch zu erkennen ist. Heißt: Wenn wir eine Lösung anbieten wird sie in der Praxis sinnfrei sein.

    Gruss

    MrMurphy

    Verstehe ich nicht, bei mir funktioniert es am iPhone 4s - Nur ist mir jetzt zu viel Raum zwischen Bild und Navbar - auch am Laptop sieht man den Raum sehr deutlich!!!

    Und dass das Bild oberhalb der Navbar ist soll so sein :)


  • Header-Image an Bildschirmgröße automatisch anpassen

    Zitat von Arne Drews

    Bist Du weiter gekommen? Bei Smartphone ist das Bild jetzt ganz weg bei mir...


    Eigentlich sollte das Bild jetzt in voller Größe erscheinen habe folgendes im Stylesheet geändert:

    Code
    .site-header {
    background: url([URL]http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg[/URL]) no-repeat top scroll;
    background-size: 100%;
}

    Zumindest bei mir am iPhone wird das Bild in voller Größe dargestellt - auch am Laptop wird es jetzt groß dargestellt - welches Handymodell hast du? Siehst du das Header Bild garnicht mehr?

    hier nochmal der link

    http://test-66838.alfa3044.alfahosting-server.de/

  • Header-Image an Bildschirmgröße automatisch anpassen

    Hallo Zusammen,


    bin gerade dabei meine eigene Homepage zu erstellen und bin momentan mit dem Header überfordert.

    Ich möchte dass sich das Header Bild automatisch an den Bildschirm anpasst - sei es Laptop oder Smartphone.


    Unter http://test-66838.alfa3044.alfahosting-server.de/ erreicht ihr die Seite und probiert selbst wenn ihr die Seite mit dem Smartphone aufruft dann wird links und rechts das Headerbild abgeschnitten!
    Möchte aber dass das Bild in voller Gänze erscheint! :sad:


    In style.css sieht es momentan so aus:


    .site-header {
    background: url(http://test-66838.alfa3044.alfahosting-server.de/wp-content/upl…-2XXXXXXXXX.jpg) no-repeat top scroll;
    }

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }


    Kann wer helfen?

    Danke!