--- title: "Grafiskt element efter länk CSS" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/164725-grafiskt-element-efter-länk-css" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "Emil RT" published: "2007-09-21T10:46:26.000Z" updated: "2007-09-24T08:00:11.000Z" replies: 13 views: 641 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/164725-grafiskt-element-efter-länk-css" --- # Grafiskt element efter länk CSS ## #1 — Emil RT, 2007-09-21T10:46Z 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? Permalänk: https://www.webforum.nu/p/164725 ## #2 — Danne V, 2007-09-21T10:59Z Stila själva anchor-taggen \ 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; } ``` Permalänk: https://www.webforum.nu/p/2030377 ## #3 — tanten, 2007-09-21T11:29Z Ett typiskt ställe där jag skulle vilja använda ``` a.readMore:after { content:url(din_bild.gif);} och Läs mer ``` 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? ;) Permalänk: https://www.webforum.nu/p/2030383 ## #4 — Emil RT, 2007-09-21T12:02Z 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å ... Permalänk: https://www.webforum.nu/p/2030388 ## #5 — Danne V, 2007-09-21T12:22Z > **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. Permalänk: https://www.webforum.nu/p/2030395 ## #6 — tanten, 2007-09-21T12:27Z 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. Permalänk: https://www.webforum.nu/p/2030398 ## #7 — Emil RT, 2007-09-21T12:56Z När jag tittar på 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; } Read more ``` 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 ... Permalänk: https://www.webforum.nu/p/2030409 ## #8 — Emil RT, 2007-09-21T13:03Z Fick inte ditt att funka tanten .. kom ingen bild alls ... Tack för hjälpen! Permalänk: https://www.webforum.nu/p/2030413 ## #9 — Emil RT, 2007-09-21T13:52Z 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?! Permalänk: https://www.webforum.nu/p/2030427 ## #10 — Emil RT, 2007-09-21T14:04Z 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. Permalänk: https://www.webforum.nu/p/2030430 ## #11 — tanten, 2007-09-22T07:19Z 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? Bilagor: - [pil.jpg](https://www.webforum.nu/a/15965.jpg) Permalänk: https://www.webforum.nu/p/2030567 ## #12 — Emil RT, 2007-09-24T07:19Z 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; } Read more ``` IE6 - funkar men ej först på en rad. IE7 - funkar inte alls. funkar verkligen "\* html" där? FF - funkar perfekt. Permalänk: https://www.webforum.nu/p/2031007 ## #13 — tanten, 2007-09-24T07:43Z ``` 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... :) Permalänk: https://www.webforum.nu/p/2031022 ## #14 — Emil RT, 2007-09-24T08:00Z 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. Permalänk: https://www.webforum.nu/p/2031026 --- Tråden på webben: https://www.webforum.nu/amne/html-css/164725-grafiskt-element-efter-länk-css