SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo on header, how?

    Im working on my first web page and I need a little help!

    Im good with css, but not with html. Im not saying html is hard, I just dont have enough practice.

    So here it is:

    Because Im not good at html, Im using table for header,footer and body. Example:

    Code:
    <table id="top-header" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    the I call this in css. Example:

    Code:
    #top-header{
    	background-image:url(topheader.png);
    	height: 76px;
    	background-repeat: repeat-x;
    	background-position: center;
    	background-position: top;
    }
    So I create another table with id="logo" and in css #logo{} and I get my logo, but problem is that logo is not on header. It is above or under. Depends where I write "logo" code in HTML. (under or above "header" code). If you know what I mean!

    Thanks!

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    While I would strongly advise against using tables for this particular situation, I believe you will accomplish what you're looking for by replacing &nbsp; with the code for the logo. So...

    HTML Code:
    <table id="top-header" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="/image-path-to-logo.jpg" alt="Alt Text" /></td>
      </tr>
    </table>
    TAKE A WALK OUTSIDE YOUR MIND.

  3. #3
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And how to get that img in css so I can edit position?

  4. #4
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    You could do that a variety of ways, one would be to first give the image an ID value:

    HTML Code:
    <img src="/image-path-to-logo.jpg" alt="Alt Text" id="logo" />
    Then for your CSS:

    Code:
    #logo
    {
      position: relative;
      margin-left: 100px;
    }
    This code would add a 100px margin to the left of the image which would essentially move it to the right. Adjust as needed.
    TAKE A WALK OUTSIDE YOUR MIND.

  5. #5
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But if someone has bigger screen it wont be on the right place, right?
    Forgot to tell. I have auto header! Width depends on browser and screen!

  6. #6
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    The placement of the image is relative to where you place the code, hence the position: relative in the CSS I supplied.
    TAKE A WALK OUTSIDE YOUR MIND.

  7. #7
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <body>
    <div id="top-header"><a href="index.php"><img src="style/logo.png" alt="logo" border="0" id="logo" /> </a> </div>
    <div id="bottom-header"></div>
    <div id="body" align="center"><a href="webadress">Contact</a></div>
    <div id="footer" align="center"></div>
    </body>
    #logo{
    position: relative;
    top: 16px;
    left: 380px;
    }

    Ive searched all over the Internet and I cant understand relative positioning.

  8. #8
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    You don't need to use relative positioning for this, it was just a suggestion. Since I don't know exactly what you're trying to make your header look like, the code doesn't help. This is a rather useful tutorial on positioning: http://www.barelyfitz.com/screencast...s/positioning/

    You could use other positioning to achieve the same effect. I'm not here to write the code for you, but if you let me know specifically which part you're having trouble with I'm more than happy to help.
    TAKE A WALK OUTSIDE YOUR MIND.

  9. #9
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I saw that link, but i will give my best, again, to try figure out fricking position and how its really work! Okay Im going to see this. Ill give you feedback!

  10. #10
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well read through it again and try to make it work. If you're still having trouble, post back with the problem and a link so we can see what is going on. Most likely we can give you some more direction at that point. Good luck!
    TAKE A WALK OUTSIDE YOUR MIND.

  11. #11
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need another resource try this - http://www.alistapart.com/articles/css-positioning-101/

  12. #12
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it. Thanks a lot!


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
  •