Images with links in css???

I have my header.png (header image) in my css, i have now edited this image in fireworks to include built in links. If I open this image stand alone in IE, I can use the links, but as soon as i try to use it in the css, it displays but i cannot use this links.

Is this possible???

I have pasted the css code below.



#container {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 160px;
width: 800px;
background-image: url(images/header.png);

}

#content {
width: 500px;
padding: 10px;
margin-right: 160px;
margin-left: 160px;
}
#leftnav {
float: left;
width: 140px;
height: 400px;
background-color: #ffffff;
padding: 5px;

}

#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#leftnav a
{
display: block;
width: 130px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #000000;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:visited
{
color: #000000;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:hover
{
text-decoration: none;
color: #0000ff;
}

#sidebar {
padding: 10px;
float: right;
width: 130px;
background-color: #ffffff;
height: 390px;

}

#footer {
background-color: #ffffff;
padding: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #000000;
line-height: 24px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
color: #000000;
line-height: 20px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #000000;
line-height: 20px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}

a {
color: #E82525;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #E82525;
text-decoration: underline;
font-weight : bold;
}
a:hover {
color: #901BBE;
text-decoration: none;
}


.box1 {
background:#ffffff;
color: #000;
border:1px solid #00ffff;
width: 400px;
height: 165px;
padding-top: 5;
padding-right: 6px;
padding-bottom: 0;
padding-left: 6px;
line-height: 16px;
}

.smalltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 3px 0;
margin: 3px 0;
line-height: 12pt
}



Thanks

G

Hello gg_online,
That's really not enough info. The CSS you posted looks valid (except for padding-top: 5;) but we'd need to see your markup and your image to figure out what's not working and how to fix it.

A link to the test site would be best.

One more thing, please use the code tags, - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.
Your post seems to be missing the closing /

Thanks for the response,


I have now uploaded to http://www.pc-technician.co.uk to test.

Thanks

That's a good start...
I'm not sure what you mean by this - If I open this image stand alone in IE, I can use the links, but as soon as i try to use it in the css, it displays but i cannot use this links.


There are no links in that website, so nothing for that menu to do or link to. I don't know what opening an image in IE would do different.

I do have a few examples of menus you could look at. Check out the Menus section at http://nopeople.com/design/CSS%20tips/index.html
There is one in particular that would work for what your doing at http://nopeople.com/CSS/anotherNavBar/index.html It would require your editing your header.png a bit.
On all of those, view the source to see how it's coded.

I have created the image in fireworks and created it with links built into the image. when i preview the image in fireworks the links work fine.

But when i implement it into the code the links no longer work.

Is there alternative way that i can get this to work or get a similar look.


thanks

This image with links built-in, what is the filename extension? Can't be a .jpg, .png or .bmp like a normal image, not if the links work. It must be a ... hmm, I don't know.
Can you upload the image that has working links?

Hopefully someone more familiar with FireWorks will jump in here.

Is there alternative way that i can get this to work or get a similar look.



http://nopeople.com/CSS/anotherNavBar/index.html
The layout and functionality are all there, you would just need to add some links and adjust the CSS to your pages sizes and colors.

Just missed a big clue, when i previewed the image in IE i decided to view source and this is what i found.


<!--To put this html into an existing HTML document, you must copy the JavaScript and-->
<!--paste it in a specific location within the destination HTML document. You must then copy-->
<!--and paste code for the image with map in a different location.-->

<html>

<head>

<title>00000001.gif</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Fireworks Image Map">

<!-- Fireworks 2.0 Generic target.
Created Tue Nov 17 23:32:24 GMT+0000 (GMT Standard Time) 2009 -->

</head>

<body bgcolor="#ffffff">

<!---- Copy the image and map code, and paste the data where -->
<!--you want the image to appear in the destination document. ---->

<!---------------------------- BEGIN COPYING HERE ---------------------------->

<img src="00000001.gif" width="850" height="160" usemap="#00000001" border="0" >

<map name="00000001">
<area shape="rect" coords="747,144,781,156" href="links.htm" >
<area shape="rect" coords="642,144,724,156" href="testimonials.htm" >
<area shape="rect" coords="581,144,621,156" href="faqs.htm" >
<area shape="rect" coords="513,144,560,158" href="gallery.htm" >
<area shape="rect" coords="417,144,490,156" href="contact.htm" >
<area shape="rect" coords="255,144,392,158" href="packages.htm" >
<area shape="rect" coords="159,144,230,156" href="studio.htm" >
<area shape="rect" coords="72,144,137,156" href="team.htm" target="_blank" >
<area shape="rect" coords="9,144,47,156" href="index.htm" >
</map>

<!-- Image Map created with Macromedia Fireworks 2.0 -->

<!------------------------------- STOP COPYING HERE ------------------------------>

</body>

</html>



Not sure if this is possible, but if i am able to leave this header image in the css, where would i paste the above in the html?

00000001.gif would be changed to header.png.

Thanks again,

G

That html bit would go in your #header. Like this maybe...


<div id="container">

<div id="header">
<img src="00000001.gif" width="850" height="160" usemap="#00000001" border="0" >

<map name="00000001">
<area shape="rect" coords="747,144,781,156" href="links.htm" >
<area shape="rect" coords="642,144,724,156" href="testimonials.htm" >
<area shape="rect" coords="581,144,621,156" href="faqs.htm" >
<area shape="rect" coords="513,144,560,158" href="gallery.htm" >
<area shape="rect" coords="417,144,490,156" href="contact.htm" >
<area shape="rect" coords="255,144,392,158" href="packages.htm" >
<area shape="rect" coords="159,144,230,156" href="studio.htm" >
<area shape="rect" coords="72,144,137,156" href="team.htm" target="_blank" >
<area shape="rect" coords="9,144,47,156" href="index.htm" >
</map>


</div>

<div id="leftnav">



Your quote doesn't show the js and you would need that too, it would go in the head of your document.
Something like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title of your site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
function ShiftTo(DivID){
Base=document.getElementById(DivID).parentNode;
Sub=Base.getElementsByTagName('div');
for (x=0;x<Sub.length;x++){
if (Sub[x].parentNode==Base){
if (Sub[x].id==DivID){
Sub[x].style.display="block";
}else{
Sub[x].style.display="none";
}
}
}
}
//--></script>
</head>
<body>
<div id="container">

Of course, that bit of js does nothing for you. It's just a site I copied the head off of.

Have a look at a step by step tutorial that may help you more than I have been able to - http://www.irt.org/articles/js186/index.htm


.