Hallo,
diese ist meine 1. Frage zu CSS. Ich habe hier ein paar Bücher und versuche das meiste via trial& error aber komme heute nicht weiter.
Ich will im footer unseres webshops anstatt eines 10kb PNG Bildes einfach einen Container / Button haben, der selben Inhalt trägt, wie
das Bild vorher:
"Versandfrei
ab
10 € "
Klappt so weit ganz gut mein Versuch, nur packe ich es nicht, die p-Elemente anzusprechen. Normalerweise ist p mit padding-bottom bei uns in der Seite deklariert aber hier will ich es nicht. ES ist halt so, dass ich es einfach nicht verstehe mit den IDs/Classes und wie man verschachteltes anspricht. In meinem Buch Shafer Yanik gibt es zwar zur Kaskadierung aber irgendwie will es nicht rappeln bei mir :p
/* button */
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 6px;
text-shadow: 1px 1px 3px #ffffff;
font-family: Arial;
color: #666666;
font-size: 14px;
background: #fff;
margin-left: 10px;
padding: 0px!important;
text-decoration: none;
height: 59px;
width: 115px;
border: solid;
border-color: #6d9d57;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
/*
.pshadow{
text-shadow: 1px 1px 3px #ffffff;
font-family: Arial;
color: #666666;
font-size: 14px;
background: #ebebeb;
padding: 0px!important;
text-decoration: none;
text-align: center;
}*/
Alles anzeigen
Ihr seht, ich hatte Versuche gestartet mit .pshadow, aber so richtig konnte das nicht sein, denn dann musste ich in jede Zeile (s.o)
schreiben.
Das html:
Ich habe auch mal
oder im CSS p.btn oder btn.p versucht.... will nicht.
VIelen Dank für die Lösung!