CSS Forum

**dlusiondone** · 05-04-2009, 10:47 AM

Hi all,

Was hoping you could help me as im pretty amatuer.

Why is it that my sites css changes with resolution change.

I look @ it on 1680x1050 in comparison to 1024x768 and the alignment is different.

Any suggestions on how to resolve this?

Thanks in advance.

**LadynRed** · 05-04-2009, 10:54 AM

Gee... let me get my crystal ball...

Lets see a URL or ALL the code, there could be a LOT of reasons for it but impossible to know w/o seeing it.

**dlusiondone** · 05-04-2009, 10:57 AM

oh sorry of course, URL: www.skopeentertainment.com

Thanks.

**LadynRed** · 05-04-2009, 11:03 AM

Ok, thanks.
Do you want it centered ?

The problem is your use of position:relative. The flash is being positioned relative to it's nearest positioned ancestor, in this case, the header. I don't see a need to set that to position: relative anyway.

If you want the flash centered, put it inside another div, center that div by giving it a defined width and using margin: 0 auto (adjust the 0 for top and bottom margins as needed). That will center it no matter what resolution is being used.

**dlusiondone** · 05-04-2009, 01:14 PM

Yeah its the centering i was looking for, thanks LnRed.

Could you possibly have another look for me: www.skopeentertainment.com as i've ammended the code.

The height of everything stays consistent with resolution change but for some reason it slides left to right with res change?

Any suggestions?

Thanks again in advance

**siforek** · 05-04-2009, 01:22 PM

Try this, Put everything inside a div, like:

Code:

<body>
<div style="margin: auto;">
EVERYTHING
</div>
</body>

Though I'd suggest using a stylesheet for the actual css.
I center pretty much every site I do, so feel free to visit my site/work & steal any little bits of code you need.

**LadynRed** · 05-04-2009, 03:28 PM

It appears that now you have everything set to position:absolute - that's an even worse method than your first one.

**dlusiondone** · 05-05-2009, 07:01 PM

Thanks siforek but that solution isn't quite what i'm looking for, everything gets centered but the logo & the flash elements left align.

I used your method ladynRed and it worked as far as centering is concerned but when i change the resolution it still shifts. I'm assuming this is happening because the logo & the flash elements are two different lengths.

I think what i need to do is centre the logo to the stage and centre the flash element to the logo so that wherever the logo is placed, the flash will centre to the logo.

Hope this is clear. Any suggestions.....?

Thanks in advance.

**GeekSpecialties** · 05-05-2009, 11:22 PM

Your header is too wide and is centering separately form the content.
place both the content and header in a div and center it like LadynRed says above

Quote:

center that div by giving it a defined width and using margin: 0 auto (adjust the 0 for top and bottom margins as needed). That will center it no matter what resolution is being used.

Make the header and content the same width. I would scale the header to the width of the content below.

**Brian07002** · 05-06-2009, 05:49 AM

Quote:

Originally Posted by dlusiondone

Hi all,

Was hoping you could help me as im pretty amatuer.

Why is it that my sites css changes with resolution change.

I look @ it on 1680x1050 in comparison to 1024x768 and the alignment is different.

Any suggestions on how to resolve this?

Thanks in advance.

There are many more things to a website besides an 'Html Editor'...Use Google...

It's Your Friend...

-Brian