...

View Full Version : How do I get my logo to go over my header?



GGReactor
10-21-2010, 10:13 PM
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

<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


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.

kansel
10-21-2010, 11:23 PM
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

<div class="header">
<img class="logo" src="css/images/header_logo.png">
</div>


CSS

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/.

Major Payne
10-22-2010, 02:21 PM
If you want the logo over the header, use the header image as a background of the div:


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.


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum