SitePoint Sponsor

User Tag List

Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Making Clickable Home Page Link

    Hello everyone,

    I am moving on forward on my quest to web development greatness. Again, for my page at: http://www.atlantareviewgroup.com/health.html I have designed a graphic for the home page link. I put it in the footer inside a div element, but I need to place a link inside there. Let me know how I can make it a link. I'm not sure again why this positioning still creates a gap between the body & footer.

    I'm thinking I can just use an empty anchor with an id assigned to it, and add these styles in. Is that correct?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    Let me know how I can make it a link.
    With a standard link/anchor element.

    Code:
    <a href="/">
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to make your graphic a clickable link, just wrap the image in an <a>
    HTML Code:
    <a href="myHome.htm" title="Go to home page"><img src="myGraphic.jpg" alt="" /></a>

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, thank you. Now why is there a gap? I'd like to position this link.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    Yes, thank you. Now why is there a gap? I'd like to position this link.
    The gap is caused by

    Code:
    #sectionhomelink {
      background: url("sectionhomelink.gif") repeat scroll 0 0 transparent;
      height: 40px;
      margin: 10px 15px 0 0;
      width: 300px;
    }
    Change the value in red to 0.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    With this markup:
    Code:
    <a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page"><img src="sectionhomelink.gif" alt="" /></a>
    and these styles:
    Code:
    #sectionhomelink{
    	background:url("sectionhomelink.gif");
    	width:300px;
    	height:40px;
    	margin:10px 15px 0 0;
    }
    
    #sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
    	background:url("sectionhomehover.gif");
    }
    I'm not achieving the desired effect. I want to swap the images on hover to achieve a mouseover effect.
    [/CODE]

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You are better off using a sprite image for a hover effect.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question

    Wow, that was some breakthrough material right there.

    Yes, CSS sprites are a useful tool, but my situation is a bit more unique than designing a full layout of images. I have two images that are the exact same size, and I just want to show the other one on hover. So I'm a bit confused how I would be doing this given what I have because all of the examples I've found involve several images and only displaying a certain area of the big picture.

    This was in that article, pertaining to 5 buttons with 5 hover states they will show:
    Code:
    #nav li a {background-image:url('../img/image_nav.gif')}
    #nav li a.item1 {background-position:0px 0px}
    #nav li a:hover.item1 {background-position:0px -72px}
    #nav li a.item2 {background-position:0px -143px;}
    #nav li a:hover.item2 {background-position:0px -215px;}
    My situation is a lot more simple than that. Will you help me through this?

  9. #9
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that example they had 10 images - an on/off for each of the 5 icons.

    You can still use a sprite for your situation, but you would have a single image (sprite) containing both your on/off images and then you simply display the appropriate portion of your sprite (which contains both images) depending on whether the element is currently hovered on or not.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Still Not Working. Here's what I tried.

    Here's what I compiled my image into.

    sectionhomelink.gif

    Here's the code.
    HTML
    Code:
    <a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page"><img src="sectionhomelink.gif" alt="" /></a>
    CSS:
    Code:
    #sectionhomelink{
    	background:url("sectionhomelink.gif");
    	width:300px;
    	height:40px;
    	margin:0 15px 0 0;
    }
    
    #sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
    	background-position:0 -40px;
    }
    On the page, I see a tiny little square. It's not displaying right.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's working fine in Firefox. What browser are you viewing this in? You will, of course, need to put an anchor in there too, so it would be worth getting that done now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I just updated the files at that page. It's not working still. You should be able to see the new code.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, with a sprite you don't put the image in the html. Give the <a> element width and height, and set the image as a background image, with a negative top setting for the hover state.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, now I tried:
    markup:
    Code:
    <a href="http://www.atlantareviewgroup.com" title="Home" id="sectionhomelink" alt="Home Page">&nbsp;</a>
    style:
    Code:
    #sectionhomelink{
    	background-image:url("sectionhomelink.gif");
    	width:300px;
    	height:40px;
    }
    
    #sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
    	background-position:0 -40px;
    }
    I still have something incorrect as I see only a space length of the image. The size of the image is dependent with the amount of anchor text I put inside the <a> element.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    From what I can see, you still have the image in the HTML.

    The ideal would actually be to have the Home text in place, and then an absolutely placed span element over the top of it with the sprite on that. Here is an example by Paul O'Brien that shows how to do it:

    http://www.pmob.co.uk/temp/headerreplacement3.htm

    He uses a header element there, but you could use a <p> element if you prefer, or not even bother with either, though I prefer to have a block element in there somewhere.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Neato! What a necessary technique. I'll need to do something like this for the header portion on the home page of my site in case images are turned off on the visitor's browser.

    Well, I got the image to show with the following code, but the header text is in view blocking the image.

    markup:
    Code:
    <span id="sectionhomelink"><a href="http://www.atlantareviewgroup.com" title="Home" alt="Home Page"><h3>Back to Home Page</h3></a></span>
    styles:
    Code:
    #sectionhomelink{
    	background-image:url("sectionhomelink.gif");
    	width:300px;
    	height:40px;
    	position:absolute;
    }
    
    #sectionhomelink:hover, #sectionhomelink:focus, #sectionhomelink:active{
    	background-position:0 -40px;
            visibility:visible;
    }
    The link is only active when the mouse is level with the h3 element. I've done something wrong here.

    I'll update the files now.

  17. #17
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The whole thing is clickable with this, only with the header text on top of the image.
    Code:
    <a href="http://www.atlantareviewgroup.com" title="Home" alt="Home Page"><span id="sectionhomelink"><h3>Back to Home Page</h3></span></a>

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Wow, you've got it totally around the wrong way. Didn't you look at Paul's code?

    Try this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    h3#sectionhomelink {
      height: 40px;
      position: relative;
      width: 300px;
    }
    
    #sectionhomelink a {
      height: 40px;
      width: 300px;
    }
    
    #sectionhomelink span {
      background: url("sectionhomelink.gif") no-repeat 0 0;
      height: 40px;
      position: absolute;
      width: 300px;
      top:0;
      left:0;
    }
    
    #sectionhomelink a:hover span {
      background-position:0 -40px;
      height: 40px;
      width: 300px;
    }
    </style>
    </head>
    
    
    <body>
    
    <h3 id="sectionhomelink"><a alt="Home Page" title="Home" href="http://www.atlantareviewgroup.com">Back to Home Page<span></span></a></h3>
    </body>
    
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I did look at the source of that example site. He has different elements in the mix, so I got thrown off. My attempt at the CSS styles was way off, I agree.

    If I were to position this image replacement concoction, say 50px to the left and 20px down, What target would I use to grab these elements and move them?

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Everything in my example above is contained in the h3, so you could target ti with

    Code:
    #sectionhomelink {}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nifty! Thanks for all your help. Uh, um.. in my positioning , I kinda made the image disappear somehow... I updated the files again so you can see the absence of the image. http://www.atlantareviewgroup.com/health.html

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You left out position: absolute;

    Code:
    #sectionhomelink span {
      background: url("sectionhomelink.gif") no-repeat scroll 0 0 transparent;
      height: 43px;
      left: 0;
      top: 0;
      width: 300px;
      position: absolute;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  23. #23
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah. There was a typo.. it said position:bsolute. Awesome!

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, I see. Because there was a typo, nothing showed up at all in Firebug.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  25. #25
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I "bsolute" you, Ralph!


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
  •