SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Birmingham, AL, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making background images clickable links

    Here's the relevant HTML:

    Code:
    <div id="header">
        <h1><a href="index.html">Site Name</a></h1>
      </div>
    In my CSS I have a background image in the header div and I've styled the h1 like so:

    Code:
    #header {
    	height: 200px;
    	background: #1A4CAD url(images/dcplogo_left.png) no-repeat top center;
    }
    #header > h1 {
            width: 960px;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 155px 45px 0 63px;
    	text-shadow: hsl(0,1%,16%) 1px 1px, hsl(0,1%,16%) 2px 2px, hsl(0,1%,16%) 3px 3px, hsl(0,1%,16%) 4px 4px;
    }
    Obviously my h1 link is clickable but how would I go about making my background image clickable? I've found some ways of doing it by using nothing but a background image in the header (in other words, having the h1 there throws off everything) and creating an <a> element and setting it's left margin to some huge negative number or setting it to display: none. But what if I already have an h1 and just want to make the background image clickable and not mess up my layout?

    The reason I want to do this is because I know it's best practice to have your logo always link back to your home page. But is it all right just to have the logo text (the h1) link back to the home page and not worry about making the actual logo image a link?

    Thanks in advance for any help,

    Paul

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hello, basically just make the div, h1, and a all the same height and width. So give the a display block and the height. Here is how I did it long ago. { visibility: inherit; } The Linked Image Swap!

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Birmingham, AL, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your reply, Eric. I must be missing something obvious. I'm still pretty new to CSS but I'm eager to learn everything I can.

    Here's what I added to my CSS:
    Code:
    #header > h1 a {
    	display: block;
    	height: 200px;
    }
    That seemed logical enough to me. But it didn't work. When I used Webkit Inspector on the <a> element it looks like it's adding the height to the bottom instead of to the top.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Your welcome. Probably need to take the padding off the h1. Or give the a the same padding.

    Edit: is the h1 one line? If so, just give it line height equal to the height of the header to vertically center it and iksnay the padding.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Location
    Birmingham, AL, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eric, you're brilliant. I took the padding off the h1 and put it on the a and it's perfect. Thank you so much!

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mophreo View Post
    Eric, you're brilliant. I took the padding off the h1 and put it on the a and it's perfect. Thank you so much!
    Well not completely brilliant. I said or give the a the same padding. Duhh! That wouldn't work. I'm glad it helped you to your solution though. I admit I do have a hard time picturing others code. I'm more at home with my own. Who isn't I guess.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •