Dizkus

Hi folks,

I'm a CSS noob looking for help, and I'm guessing most of you could solve this with your eyes closed.

I've been trying to link the logo image that appears in the header of our website to the home page. The problem for me is that the image is called within CSS, and then the header block called by the HTML template. I've scoured the Internet for the proper syntax of linking a CSS background image without success.

FYI, the call for the image within CSS is coded as follows in the style sheet:


and the call within the HTML template is as follows:


Help? Thanks a bunch in advance.

Right!
I understand that you want to use the image in your HTML...


you have to know that the paths used in the CSS are relative to the CSS file; if you don't know what it means: "../images" path means that you have to go out of the folder where the style is and search fot a folder called images... and there is the header.jpg


Your links must be as:


--
- Mateo T. -
Mis principios... son mis fines

Actually, not quite, but thanks for the reply nonetheless. I understand the relative/absolute path thing. That's not the problem. The photo displays just fine.

What I want to do is activate a URL within the photo, in other words I want the user to go to a different URL when clicking on the image that's displayed via the CSS quoted in my original message above. Normally in HTML I'd code it this way:



However, I can't figure out how to create the link given that the image is called via CSS, as I'm not familiar enough with CSS and can't find the proper CSS to do so referenced anywhere. If someone clicks on this header image I want them to be re-routed back to our home page.

Ouh, i think there's no solution for what you want.
CSS is not for define links... may exist a form to do this, but i recommend you to modify the HTML instead use CSS for not-design aims...


you may use onclick in your div, or insert a link tag into the div and with CSS expand it with CSS (padding, may be width, height, position, top, left... ), but IMHO an A tag like this: with padding or widht/height defined in the CSS can be a solution for you.


Good luck

--
- Mateo T. -
Mis principios... son mis fines

If you want the image to be a link, it will need to be moved from the CSS to the HTML.

Bingo! Thanks for pointing me in the right direction, and I learned a bit of JavaScript event handling in the process.

Here's how I coded it (after googling on how to get the mouse pointer to change to a hand, too):

Good!
you have to search the best practices using JavaScript, and in my experience, after the redirection return false...

Styling the cursor is easy but not cross-browser compatible at all...
cursor: hand, pointer;
if i remember good, it's the way to change the cirsor to a hand, and if isn't then use the normal pointer...

See you in the community!

--
- Mateo T. -
Mis principios... son mis fines

You'd probably be better off moving the image to the HTML as mhalbrook suggested and adding a link. JavaScript is great, but what if someone has it turned off? Plus you won't have the browser incompatibilities as nestormateo pointed out because you wouldn't need the cursor styling at all.

--

Yes, finally the best solution is move the image to the HTML.

--
- Mateo T. -
Mis principios... son mis fines

Or (not typing out the code this time) use if else...

if javascript is a go....blah...blah
else old HTML way...
end if

--
David Pahl
Zikula Support Team