<div> as a link?

[rudolfl]

Hi, all

 

This is a general HTML question. I am working on converting my site to 2.3.3.

I modified the way header is shown and I am trying to make click on the store logo to go to home page. Does not work.

 

Here is site (test site, but running off live database, so please do not create bogus accounts, etc....)

http://hatsfromoz.com.au/new_hats/catalog/index.php

 

I wanted store image to take whole header with buttons on top, so I made store logo a background image of a header <div>. How do I make it a link to home page?

 

Thanks,

Rudolf

[♥toyicebear]

Click me>>

[Juto]

This is how, with a little twist:

 

In html
<div class="div_style"><a class="link_style" href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"> </a></div>

In css
.div_style {
display:inline-block;
}

Style in logical ordered:

.link_style,link_style:visited {
/* This will be the clickable background to   */
background:#ececec url('images/your_image.png') 1.25em 50% no-repeat;
/* Position the image as you see fit */
}
.link_style:hover, .link_style:focus {
/* Style as you see fit, as per wacg */
}
.link_style:active {
/* Style as you see fit, as per wacg */
}

 

Have fun.

 

Sara

[rudolfl]

Thanks,

 

1. Yes, i looked at Google before posting. Did not find solution that suits me.

 

2. Thanks, Sara. Tried your suggestion -- the problem is that only space character turns into a link. I need whole <div> to be a link.

 

I guess, the only solution is to put image in a <div> and attach <a> to that image. The problem then is placing the buttons on it, but this should be possible with absolute position, although it will be ugly

 

Rudolf

[MrPhil]

First of all, be aware that a user clicking on this link will be exiting osC, and will lose their session (their signon and their shopping cart). If you're OK with that...

 

If I understand what you're trying to do, you have a <div> of some size, with a background image, that you want someone to be able to click anywhere in there and go to another page? I can think of two ways, at least one mentioned before:

1. Add a Javascript "onclick" action to the <div> and change your location.
    
   
2. Overlay the entire <div> with a transparent image (you only need one pixel, stretch using width="100%" height="100%") and use that as the link:
   

<div class=.....><a href="...."><img src="trans.gif" width="100%" height="100%" border="0" /></a></div>

 

That ought to be enough to get you started.

[♥mattjt83]

With jquery:

 

$(function(){//bof doc ready function
$(".my_div_class").click(function(){
window.location = "whatever-page.php"
});
});//eof doc ready function

 

Then just make sure you add a style in your stylesheet to make the .my_div_class have a pointer cursor so people know it's a link:

 

.my_div_class{cursor:pointer;}

[rudolfl]

Thanks!

 

Why didn't i thought of jQuery? Got too concentrated on getting it done with CSS.

 

Anyway, all is working

http://www.hatsfromoz.com.au

 

Thanks again and Happy New Year to everyone.

 

Rudolf