SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question I have many many questions...

    Hi everyone,

    First, a bit of background (you can skip this if you want to !)

    I'm in the process of setting up my own business (a shop) and thus a website for this - a non-transactional website to be begin with. At first I was going to pay someone else to build the website for me but as I have a design background I wanted to design the layout myself, and looked for a book that would give me an idea of what was and wasn't physically possible to include.

    Amazon led me to the Sitepoint book 'Build Your Own Website the Right Way', and I've since abandoned the idea of paying some else to do the website as I think I can handle it myself. HTML etc always seemed to be more complicated and scary than it is, for my needs at the moment anyway, and I've also since bought 'The CSS Anthology'. I've got the basic structure of the website set up and am now playing around with layout etc.

    Between them the 2 books do cover most of the features I want to include on the website, but there are other things that aren't and I don't know where to start looking - so I came here!

    So my first question is: I want to use the site's logo at the top of every page as a link back to the homepage. How do I do this?

    Any answers would be much appreciated. And if I have any more questions I'll probably be back!
    Newbie and easily confused - be gentle with me!

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pollythena View Post
    So my first question is: I want to use the site's logo at the top of every page as a link back to the homepage. How do I do this?
    The most semantic and SE-friendly way to do this would be:

    Code html4strict:
    <h1 id="logo"><a href="homepage.html">COMPANY NAME</a></h1>

    Code CSS:
    h1#logo {
      margin:0;
      padding:0;
    }
    h1#logo a {
      display: block;
      text-indent: -9999em;
      background: url(PATH/TO/LOGO.jpg) no-repeat;
      width: 200px;
      height: 100px;
    }

    The H1 element should be used for the "highest" level of the text on the page... which is either the title of the content or the website/company name (some people argue that H1 is not suitable for the latter).

    Change the width & height properties under "h1#logo a" so that they match the dimensions of the logo.
    Last edited by JimmyP; Jun 15, 2008 at 07:27. Reason: Corrected spelling error...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that. The logo is in and the link works...however (why can't things ever be simple?!)

    It's only displaying half of the image (which is a GIF by the way). It shows the full width but only half of the length. I've changed the size, no difference, I've checked in both Firefox and IE7, and I've even opened up the image itself to make sure I hadn't accidentally cropped the bottom half away!

    Any ideas what it could be?
    Newbie and easily confused - be gentle with me!

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By "length" do you mean "height"?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    By "length" do you mean "height"?
    Yes. I honestly couldn't think of the word when I was typing that!
    Newbie and easily confused - be gentle with me!

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is odd. Is this page online?

    What happens if you double the height px? Nothing?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page isn't online yet, no. If I double the pixel size nothing happens. I've been through the code with a fine toothcomb because I know my typing is not fantastic but honestly can't see why it would do this.

    I'm just going to do a screencap and add it to Photobucket to show you what it looks like.
    Newbie and easily confused - be gentle with me!

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mispelled "background" in the code I gave you before.

    I spelt it "backround" ... It should be "background"
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    Internet Toughguy Kevin Boss's Avatar
    Join Date
    Nov 2004
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you're going to have more than one question, so it might be a good idea to put it online somewhere.

    If it's cut off you probably have an element in front of it. I'm guessing your using floats or z-index?

  10. #10
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so I'm not allowed to enter a link to Photobucket to show you what it looks like. But it's on there, it's the only image in my Photobucket, and my username is also Pollythena there.

    Extract from the HTML file:
    <div id="header">
    <div id="sitebranding">
    <h1 id="logo"><a href="index.html">FAERIES WEAR BOOTS</a></h1>
    </div>
    <div id="tagline">
    <p>Punk, gothic and alternative shoes and accessories</p>
    </div>

    and extract from the CSS file:
    h1#logo {
    margin: 0;
    padding: 0;
    }

    h1#logo a {
    display: block;
    text-indent: -9999em;
    background: url(logo.gif) no-repeat;
    width: 648px;
    height: 100px:
    }

    Can anybody see some glaring mistake that I've made?
    Newbie and easily confused - be gentle with me!

  11. #11
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    I mispelled "background" in the code I gave you before.

    I spelt it "backround" ... It should be "background"
    I noticed that. It was a deliberate mistake to test me, wasn't it?
    Newbie and easily confused - be gentle with me!

  12. #12
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kevin Boss View Post
    It sounds like you're going to have more than one question, so it might be a good idea to put it online somewhere.

    If it's cut off you probably have an element in front of it. I'm guessing your using floats or z-index?
    I'm waiting for the bank to set up a business account so I can pay for hosting. Five weeks and counting . If I pay for it out of my own pocket then I'll not be able to reclaim the VAT or count it as an expense of the business.

    The second part of that made no sense to me. I think floats is to do with positioning in CSS? I haven't got that far yet - I've done the basic HTML pages and am just starting to play around with CSS and styling it all.
    Newbie and easily confused - be gentle with me!

  13. #13
    Internet Toughguy Kevin Boss's Avatar
    Join Date
    Nov 2004
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're using CSS to give the #logo H1 anchor a height, however the anchor element is inline and not block. You can only set a hight with a block-level element. It'll work if you give the height to the h1, not the anchor.

    Though that's not the best practice, you should be using a div or a p to place the image in. headings are best used as headings.

    Here's some reading: http://webdesignfromscratch.com/css-...and-inline.cfm

  14. #14
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Kevin - You can set a height to an anchor if you set it "display:block;" and that's what I did with the code I posted. I'm not saying that using H1 is best but using <p> would be even worse - the logo is certainly not a paragraph! And people use DIVs way to much. Technically you could just do it with the anchor and no other elements.

    @pollythenna - Remove all the other code on your page so that you're just left with the H1 and the corresponding CSS... Does it work now?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  15. #15
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JimmyP - When I remove all the other CSS so there are just those 2 things on the style sheet, and the only content in the 'Body' part of the HTML file is the header, it still only shows part of the logo. It is showing more - maybe 60&#37; of the height? - but the bottom is still missing.

    I'd even do without the link if necessary, but I need the logo rather than a CSS-styled text header as the font is not a common one.

    Kevin Boss- thanks for the link, I'm having a read through.
    Newbie and easily confused - be gentle with me!

  16. #16
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  17. #17
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Yes, that appears fine.
    Newbie and easily confused - be gentle with me!

  18. #18
    Internet Toughguy Kevin Boss's Avatar
    Join Date
    Nov 2004
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    @Kevin - You can set a height to an anchor if you set it "display:block;" and that's what I did with the code I posted. I'm not saying that using H1 is best but using <p> would be even worse - the logo is certainly not a paragraph! And people use DIVs way to much. Technically you could just do it with the anchor and no other elements.
    You certainly could. I was trying to keep it simple. Changing an element's display before understanding block level elements versus inline elements sounds a little overwhelming for a newbie.

    you think placing an image inside a paragraph or div is bad, and I think changing an anchor to a block level element is bad. It all boils down to personal preference

  19. #19
    SitePoint Member pollythena's Avatar
    Join Date
    Jun 2008
    Location
    Northern England
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    News just in...it's now working fine! I can't even tell what the difference is between what there is now and what there was before when it wasn't working, but it has now brought up the whole logo. Hurray!

    Thanks for help and suggestions. I'm sure I'll be back with more questions.
    Newbie and easily confused - be gentle with me!

  20. #20
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On my websites, I insert the organization's logo with an img element in the HTML. I put the img element within whatever element is appropriate for that page--usually an h1 if it's the home page. Making the logo link to the homepage is then as simple as wrapping the img element with an a element. This technique, like all others, has pros and cons, but I thought I'd mention it in case it sounds appropriate for your website.

  21. #21
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also use H1 for my client's logos.

    Technically, you can use divs, but if the name of the company is something like "New England Plumbing Services", there are quite a few keywords there that would be quite useful inside an H1 tag.


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
  •