SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Links on divs with backgrounds

    I have a few divs, setup this way:
    Code:
    div#AMLLogo {
      background:url(AMLsmall.gif) no-repeat center;
      width: 79px;
      height:100px;
      position:absolute;
      left: 90%;
      top: 2px;
    }
    
    div#BRLogo {
      background:url(BRsmall.gif) no-repeat center;
      width: 90px;
      height:100px;
      position:absolute;
      left: 81%;
      top: 2px;
    }
    
    div#LLLogo {
      background:url(LLsmall.gif) no-repeat center;
      width: 72px;
      height:100px;
      position:absolute;
      left: 73%;
      top: 2px;
    }
    in the HTML:

    Code:
         
    <div id="header">
      <div id="AMBLLogo"></div>
      <div id="LLLogo"></div>
      <div id="BRLogo"></div>
      <div id="AMLLogo"></div>
    </div>
    How could I make the LLLogo, BRLogo, and AMLLogo have clickable links?
    I've tried a span with an anchor but it doesn't work.
    MrBaseball34
    Hook'Em Horns!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of using unnecessary divs, style the links themselves. I would also advise against the absolute positioning, especially when combining fixed pixel sizes (the link size0 and percentages (the location) as this can cause overlap at different screen sizes - try floating them right (that seems to be where you want them)
    Code:
    <div id="header">
      <a href="#" id="AMLLogo">AM link</a>
      <a href="#" id="BRLogo">BR link</a>
      <a href="#" id="LLLogo">LL link</a>
    </div>
    Code:
    #header a {
    	float: right;
    	height: 100px;
    	margin: 2px;
    	background-position: center;
    	background-repeat: no-repeat;
    	font-size: 1px;
    	color: #FFFFFF;
    }
    #AMLLogo {
    	background-image: url(AMLsmall.gif);
    	width: 79px;
    }
    #BRLogo {
    	background-image: url(BRsmall.gif);
    	width: 90px;
    }
    #LLLogo {
    	background-image: url(LLsmall.gif);
    	width: 72px;
    }

  3. #3
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't float it right because it is dynamic. here is the link to the page:
    http://www.theshipmanfamily.com/2005/index.html

    I want the links on the images at the top right.

    The logo on the left will be replaced. I am modifying this
    site for another league.

    Is there a way to combine them into one image and then
    use an image map, yet still have it as a background image of a DIV? I can see the images begin to overlap when I resize
    < 1032 px.

    Any other ideas?
    MrBaseball34
    Hook'Em Horns!

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrBaseball34 View Post
    I can't float it right because it is dynamic.
    Not sure what you mean here - if you can position, why not float?
    I want the links on the images at the top right.
    Floating achieves that quite easily
    Is there a way to combine them into one image and then
    use an image map, yet still have it as a background image of a DIV?
    An image map is not a good idea as the links within are innaccessible to various non-visual browsers. Best to keep the link explicity associated with the graphic.

    PS: I tried pasting my code above into your page and it works fine.

  5. #5
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I finally got it working correctly.
    MrBaseball34
    Hook'Em Horns!

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very good - except the links are not valid - the url must contain the full http syntax otherwise it references to your site
    Code:
    <div id="header">
            <a href="http://www.baseball.legion.org/" id="AMLLogo">AM link</a>
            <a href="http://www.baberuthleague.org/" id="BRLogo">BR link</a>
            <a href="http://www.littleleague.org/" id="LLLogo">LL link</a>
            <a href="http://www.crnorthhampton.com/" id="CRNHLogo">AM link</a>
          </div>


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
  •