SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background header, clickable logo?

    How can I make my logo clickable so users on any page can click on it to go back to the home page?
    I inserted the header with css to be a background image. I tried inserting the header image into the page but then my text for the header moved. Is there a way to have the address text float over the image? I don't want to make it part of the image.

    http://www.computer-desk-assembly.com/arc1.htm

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got the wrong path to your CSS file on your page.

  3. #3
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed now, sorry.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to make the logo a link, create an image just of the logo, insert it in your HTML inside an anchor and set the anchor to float: left. You'll then need to give the <p> holding your text a margin-left to push it over to where you want it.

  5. #5
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand the part about "inside an anchor"?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,368
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ho,

    You could do something like this:

    Code:
    .hdr h1,.hdr h1 a {
        float:left;
        width:184px;
        height:100px;
        position:relative;
        margin:0;
        padding:0;
     z-index:999;
    }
    .hdr h1{text-indent:-999em}
    .hdrtext{position:relative;z-index:1}
    Code:
      <tr class="hdr">
        <td height="145" colspan="2" valign="top" class="hdr"><h1><a href="index.htm">The Arc</a></h1><div align="right" class="hdrtext">Our office is conveniently located at Coventry Place<br />
    
          1641 West Big Beaver Road<br />
          Troy, Michigan 48084-3501<br />
          (248) 816-1900&nbsp;fax (248) 816-1906</div></td>
      </tr>

  7. #7
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does it, Thank you
    Now I need to try & understand how it works.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or something like this:

    HTML Code:
    .hdr {
    	background-color: #DEFFFF;
    	background-image: url(images/texture.gif);
    	margin: 0px;
    	cursor:pointer;
    }
    
    <!-- and then for the link part -->
    
    <div align="right" class="hdrtext" onclick="javascript:window.location = 'index.html';">

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stridox View Post
    or something like this:

    HTML Code:
    .hdr {
        background-color: #DEFFFF;
        background-image: url(images/texture.gif);
        margin: 0px;
        cursor:pointer;
    }
    
    <!-- and then for the link part -->
    
    <div align="right" class="hdrtext" onclick="javascript:window.location = 'index.html';">
    That's a fairly inaccessible alternative and not one I'd advise using. If you want to make something a link, use an anchor, don't use javascript to fake one and certainly don't use inline javascript.

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    That's a fairly inaccessible alternative and not one I'd advise using. If you want to make something a link, use an anchor, don't use javascript to fake one and certainly don't use inline javascript.
    I never said to use inline javascript, but what's inside onclick="" is just how you would do it. And without having to change your stylesheets too much, it's certainly easier. But it's just another method, not saying it's any better.


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
  •