Need help making image into link?

Discussion in 'CSS' started by tobydawson13, Sep 1, 2010.

  1. #1
    Hi there,

    I have this page http://filthybunny.com/?cat=845 and was wondering wheather there is a way of making the images into links aswel as the category links below the images?

    Thanks :)

    Here's the html/css:
    <ul class="my-list-all-categories">
    	<li class="cat-item cat-item-3"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=3" title="View all posts filed under Amateur">Amateur</a> </p><p class="alignright">19 videos</p>
    
    </div></li>
    	<li class="cat-item cat-item-4"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=4" title="View all posts filed under Anal">Anal</a> </p><p class="alignright">56 videos</p>
    </div></li>
    	<li class="cat-item cat-item-5"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=5" title="View all posts filed under Asian">Asian</a> </p><p class="alignright">36 videos</p>
    </div></li>
    	<li class="cat-item cat-item-6"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=6" title="View all posts filed under Big Tits">Big Tits</a> </p><p class="alignright">20 videos</p>
    
    </div></li>
    	<li class="cat-item cat-item-7"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=7" title="View all posts filed under Blowjob">Blowjob</a> </p><p class="alignright">38 videos</p>
    </div></li>
    	<li class="cat-item cat-item-8"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=8" title="View all posts filed under Cumshot">Cumshot</a> </p><p class="alignright">34 videos</p>
    </div></li>
    	<li class="cat-item cat-item-9"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=9" title="View all posts filed under Ebony">Ebony</a> </p><p class="alignright">18 videos</p>
    
    </div></li>
    	<li class="cat-item cat-item-10"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=10" title="View all posts filed under Fetish">Fetish</a> </p><p class="alignright">21 videos</p>
    </div></li>
    	<li class="cat-item cat-item-11"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=11" title="View all posts filed under Gay">Gay</a> </p><p class="alignright">22 videos</p>
    </div></li>
    	<li class="cat-item cat-item-12"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=12" title="View all posts filed under Group">Group</a> </p><p class="alignright">36 videos</p>
    
    </div></li>
    	<li class="cat-item cat-item-13"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=13" title="View all posts filed under Hentai">Hentai</a> </p><p class="alignright">20 videos</p>
    </div></li>
    	<li class="cat-item cat-item-14"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=14" title="View all posts filed under Lesbian">Lesbian</a> </p><p class="alignright">46 videos</p>
    </div></li>
    	<li class="cat-item cat-item-15"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=15" title="View all posts filed under Mature">Mature</a> </p><p class="alignright">19 videos</p>
    
    </div></li>
    	<li class="cat-item cat-item-16"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=16" title="View all posts filed under Public">Public</a> </p><p class="alignright">19 videos</p>
    </div></li>
    	<li class="cat-item cat-item-17"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=17" title="View all posts filed under Teens">Teens</a> </p><p class="alignright">21 videos</p>
    </div></li>
    	<li class="cat-item cat-item-18"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=18" title="View all posts filed under Wild &amp; Crazy">Wild &amp; Crazy</a> </p><p class="alignright">20 videos</p>
    
    </div></li>
        <span><br style="clear:left" /><br/></span>
    </ul>
    <style>
    ul.my-list-all-categories {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul.my-list-all-categories li {
        float: left;
        width: 165px;
        height: 135px;
        font-size: 12px;
        font-weight: bold;
        background: transparent url( "" ) no-repeat center top;
        margin: 5px 4px 30px 4px;
    border: 1px solid #FFA6FF;
    }
    ul.my-list-all-categories li.cat-item-3 {
        background-image: url( "images/cat-3.jpg" );
    }
    ul.my-list-all-categories li.cat-item-4 {
        background-image: url( "images/cat-4.jpg" );
    }
    ul.my-list-all-categories li.cat-item-5 {
        background-image: url( "images/cat-5.jpg" );
    }
    ul.my-list-all-categories li.cat-item-6 {
        background-image: url( "images/cat-6.jpg" );
    }
    ul.my-list-all-categories li.cat-item-7 {
        background-image: url( "images/cat-7.jpg" );
    }
    ul.my-list-all-categories li.cat-item-8 {
        background-image: url( "images/cat-8.jpg" );
    }
    ul.my-list-all-categories li.cat-item-9 {
        background-image: url( "images/cat-9.jpg" );
    }
    ul.my-list-all-categories li.cat-item-10 {
        background-image: url( "images/cat-10.jpg" );
    }
    ul.my-list-all-categories li.cat-item-11 {
        background-image: url( "images/cat-11.jpg" );
    }
    ul.my-list-all-categories li.cat-item-12 {
        background-image: url( "images/cat-12.jpg" );
    }
    ul.my-list-all-categories li.cat-item-13 {
        background-image: url( "images/cat-13.jpg" );
    }
    ul.my-list-all-categories li.cat-item-14 {
        background-image: url( "images/cat-14.jpg" );
    }
    ul.my-list-all-categories li.cat-item-15 {
        background-image: url( "images/cat-15.jpg" );
    }
    ul.my-list-all-categories li.cat-item-16 {
        background-image: url( "images/cat-16.jpg" );
    }
    ul.my-list-all-categories li.cat-item-17 {
        background-image: url( "images/cat-17.jpg" );
    }
    ul.my-list-all-categories li.cat-item-18 {
        background-image: url( "images/cat-18.jpg" );
    }
    </style>
    
    HTML:
     
    tobydawson13, Sep 1, 2010 IP
  2. PaulSch

    PaulSch Active Member

    Messages:
    781
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    85
    #2
    Just go into your html editor, select the image you want to make into a link, click image properties and set up your link details. Save.
     
    PaulSch, Sep 1, 2010 IP
  3. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Yes this is possible.

    You need to remove the background-images from your categories and do it like this in html.

    
    <li class="cat-item cat-item-13"><div style="padding-top:140px;"><p class="alignleft"><a href="http://filthybunny.com/?cat=13" title="View all posts filed under Hentai"><img src="images/cat-13.jpg" width="WIDTH_OF_THE_GRAPHIC" height="HEIGHT_OF_THE_GRAPHIC" alt="" /></a> </p><p class="alignright">20 videos</p>
    </div></li>
    
    Code (markup):
    Replace WIDTH_OF_THE_GRAPHIC and HEIGHT_OF_THE_GRAPHIC with the corresponding data.
     
    CSM, Sep 1, 2010 IP
    tobydawson13 likes this.
  4. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Ok thanks alot :)
     
    tobydawson13, Sep 1, 2010 IP