Button auf Grafik & Bildausschnitt

Thema wurde von steven_sander, 30. März 2018 erstellt.

  1. steven_sander
    steven_sander Mitglied
    Registriert seit:
    20. Oktober 2017
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    12
    Hallo,
    ich habe eine Frage bzgl. des Einfügen eines Textes und eines Linkbuttons auf einer Grafik.
    Ich habe es soweit hinbekommen, dass der Button und der Text auf der Grafik erscheinen via CSS.
    Jedoch sobald man nicht die Desktopansicht sondern eine kleineren Bildschirm benutzt verschiebt sich der Text und der Button ( s. Bilder). Auch ist das Bild dann gestaucht.( Bild ist responsive)

    Wie kann ich es erreichen:

    1. dass der Button genau in der Mitte des Bildes bleibt
    2. und dass das Bild so bestehen bleibt und nur der Ausschnitt sich ändert, quasi wie ein Fokus.
    3. bekommt man die Grafik auch über die komplette Breite des Bildschirms und nicht nur bis zur max. Breite des Shops?


    Vielen Dank schon einmal im Voraus.

    Lg CSS.JPG Html.JPG Screen1breit.JPG Screen2schmal.JPG
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Nimm beim Bild die Werte für width und height raus, oder mache da ein max-width und max-heigth draus.
    Dann sollten im Bild-Namen keine Leerzeichen und Sonderzeichen wie () sein, sondern "-" oder "_".
     
  3. steven_sander
    steven_sander Mitglied
    Registriert seit:
    20. Oktober 2017
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    12
    Danke Barbara, das hat schon mal geholfen.
    Hast du eine Lösung, wie ich jetzt auch noch die Schrift und den Button anpassen kann damit das nicht so komisch wie auf dem Bild aussieht?
    screen mobil.JPG
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    so aus dem Stegreif und ohne die Seite zu sehen nicht
     
  5. steven_sander
    steven_sander Mitglied
    Registriert seit:
    20. Oktober 2017
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    12
    Oh ja stimmt der Shop ist noch im Offline.
    Ich habe den Shop mal online gestellt. Wenn du Lust und Zeit hast mal rüber zuschauen, wäre ich dir sehr sehr dankbar.
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    klar, wenn Du jetzt noch die Adresse verrätst :)
     
  7. steven_sander
    steven_sander Mitglied
    Registriert seit:
    20. Oktober 2017
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    12
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Du hast das mit dem Text ja jetzt etwas anders gemacht.
    Ich würde den Text bei kleinen Monitoren unter das Bild setzen und das ganze Bild als Link machen.

    Oder so, wie das hier im Gambio-Testshop gemacht wurde:
    (Link nur für registrierte Nutzer sichtbar.)
    bei den beiden Bildern über den Angeboten.
    Da steht der Text direkt auf dem Bild und das Bild ist ein Link.
    Wie das geht siehst Du, wenn Du dich als Admin anmeldest und im Content-Manager auf die Seite "index-mitte" gehst.
    Und da dann auf den Quelltext
     
  9. steven_sander
    steven_sander Mitglied
    Registriert seit:
    20. Oktober 2017
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    12
    ah ok danke dir. Ich werde mir das mal anschauen.