...

View Full Version : How do I add a link to an image header in css?



Gypz
12-11-2010, 12:29 PM
I am new to building websites... i seem to be doing alright with the things i am trying to do. but i wanted to know how do i add a link to my image header in css? I would greatly appreciate any help anyone has to offer. thanks.

abduraooft
12-11-2010, 01:04 PM
but i wanted to know how do i add a link to my image header in css? No, you can't do that. CSS is for styling the elements in an HTML document. Perhaps you need to add something to your header like

<a href="/index.html"><img src="header.jpg"></a>

Gypz
12-11-2010, 04:10 PM
No, you can't do that. CSS is for styling the elements in an HTML document. Perhaps you need to add something to your header like

<a href="/index.html"><img src="header.jpg"></a>


ok so if i do that... if you click the image (header) it will direct you to the page i specify? and can you tell me where i would put that in the code? thanks so much for your help

abduraooft
12-11-2010, 04:15 PM
but i wanted to know how do i add a link to my image header in css?

and can you tell me where i would put that in the code?
If you are using <img> tag to display your header image, just replace the <img> tag in my above post with your current tag and insert in to your code. Or Are you using it a as background image? Can we have a link to it or some code ?

Gypz
12-11-2010, 04:26 PM
sure.....

not using as a backround image.

www.americanchromeeagle.com

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

MASTER HEADER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.header
{
padding: 6px 6px 10px 2px;
height:240px;
background: url('images/rsz_11rsz_21american_chopper_header.jpg');
}

abduraooft
12-11-2010, 04:32 PM
You may make an anchor tag and set display:block; to it and then set a suitable height and that background image to it, but that won't be the semantic (http://boagworld.com/technology/semantic-code-what-why-how) way to do this.

I'd separate the title (and logo ?) from that image and display them as <img> tags instead of having a big header background image with everything embedded in it. Or in other words, the document must convey something to the user (and search engines), even in the absence of CSS (http://naked.dustindiaz.com/).

Gypz
12-11-2010, 04:43 PM
i have no idea what you just said.

i have to use that whole image tho.. im sorry... i was just hoping there would be an easy way to make the image a link to another page...

DrDOS
12-11-2010, 05:25 PM
There's a simple way you can link while you use that image as the background. Just make a transparent .gif the foreground image, set it's size to be the same as the header, and link to that.

Gypz
12-11-2010, 05:44 PM
ahhh... ok.. i can try that i guess.. but where does the code go?

Excavator
12-11-2010, 06:06 PM
Hello Gypz,

There's a simple way you can link while you use that image as the background. Just make a transparent .gif the foreground image, set it's size to be the same as the header, and link to that.

Wouldn't a trasnparent .gif still cover the menu and make it unclickable?

Just giving the anchor a size and making it display: block; will work. This is not what ab was suggesting you do but it might be the quickest and easiest.

In your markup, add this bit in red -
<option selected="selected" value="1">US Dollar</option>
<option value="7">Euro</option>
<option value="4">British Pound</option>

</select>

</div>
<div class="header-languageSelector">

</div>
</div>
<a href="http://mybike.com" id="hdrLink"></a>
</div>


<div class="headermenu">

<ul>
<li><a href="http://www.americanchromeeagle.com/americanchromeeagle/">
Home page</a> </li>


And you can style that link from your CSS with this -

a#hdrLink {
width: 1020px;
height: 260px;
display: block;
}

Gypz
12-11-2010, 07:00 PM
ok thanks... where did you find that markup?

Gypz
12-11-2010, 07:01 PM
and where would i add that in the css? i'm sorry... im very new at this

Gypz
12-11-2010, 07:14 PM
ok i found it in page source... but i cant find where to edit it... smh i know i sound so retarded...

Excavator
12-11-2010, 08:03 PM
ok i found it in page source... but i cant find where to edit it... smh i know i sound so retarded...

Not retarded... we all had to start somewhere, you're just diving into the deep end.
Viewing the page source is just that, not an editor of any sort.

Do you really need the header image to be a link this bad?

I'm kind of afraid to tell you to edit your webpage since it's very possible you could make things worse but, for no more code than you're adding, it could easily be done from your webhosts file manager.

...

Gypz
12-11-2010, 08:12 PM
in my page source it says where it is but then when i open it up to edit... it doesnt look like the page source.. there is almost nothing there?

Gypz
12-11-2010, 08:15 PM
Not retarded... we all had to start somewhere, you're just diving into the deep end.
Viewing the page source is just that, not an editor of any sort.

Do you really need the header image to be a link this bad?

I'm kind of afraid to tell you to edit your webpage since it's very possible you could make things worse but, for no more code than you're adding, it could easily be done from your webhosts file manager.

...
yes i unfortunately do. im pretty sure i can do it.. but i just cant find where to edit it...

and side note.. should i use something like visual studio to edit asp and aspx?

Excavator
12-12-2010, 12:38 AM
It's like 4 lines of code to do this. There is no sense buying/installing/learning a program for that when you can edit it online from the file manager in your hosts control panel.

Using the examples I gave you earlier you should be able to add that one line to your markup, as long as you can figure out which file it is.

For some reason your site is linked to two separate styles.css. No idea what's going on there.
One is in http://www.americanchromeeagle.com/App_Themes/darkOrange/darkOrange/styles.css
And the second is at http://www.americanchromeeagle.com/App_Themes/darkOrange/styles.css

It doesn't really matter which .css file you add that a#hdrLink stuff to.



------------------
MAKE BACKUPS!!!
BEFORE you make any changes at all!!
Just in case something goes wrong you need to have the current version backed up so you can always go back to the way it was! This is very important!
------------------




.

Gypz
12-12-2010, 01:04 AM
ok. thank you for your help. ill see if i can figure it out... hopefully...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum