Learn how to easily add a Header title link

This topic contains 2 replies, has 3 voices, and was last updated by  barupgames 1 year, 12 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
Author Posts
Author Posts
April 4, 2012 at 5:11 pm #2888
Mofny
Mofny

I’ve been a lurker for awhile.  I just signed up for the site.  I would like to help out anyone who is having difficulties with CSS or HTML.  This is my first tutorial.
If you would like to view my work, please check out my site. I use CSS3 so it’s best to view it in Firefox or Chrome.

Does anyone else use the header text option in the edit image option? It’s a great feature but unfortunately there isn’t a link attribute. Having a link back to home in the header title/image is crucial. Here is an easy hack without messing with image mapping:
1. Go into the CSS/HTML editor and go to the HTML portion.
2. Go to the <div id=”header-image”> portion.
3. Enter in your “a” declaration, something like: <a href=”http://www.royoswalt44.com/index.html

a id=”header_link”></a>. You can name the id anything you want.
4. Now we want to add the CSS portion.
5. Enter in the CSS declarations:
a#header_link{
border: 2px solid transparent;
height: 18%;
width:65%;
position:absolute;
top:90px;
left:175px
}
6. As you can see I used absolute positioning. That is one of the easiest way to position something. This might not be for everyone’s needs. If relative positioning is used it might affect other portions of your site, and you must change the top and left values. The best way to change positioning is to give the border a color value other than “transparent”. Then simply adjust the height, width, top, and left values until it is directly over the image or title.  Change the borders back to transparent.
7. Now test it out! That box should be invisible and you now have an adjustable link area.

April 9, 2012 at 7:42 am #2919

maloumunk

Thanks for sharing.

April 21, 2012 at 5:38 pm #3163

barupgames

Thanks, this is great! Can you show how to make the header animated? LIke a slideshow.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.