Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Blanchard, Oklahoma
    Posts
    6
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question How do I get my logo to go over my header?

    Well, I'm not exactly sure how to do it. I'll appreciate any help I can get.

    Area of the header in Index.php
    Code:
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    
    <div class="header">
    <img class="logo" src="css/images/header_logo.png">
    <img class="headerbg" src="css/images/header_background.png">
    </div>
    Main.css
    Code:
    div.header
    {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }
    
    img.logo
    {
    float:left;
    margin-left:auto;
    margin-right:auto;
    }
    
    img.headerbg
    {
    float:left;
    width:100%;
    height:200px;
    }
    I'm sure there's a lot I've done wrong. So any errors you notice, please tell me so I can correct them. I'm still learning.

    I'd just like it for the logo to go over the header, I've tried the z-index, but I couldn't get it to work properly for some reason.

    Thanks,

    Nick.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    It would help if we could see working code. We can only guess what your images look like.

    Here's what I would do:

    HTML
    Code:
    <div class="header">
      <img class="logo" src="css/images/header_logo.png">
    </div>
    CSS
    Code:
    div.header
    {
      height: 200px;
      background: url('images/header_background.png') no-repeat;
    }
    
    img.logo
    {
      
    }
    Set the background on the header div in the CSS. This removes one image tag. Set the height of the header div to the height you expect the background to be. The background will not repeat and will start at the top-left corner of the header div.

    I removed the width and margin-left/right because by default all divs are 100% wide. Normally margin-left/right set to auto will center the div, but since it is 100% it can't be centered as it takes up the entire width of its containing element.

    If your background is not as wide as the page or browser window, you should set the header width to the width of the background or whatever width you desire. Then if you want it centered, set margin-left/right to auto.

    If you want the background to appear at a different position, you can use background-position to set it to top, center, bottom, left, center, right or use lengths. (See your favorite CSS reference guide for the exact syntax.)

    By default the logo image will appear at the left edge of the header div, no floating necessary.

    Note that the path to the background image in CSS is relative to the location of the CSS file. Since main.css is already in the /css/ folder, you can leave this bit off and call the background from the images/ folder inside /css/.

  • Users who have thanked kansel for this post:

    GGReactor (10-21-2010)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    If you want the logo over the header, use the header image as a background of the div:

    Code:
    div#header {
    width: 980px;
    height: YYYpx;
    margin: 0 auto;
    background: url(css/images/header_background.png) no-repeat center scroll;
    }
    
    img#logo {
    width: XXXpx;
    height: 200px;
    border: 0;
    }
    You can not center an element with a 100% width. Adjust with for the header image size.

    Code:
    <div id="header"><img id="logo" src="css/images/header_logo.png" alt=""></div>
    Don't see why you need a class for those if they are used only once per page. Nor, do you need all the divs and the associated CSS.

    If I had the images, could have done better with sizes and positioning. You may have to add padding to the logo if you want.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •