SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    header logo as a link

    hi all

    i'm trying to work this out
    i'm using a style with a background image for my header logo
    the problem is that obviously it is better to have the header pic in a style
    rather than putting the img tag into the page
    but how can i put a link in that area to link to the defalt page of the site
    which to me, is definitely a must

    without using ridiculous code, is it possible to do this
    xhtml 1.1, css2 please

    thanks

  2. #2
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could just put a transparent .GIF file in the area you want the link....im sure there is probably some better way to do it...but thats my suggestion...

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that would work i guess
    but i might as well put the actual image there instead then

  4. #4
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dtra
    i'm using a style with a background image for my header logo
    the problem is that obviously it is better to have the header pic in a style
    rather than putting the img tag into the page
    Why is it better? Isn't this the whole purpose of the <img> tag? For images?

    Put the <a><img /></a> tags in your <h1> tag (if you're using one).

    Or put an <a> tag in the <h1> tag and then style the <a> to have the background image.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  5. #5
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The purpose of CSS is to remove styling from your markup.

    But the purpose of your header logo is not ONLY for visual styling, but to provide a heading for the page. It makes semantic sense to have your page title/logo at the top of your page, so do so! Use the <img> element.

    Just remember to include an appropriate alt attribute for the logo.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Colin is spot on.

    But just to show off:

    Code:
    a {
      border: 1px solid red;
      display: block;
      position: absolute;
      top: 50px;
      left: 100px;
      width: 100px;
      height: 100px;
    }
    HTML Code:
    <a href="#">Text</a>
    Won't be pixel perfect because you are setting a border + height and width at the same time, but hay, it is quick and dirty...

    Douglas
    Hello World

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok cool thanks guys
    i'll use the img tag, and it'll also show the complete pic
    in ie as well now, also i can put in a bg spacer pic too


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
  •