9 replies [Last post]
richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

I was hoping someone knows how to make the main top header graphic clickable. So that if someone see it on another site they can click on the graphic and it will send them to my site using _blank

I found the header graphic is declared in the css file.

---------------------paste---------------
#header {
background: #000 url(../images/header.jpg) 0 0 no-repeat;
width: 750px;
height: 194px;
-------------------------end paste--------------

But i do not know how to add the code to this type of syntax.

Here is how i have done it on a normal html coded site.

Not the real site... i added breaks so it easy to read here Smile

this is the alt text if they have graphics turned off

Does anyone know i add this same type syntax in the css file?

Thank you so much for helping
Richie

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

#header a {display:

#header a { display: block; background: #000 url(../images/header.jpg) 0 0 no-repeat; width: 750px; height: 194px; } Make the #header anchor display block and attach the bg-image to it instead of the header. And please don't use font tags; that's what CSS is for.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

I am so green to coding

Thank you so much for the rapid reply

Ok i think i am greener than green.

I put the "a" as you shown and the header graphic vanished. I must admit i am much better at making graphics than the websites.

I will put my url in the sig area so you can look at what i mean. Right now i made it if you click the home button it gives a blank page - but that is not such a good idea. The main purpose is to allow someone seeing my site within a frame can break out easy to visit the site directly just by clicking the main graphic. Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to add an anchor (a

You need to add an anchor (a href) tag to your HTML so that it corresponds with #header a. You should also lose the XML declaration from before your doctype as it'll put IE into quirks (broken box model) mode which makes achieving cross browser consistency much more difficult.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

Thank you

Thank you so much - i will give it a try. And i didnt even see that declaration till you said that - i will comment that out also.

richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

Whoops

I commented out the xml tag. That was the easy part.

Ok i am really green with coding. I am sure others are in the same boat as me. Learning as fast as possible however. But this is a template and this is the first time i have experienced css calls. My other sites have been regular html. And i all changes were only cosmetic on those sites - so that was easy Smile

So with the header being "#header a" when i changed that in the html file for the template the header grapic would not show.

So i change it from "#header a" to "#header_a" and then in the html file i called

and the graphic didnt vanish. BUT my main goal was to make it clickable from an external site - with my url and _blank in the code. and i dont know how to do it here.

Can you please be more verbose. if it could do the same as my first example - that works.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You want to make your header

You want to make your header a link so you need an anchor in your HTML:

I normally wouldn't advocate leaving the anchor empty; the alternative would be image replacement but I think maybe we should take things one step at a time here.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

Tyssen wrote:You want to

Tyssen wrote:
You want to make your header a link so you need an anchor in your HTML:

I normally wouldn't advocate leaving the anchor empty; the alternative would be image replacement but I think maybe we should take things one step at a time here.

i tired that and it is still not clickable. What am i doing wrong?


and

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

HTML <div id="header"><a

HTML



CSS

#header a {
display: block
width: ...
height: ...
background: ...
}

And you don't need target="_blank".

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

richie2006
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-12-07
Posts: 6
Points: 0

Thank you So SO very much

Thank you so very much. That worked.
I do hope others gain from this posting. Now i will get back to making banners Smile

Richie