Irish SEO,  Marketing & Webmaster Discussion

 
Make money - save the planet!

How to make a H1 tag in CSS into a link

This is a discussion on How to make a H1 tag in CSS into a link within the Coding Help forums, part of the Webmaster Help category; On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want ...


Go Back   Irish SEO, Marketing & Webmaster Discussion > Webmaster Help > Coding Help

Register Forum Rules FAQDonate Members List Calendar Search Today's Posts Mark Forums Read


Notices

Reply

 

LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 06-10-2006, 10:37 AM
Frontpage User
Recent Blog:
 
Join Date: Sep 2006
Location: Dublin
Posts: 3
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
shanediffily will become famous soon enough
Default How to make a H1 tag in CSS into a link

On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want to use as much semantic markup as possible, so I have marked as a H1 using the following tag

h1.homepage_bannerarea {
font-size: 300%; color: #ffff00; font-family: Georgia, Verdana, Arial, Helvetica, serif; font-weight: normal; line-height: 80%; BORDER: #cccc00 0px solid; margin-bottom: -0.25em;
}

However, I now want to make this a hyperlink, with states for LINK, HOVER, ACTIVE and VISITED. How do I do that?

Is is something like

h1.homepage_bannerarea a.link { etc }
h1.homepage_bannerarea a.hover { etc }
h1.homepage_bannerarea a.active { etc }
h1.homepage_bannerarea a.visited { etc }

If so, will it still remain 'semantically' as a HEADING 1?

Thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2 (permalink)  
Old 06-10-2006, 11:07 AM
louie's Avatar
Senior Member
 
Join Date: Jan 2006
Location: Dublin, Ireland
Posts: 2,048
Nominated 5 Times in 3 Posts
Nominated TOTW/F/M Award(s): 1
louie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enough
Send a message via Yahoo to louie Send a message via Skype™ to louie
Default

you need to give it an id:

Code:
<h1 id="h1_link"><a href="#>your text</a></h1>
then in your stylesheet you set it up:
#h1_link h1 a{your style here;}
#h1_link h1 a:hover{your style here;}
__________________
:. Web Design & Development Web Design Ireland
:. Search Engines Optimization Search Engines Optimization
:. Directory Submission Directory Submission
:. News & Press Release Ireland GiveItSocks.com
:. Used Cars Ireland, Car Parts & Car Audio Cars For Sale, Car Parts & Accessories
:. I Have 2 Find It Directory SEF Directory
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3 (permalink)  
Old 06-10-2006, 02:03 PM
RedCardinal's Avatar
Richard Hearne
Recent Blog:
[CaRP] XML error: Invalid character at line 1152
 
Join Date: Feb 2006
Posts: 961
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
RedCardinal is a splendid one to beholdRedCardinal is a splendid one to beholdRedCardinal is a splendid one to beholdRedCardinal is a splendid one to beholdRedCardinal is a splendid one to beholdRedCardinal is a splendid one to beholdRedCardinal is a splendid one to behold
Default

Quote:
Originally Posted by shanediffily View Post
On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want to use as much semantic markup as possible, so I have marked as a H1 using the following tag

h1.homepage_bannerarea {
font-size: 300%; color: #ffff00; font-family: Georgia, Verdana, Arial, Helvetica, serif; font-weight: normal; line-height: 80%; BORDER: #cccc00 0px solid; margin-bottom: -0.25em;
}

However, I now want to make this a hyperlink, with states for LINK, HOVER, ACTIVE and VISITED. How do I do that?

Is is something like

h1.homepage_bannerarea a.link { etc }
h1.homepage_bannerarea a.hover { etc }
h1.homepage_bannerarea a.active { etc }
h1.homepage_bannerarea a.visited { etc }

If so, will it still remain 'semantically' as a HEADING 1?

Thanks
A little bit easier:

#homepage_bannerarea h1 {
border: #cccc00 0px solid;
color: #ffff00;
font-family: Georgia, Verdana, Arial, Helvetica, serif;
font-size: 300%;
font-weight: normal;
line-height: 80%;
margin-bottom: -0.25em;
}
#homepage_bannerarea h1 a:link, #homepage_bannerarea h1 a:visited {
...
}
#homepage_bannerarea h1 a:hover {
...
}

Sorry forgot to mention you can then remove the id you are using in the <h1> element (and in the <p> if you use the same logic above) - not requied with above.

Links in header elements can give you a slight boost also
__________________
Search Engine Optimisation - Red Cardinal Internet Marketing
Internet Consultant Ireland | Search Engine Optimisation Services
Catering Company Dublin - My sister's handmade canape company!

Last edited by RedCardinal; 06-10-2006 at 02:05 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4 (permalink)  
Old 10-10-2006, 04:45 PM
Wannabe Geek
Recent Blog: M6 (England) Crash
 
Join Date: May 2006
Posts: 215
Nominated 0 Times in 0 Posts
TOTW/F/M Award(s): 0
enzo will become famous soon enough
Send a message via Skype™ to enzo
Default

WHy id? Wouldn't it be better to use classes instead of id's just incase you want to reuse the link styles?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5 (permalink)  
Old 10-10-2006, 04:54 PM
louie's Avatar
Senior Member
 
Join Date: Jan 2006
Location: Dublin, Ireland
Posts: 2,048
Nominated 5 Times in 3 Posts
Nominated TOTW/F/M Award(s): 1
louie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enoughlouie will become famous soon enough
Send a message via Yahoo to louie Send a message via Skype™ to louie
Default

You use id when you want just one h1 tag per page to look different.
Use classes when you have more then 1 per page.

id is also very important if you ever want to make changes to the css and if you ever need to add some sort of Javascript to the h1 tag.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, link, make, tag

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
best way to link content to different websites louie Webmaster Discussion 3 23-06-2006 07:56 PM
Javascript Menu Help (again...)? ButtermilkJack Coding Help 18 25-04-2006 12:32 PM
link building 9barJoe Search Engine Optimisation 6 21-02-2006 11:51 PM


Sponsored links

Paid On Results


All times are GMT +1. The time now is 01:41 PM.


Powered by: vBulletin Version 3.7.3, Copyright ©2000 - 2008, Jelsoft Enterprises Limited.
Hosted in Ireland by Blacknight - Test your ISP |Irish Hosting Directory| Armchair.ie|Logo by Eden Web Design|Avatars by Afterglow |Latest Blog Entries | VPS HostingAd Management by RedTyger

Search Engine Friendly URLs by vBSEO 3.2.0