XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Button Icon unscharf + nicht responsive (http://xhtmlforum.de/showthread.php?t=72029)

Adioz 14.05.2015 00:44

Button Icon unscharf + nicht responsive
 
Hallo liebes Forum,

ich stehe nun von einem Problem, welches ich nicht selber in den griff bekomme.

Ich habe auf meiner Seite einheitliche Button (Amazon Buttons), jedoch ist mein Amazon Icon immer unscharf. Egal was ich mache und tue, es bleibt unscharf!

Die Buttons findet ihr z.B. auf Shisha Kohleanzünder | Shisha-Test.de

CSS-Code
Code:

#button {
        font-family: Arial;
        display: block;
        box-sizing: border-box;
        text-decoration: none;
        white-space: nowrap;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 153, 0);
        background-image: url("/a.ico");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 98%;
        border-radius: 4px;
        padding: 10px 43px 10px 10px;
        margin: 0 auto;
        width: 37%;
      }

HTML-Code:
HTML-Code:

<a id="button">jetzt ansehen auf</a>
Zudem ist mir aufgefallen, dass die Buttons auf dem Smartphone zusammen verrutschen? Wie kann ich es umschreiben, sodass der Button Text "jetzt ansehen" nicht mit dem icon verrutscht?

Besten Dank,

Ray

MrMurphy 14.05.2015 09:36

Hallo

Zitat:

Ich habe auf meiner Seite einheitliche Button (Amazon Buttons), jedoch ist mein Amazon Icon immer unscharf. Egal was ich mache und tue, es bleibt unscharf!
Das ist normal wenn Bilder vergrößert dargestellt werden. Das Original ist nur 16px mal 16px groß. Nimm also ein größeres Icon, das dann in der Originalgröße oder etwas verkleinert dargestellt wird.

Zitat:

Zudem ist mir aufgefallen, dass die Buttons auf dem Smartphone zusammen verrutschen?
Ich hatte dir doch bereits eine stabile Lösung erstellt. Warum nimmst du die nicht bzw. nimmst nur geringfügige Änderungen vor? In meiner Lösung kamen weder "display: block" noch eine width-Angabe vor.

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Amazon-Button</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
  <style>
      * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      html {
        font-size: 120%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      body {
        padding: 0;
      }
      p {
      }
      /*.button {*/
      a.button {
        display: inline-block;
        box-sizing: border-box;
        text-decoration: none;
        white-space: nowrap;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 153, 0);
        background-image: url("http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-Amazon-alt-Metro-icon.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 98%;
        border-radius: 8px;
        padding: 12px 70px 12px 12px;
      }
  </style>
</head>
<body>
      <a class="button" href="#" rel="nofollow" target="_blank">jetzt ansehen auf</a>
</body>
</html>

Gruss

MrMurphy

Adioz 14.05.2015 09:42

Guten Morgen MrMurphy
 
Danke für den Tipp mit dem Icon! Werde ich heute gleich tauschen :)

Ich dachte nicht, dass display:block; der Grund dafür ist, aber jetzt weiß ichs besser!

Danke für deine Hilfe!


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:38 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023