jenglish
jenglish

Reputation: 21

Making icons clickable url without breaking my current CSS

I am trying to update a website at work. I am not a web programmer by any means and I am stuck.

Boss wants the icons and text to be clickable. I have it currently that the text sends a user to the correct page, but I try and make my images clickable using various tutorials but it throws my layout way off.

Should I just remove the text hyperlinks and just make them images only clickable then try and fix the layout?

Thanks.

JSFiddle

HTML

<!-- StartServiceIconTable -->
<div class="networkicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="network.html">Network Integration and Management</p></a>

    </div>
</div>
<div class="paperlessicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="paperless.html">Paperless Office</p></a>

    </div>
</div>
<div class="webdesignicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="website.html">Website Design</p></a>

    </div>
</div>
<div class="securityicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="security.html">Security Solutions</p></a>

    </div>
</div>
<div class="disastericon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="disaster.html">Disaster Recovery</p></a>

    </div>
</div>
<div class="surveillanceicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="surveillance.html">Surveillance Camera Systems</p></a>

    </div>
</div>
<div class="cloudicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="backup.html">Cloud/Local Backup</p></a>

    </div>
</div>

CSS

.networkicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/pxOZ3BO.png");
    background-repeat: no-repeat;
}
.networkicon:hover {
    background-image: url("http://i.imgur.com/q9AYH52.png");
}
.paperlessicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/d2pyph4.png");
    background-repeat:no-repeat;
}
.paperlessicon:hover {
    background-image: url("http://i.imgur.com/p8aSg7g.png");
}
.webdesignicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/rgmqeM6.png");
    background-repeat: no-repeat;
}
.webdesignicon:hover {
    background-image: url("http://i.imgur.com/9Lqv2xE.png");
}
.securityicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/KVdCBHR.png");
    background-repeat:no-repeat;
}
.securityicon:hover {
    background-image: url("http://i.imgur.com/2YEL0Ff.png");
}
.disastericon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/fxpEZgv.png");
    background-repeat: no-repeat;
}
.disastericon:hover {
    background-image: url("http://i.imgur.com/ZLrcbA5.png");
}
.surveillanceicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/PClaFkQ.png");
    background-repeat:no-repeat;
}
.surveillanceicon:hover {
    background-image: url("http://i.imgur.com/ZCe0oEs.png");
}
.cloudicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/2ft1RiY.png");
    background-repeat: no-repeat;
}
.cloudicon:hover {
    background-image: url("http://i.imgur.com/f0RvsBV.png");
}
.boxaroundservicestext {
    height: 85px;
    padding-left: 90px;
    #padding-top: 28px;
    /*This is for IE*/
    line-height: 80px;
    text-align: center;
}
p.services {
    font: arial;
    font-size: 13px !important;
    color: black !important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
p.services a {
    font:arial;
    color: #333366;
}
p.services a:hover {
    font:arial;
    color: #FF7600;
}

Upvotes: 0

Views: 1820

Answers (4)

Sleek Geek
Sleek Geek

Reputation: 4686

Study the example below and use it as reference.

Making the image alone clickable

HTML

<a href="#"> <!-- Your image goes here --> </a>

CSS

   a img { /* Refers to the image used as a link */
    /* Enter Styles Properties and values here */

    }

a  { /* Refers to the link. Image, text or whatever */

    /* Enter Styles Properties and values here */

    }

Making the text alone clickable

HTML

<a href="#"> I'm a text link </a>

CSS

a  {
/* Enter Styles Properties and values here */

}

Making both the text and the image clickable

HTML

<a href="#"> <!-- your image --> I'm a text link  </a>

Upvotes: 0

Mia Sno
Mia Sno

Reputation: 947

here's some code FIDDLE:

HTML:

<!-- StartServiceIconTable -->
<a class="networkicon" href="network.html">
    <div class="boxaroundservicestext">
        <p class="services">Network Integration and Management</p>

    </div>
</a>
<a class="paperlessicon" href="paperless.html">
    <div class="boxaroundservicestext">
        <p class="services">Paperless Office</p>

    </div>
</a>
<a class="webdesignicon" href="website.html">
    <div class="boxaroundservicestext">
        <p class="services">Website Design</p>

    </div>
</a>
<a class="securityicon" href="security.html">
    <div class="boxaroundservicestext">
        <p class="services">Security Solutions</p>

    </div>
</a>
<a class="disastericon" href="disaster.html">
    <div class="boxaroundservicestext">
        <p class="services">Disaster Recovery</p>

    </div>
</a>
<a class="surveillanceicon" href="surveillance.html">
    <div class="boxaroundservicestext">
        <p class="services">Surveillance Camera Systems</p>

    </div>
</a>
<a class="cloudicon" href="backup.html">
    <div class="boxaroundservicestext">
        <p class="services">Cloud/Local Backup</p>

    </div>
</a>

CSS:

.networkicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/pxOZ3BO.png");
    background-repeat: no-repeat;
}
.networkicon:hover {
    background-image: url("http://i.imgur.com/q9AYH52.png");
}
.paperlessicon {

     height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/d2pyph4.png");
    background-repeat:no-repeat;
}
.paperlessicon:hover {
    background-image: url("http://i.imgur.com/p8aSg7g.png");
}
.webdesignicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/rgmqeM6.png");
    background-repeat: no-repeat;
}
.webdesignicon:hover {
    background-image: url("http://i.imgur.com/9Lqv2xE.png");
}
.securityicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/KVdCBHR.png");
    background-repeat:no-repeat;
}
.securityicon:hover {
    background-image: url("http://i.imgur.com/2YEL0Ff.png");
}
.disastericon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/fxpEZgv.png");
    background-repeat: no-repeat;
}
.disastericon:hover {
    background-image: url("http://i.imgur.com/ZLrcbA5.png");
}
.surveillanceicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/PClaFkQ.png");
    background-repeat:no-repeat;
}
.surveillanceicon:hover {
    background-image: url("http://i.imgur.com/ZCe0oEs.png");
}
.cloudicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/2ft1RiY.png");
    background-repeat: no-repeat;
}
.cloudicon:hover {
    background-image: url("http://i.imgur.com/f0RvsBV.png");
}
.boxaroundservicestext {
    height: 85px;
    padding-left: 90px;
    #padding-top: 28px;
    /*This is for IE*/
    line-height: 80px;
    text-align: center;
}
p.services {
    font: arial;
    font-size: 13px !important;
    color: black !important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
p.services a {
    font:arial;
    color: #333366;
}
p.services a:hover {
    font:arial;
    color: #FF7600;
}   

Upvotes: 0

md27
md27

Reputation: 95

If you want icons to be clickable and work as links, do something like this:

<a href="www.myfile.html"><img src="rainbow.gif"></a> 

and remove background-image in css

Upvotes: 0

Doml The-Bread
Doml The-Bread

Reputation: 1771

why don't you try your markup like this:

<a href="paperless.html">
    <div class="paperlessicon">
        <div class="boxaroundservicestext">
            <p class="services">Paperless Office</p>

        </div>
    </div>
</a>

then the whole a tag container is clickable

Upvotes: 2

Related Questions