Citat:
Just sidan du refererar till använder pseudoklassen ::before där ikonen är ett tecken från en font.
Det finns lite olika sätt att göra det på men att undvika bilder rakt av är ju att föredra då det tar upp plats som inline element.
Tex att du har bilden och span taggen under i html'n kommer resultera i ett mellanrum mellan dom olika elementen av default.
Det enklaste är ju att helt enkelt använda bilden som en bakgrundsbild och med css positionera den på de element den ska vara på.
Det finns lite olika sätt att göra det på men att undvika bilder rakt av är ju att föredra då det tar upp plats som inline element.
Tex att du har bilden och span taggen under i html'n kommer resultera i ett mellanrum mellan dom olika elementen av default.
Det enklaste är ju att helt enkelt använda bilden som en bakgrundsbild och med css positionera den på de element den ska vara på.
Men det där var ju gött som fan hörrudu. Tack
Om du vill göra på ett lätt sätt kan du göra:
HTML-kod:
<a href="#"><img class="ikon" src="dinbild.jpg" alt="" /><p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas felis enim, viverra sit amet ultricies nec, vehicula at mauris. Suspendisse potenti. Suspendisse placerat pellentesque iaculis. Proin porttitor velit fermentum nunc imperdiet luctus. Sed eu dui et est efficitur fermentum ac in ligula. Vivamus sollicitudin ornare feugiat. Proin venenatis ipsum purus, at interdum mauris ultricies in. Etiam eu enim lacus. Etiam eros arcu, lobortis eu ultricies fringilla, convallis sed tellus. Sed interdum ac lectus nec porttitor. Nam maximus augue orci, at lacinia massa molestie viverra. Fusce metus arcu, efficitur volutpat turpis ut, porta condimentum eros. Nam in metus at nisl scelerisque mattis.</p></a>
Kod:
.ikon {
display: inline-block;
postion: absolute;
left: 300px;
top: 300px;
}
.info {
display: inline-block;
position: relative;
top: -150px;
left: 0px;
width: 300px;
height: 300px;
color: black;
}
Är inte helt 100% om det var sådär du ville ha det, men gjorde jag så texten vart URL, men om inte vill att texten ska vara URL kan man bara ta ut den ifrån url'en.
Citat:
Om du vill göra på ett lätt sätt kan du göra:
Är inte helt 100% om det var sådär du ville ha det, men gjorde jag så texten vart URL, men om inte vill att texten ska vara URL kan man bara ta ut den ifrån url'en.
HTML-kod:
<a href="#"><img class="ikon" src="dinbild.jpg" alt="" /><p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas felis enim, viverra sit amet ultricies nec, vehicula at mauris. Suspendisse potenti. Suspendisse placerat pellentesque iaculis. Proin porttitor velit fermentum nunc imperdiet luctus. Sed eu dui et est efficitur fermentum ac in ligula. Vivamus sollicitudin ornare feugiat. Proin venenatis ipsum purus, at interdum mauris ultricies in. Etiam eu enim lacus. Etiam eros arcu, lobortis eu ultricies fringilla, convallis sed tellus. Sed interdum ac lectus nec porttitor. Nam maximus augue orci, at lacinia massa molestie viverra. Fusce metus arcu, efficitur volutpat turpis ut, porta condimentum eros. Nam in metus at nisl scelerisque mattis.</p></a>
Kod:
.ikon {
display: inline-block;
postion: absolute;
left: 300px;
top: 300px;
}
.info {
display: inline-block;
position: relative;
top: -150px;
left: 0px;
width: 300px;
height: 300px;
color: black;
}
Är inte helt 100% om det var sådär du ville ha det, men gjorde jag så texten vart URL, men om inte vill att texten ska vara URL kan man bara ta ut den ifrån url'en.
Mjo, mjo, jag vet att man kan göra sådär, men helst av allt skall man ju skippa bilder till bästa förmoga och köra med CSS eller fonts istället. Tack ändå hörrudu
Skapa ett konto eller logga in för att kommentera
Du måste vara medlem för att kunna kommentera
