zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Button Icon unscharf + nicht responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.05.2015, 23:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2014
Beiträge: 5
Adioz befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.05.2015, 08:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.103
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.05.2015, 08:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2014
Beiträge: 5
Adioz befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsive Button houseshow CSS 1 10.11.2014 19:33
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
FF Problem: button mit image darolla CSS 6 02.04.2007 08:49
Button - Rahmen dieter99 CSS 1 06.12.2006 10:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:33 Uhr.