...

View Full Version : Linking image using Css



l Squid l
07-01-2007, 04:04 AM
http://elementalstudios.freehostia.com/ Thats my site.

Look at the Home button, I wanna link it to the index.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
-->
</style></head>

<body>

<div id="content">

<div class="gapless" align="center">
</div>

<div class="left"></div>

<div class="right">
</div>

<div class="leftpipe">
</div>

<div class="home">

</div>

<div class="team">
</div>

<div class="video">
</div>

<div class="graphic">
</div>

<div class="forum">
</div>

<div class="contact">
</div>

<div class="rightpipe">
</div>

<div class="headercontent">
<h1><img src="images/Welcome.png" alt="Welcome" width="175" height="83" /></h1>
</div>

<div id="contentbox">
<p align="center"> Hello, and Welcome to Elemental Studios. This section of Elemental Studios is for Halo 2. We are here to help you with you multimedia needs, anything from video editing, to Photoshop, and to your Halo 2 skills! We have a clan, and teams being set-up. So check out our forum, or maybe you would like to see graphicss gallery, or check out the videos! Enjoy you stay, here!</p>
<p align="center" class="textcontent">&nbsp;</p>
</div>

<div class="footer">
</div>

</div>


</body>
</html>


CSS for Home

.home {
background:url(images/Home.png);
width:70px;
height:36px;
margin: 0 auto;
float:left;
}

So Umm how do I link it, in Dreamweaver I click the folder button the link and click index.html hit ok but it does put any text there, I wrote it in and then it disappeared. Thanks in advance.

rjoiram
07-01-2007, 04:17 AM
If you're using Dreamweaver create an image map over the image and link each map.

l Squid l
07-01-2007, 05:07 AM
I checked out the Dreamweaver help I cant find anything on making an image map, could you explain a bit more please?

_Aerospace_Eng_
07-01-2007, 06:15 AM
Change

<div class="home">

</div>
to

<a class="home" href="#">Home Link</a>
Then this

.home {
background:url(images/Home.png);
width:70px;
height:36px;
margin: 0 auto;
float:left;
}
to this

.home {
background:url(images/Home.png);
width:70px;
height:36px;
margin: 0 auto;
float:left;
text-indent:-9999em; /*hide text for normal browsers*/
}
Goes to show that copying and pasting isn't always the best method especially if you don't understand what something is doing. I suggest you actually learn this stuff rather than rely on everyone else to do things for you.

l Squid l
07-01-2007, 01:59 PM
err..Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum