Hey Guys.

This is my url : http://www.hamidoffice.com/kar/mrmr and i am trying to stick red part to top like this photo :
http://www.hamidoffice.com/kar/forum/HEADER.jpg

please tell me ow can i to that

Your logo (h1) is pushing the bar down.

Originally Posted by Phunk Rabbit

Your logo (h1) is pushing the bar down.

thanks a lot it works but how can i put my logo on this postion without any problem ? My logo should be there

Absolute possitioning, you will need to have the logo hovering over the header and the bar.

thanks again but now if you look at my page the logo jump behind the div
http://www.hamidoffice.com/kar/mrmr/
everything is fine except logo in header part

Give the <h1> a z-index of 10

First of all, before you do anything else, you need to put a proper DOCTYPE on your page. You'll have all sorts of trouble, especially with IE, w/o a proper DTD on your pages.

Your #header is set to a height of 69px, yet the h1 you're putting inside it is set to a height of 145px, that doesn't work well. You also need to CLEAR your floats, putting overflow:auto on #header will do that.

Based on what I see in your code, I don't see any reason to use position:absolute at all.

thanks a lot LadynRed , I change the code now for easy solution, just could you tell me whats that blue space on my site and how can i remove it and replace it with my header? http://www.hamidoffice.com/kar/mrmr/

#header{
background: #102b48 url(images/header.jpg) no-repeat;
height:109px;
margin;
}

Blue? I don't see any blue

on my laptop i see this picture on top right
But on my PC everything is ok

It is probably browser-related. I test it in Win/Chrome, Win/FF3.6, Win/IE7 and Win/IE8 and see no issues.

Nick

I tend to agree, I don't see that color anywhere in the code.

Well, I do see the color, just not the bug.

Nick

What browser?
What OS?
What screen resolution/dimensions?

The blue is coming from here:

#header {
background:url("images/header.jpg") no-repeat scroll 0 0 #102B48;
height:109px;
margin:auto;
}

You need to repeat the background on the x axis and id maybe change the colour to a dark grey so it matches better if the image disapears:

#header {
background:url("images/header.jpg") repeat-x scroll 0 0 #222;
height:109px;
margin:auto;
}