Website Header

[WarOfTheTitans]

My header that I've done is like this in my resolution (1680x1050):

But when I change resolution, it goes like this (1440x900):

Not all the way to right but it don't look like it was before...

Here is the CSS:

#mainPictures {
	margin-top: 2px;
	margin-left: 23%;
	width: 925px;
	float: left;
  position: relative;
}

and i put it like this almost on the buttom of my layout.php:

	<div id="mainPictures">
		<a href="index.php?subtopic=latestnews"><img src="layouts/custom/images/headerp/picall2.gif"/></a>
	</div>

I want it to be there in the right place even when I change resolution (as the conent)...
Rep+ thanks in advance

 

[Chris]

#mainPictures {
     margin: 2px auto 0px;
     width: 925px;
}

 

[WarOfTheTitans]

Thanks alot! but it don't fit the content position. It works now even when I change resolution. Can I change it like three or four px to left? And still change resolution?

 

[Amiroslo]

Thanks alot! but it don't fit the content position. It works now even when I change resolution. Can I change it like three or four px to left? And still change resolution?

test it?! and see what happens

 

[WarOfTheTitans]

The problem is how I should write the code...

 

[Chris]

What you could do, and probably should do, is to use what we refer to as a wrapper.

<div class="wrapper">
     <div id="mainPictures">
          <img />
     </div>
</div>

.wrapper {
     position: relative;
     margin: 0px auto;
     width: 926px;
}
.wrapper #mainPictures {
     position: absolute;
     left: -5px;
}

 

[WarOfTheTitans]

I did it like this:

#mainPictures {
     margin: 2px auto 0px;
     width: 910px;
}

I reduced the picture's width. I tested with the new resolution too. It worked, thanks