13 svar · 634 visningar · startad av Emil RT
Tänker mig att ha en liten bild (pil, kvadrat, boll eller liknande) efter en länk. T ex "läs mer >" där > är en gifbild. Om man nu vill ha detta på massvis med ställen vill man ju automatisera det hela.
Provade med:
.readMore {
color:#ff0000;
text-decoration:none;
background-image:url(arrowSmall.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:5px;
padding-bottom:2px;
}
Känns inte riktigt optimalt och efter en snabb flukt i FF såg jag att den visade olikt från IE7.
Finns det något smart sätt månne?
Stila själva anchor-taggen <a> typ:
.minStil a {
background:url(bilden-jag-vill-ha.jpg)no-repeat right middle;
padding-right:15px;
text-decoration:none;
}
.minStil a:hover {
background:url(den-andra-bilden-jag-vill-ha.jpg)no-repeat right middle;
text-decoration:none;
}
Ett typiskt ställe där jag skulle vilja använda
a.readMore:after {
content:url(din_bild.gif);}
och
<a href="#" class="readMore"> Läs mer</a>
Dessvärre finns det inget stöd i IE (vet inte hur det är med IE7).
Men det hjälper förstås inte dig, men om det fungerar i IE7 så kan du kanske strunta i att bilden inte syns i IE6 eller? ;)
Danne V
Är inte ditt förslag mer eller mindre samma som jag skrev?
Skiljer i varje fall ett par pixlar i mellan FF och IE7
tanten
Snyggt, men det måste funka i IE6 också ...
Emil RT skrev:
Danne V
Är inte ditt förslag mer eller mindre samma som jag skrev?
Skiljer i varje fall ett par pixlar i mellan FF och IE7
Ehh... jo, kind of...
Jag tittade inte så noga. Men du ska lägga stilen på a-taggen.
Vad är det för pixlar som skiljer IE och FF? På höjden? Du KAN kanske behöva lägga in line-height, och du BÖR positionera bakgrundsbilden vertikalt med middle, top eller bottom.
Jag tror det kan vara svårt att få det precis lika i alla webbläsare. Men du kan använda båda genom att skriva * html .readMore {osv på din css.
Då läser bara IE den
och alla de andra läser den jag skrev förut.
När IE6 är ur tiden, så behöver du bara radera den. För om jag förstått rätt kommer IE ha med :after i kommande versioner.
När jag tittar på http://www.w3schools.com/css/pr_background.asp så hittar jag inget om vertical-align... :OO
Har nu:
a.readMore {
color:#a60936;
text-decoration:none;
background:url(../template_media/arrowSmall.gif) no-repeat right;
padding-right:5px;
padding-bottom:2px;
}
<a href="#" class="readMore">Read more</a>
Och mellanrummet som skiljde mellan FF och IE var ... (Trumvirvel) ... ett mellanslag ... (som inte skrevs ut i FF).
Ska prova ditt förslag också tanten ...
Tack så länge ...
Hmm ... med ovanstående lösning syns inte pilen i IE om länken ligger först på en rad. Finns det tecken innan på raden dyker den upp. Whad?!
Gör jag om a.readMore till block (display:block) och sätter en fast width funkar det både i texter och på en ensam rad. Dock är detta så fult att mina fingrar knappt fårmår sig att skriva det.
Blev lite undrande :) så jag testade de förslag jag skrivit med en liten slarvig pil.
ff till vänster och IE6 till höger. IE7 är ?
Med både text före länken och utan.
Var det ungefär så här du tänkt dig? Eller har jag missförstått dig eftersom du inte får det som du vill?
Så störigt ...
IE 6
.readMore {
color:#a60936;
text-decoration:none;
}
.readMore:after {
content:url(../template_media/arrowSmall.gif);
}
* html .readMore {
background:url(../template_media/arrowSmall.gif) no-repeat right;
padding-right:10px;
padding-bottom:2px;
}
<a href="#" class="readMore">Read more</a>
IE6 - funkar men ej först på en rad.
IE7 - funkar inte alls. funkar verkligen "* html" där?
FF - funkar perfekt.
body{
font: 1em/1.2 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
* html .readMore {
color:#ff0000;
text-decoration:none;
background-image: url(pil.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:1.5em;
}
a.readMore:after {
content:url(pil.gif);
}
.readMore {
color:#ff0000;
text-decoration:none;
}
Så här ser koden ut för det som finns på bilden.
Men jag börjar bli väldigt osäker på IE7... om det fungerar...
Har fortfarande bara IE6 på den här datorn, eftersom det är i 6:an de flesta "felen" finns. Men du kan kanske kolla det... :)
Helt rätt .. IE7 funkar det icke i.
Känns som det bästa är att använda "background" bara.
Då återstår bara det otroligt skumma att det inte funkar när det är först på en rad (bara i IE6 och IE7. funkar fint i FF). Borde ha med omslutande divvar att göra kanske ... Får felsöka mer helt enkelt.
Det är bara när meningarna wrappas och readmore hamnar ensamt det blir problem. Har man ett br i slutet av föregånde mening och readmore ligger själv funkar det fint.