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.
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
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
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
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
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