Beginner Advice

CSS Resolution

[Cobra]

Hello,

I'm designing a website (<snip>) and it's my first website that I'm designing in CSS. I'm having trouble with the content alignment in different resolutions.

If I code the website for 800x600 resolution, will it display the same way for the most part?

I'm going to re-write the CSS from scratch. I'm going to make the background image one container and set the z-index so that it's one layer, and then I'll make all the content containers inside the the resolution of the background image. Should I use absolute positions? pixels? percentages?

My background image is 1200x827 right now, but I'm going to resize it for 800x600 just to make my life easier, and center it. My last question is, if I'm position layers by pixel, how do I know exactly how much space/pixels I'm working with?

For example, I'm going to code the content containers as DIV's and have them under the body which the background image is specified under.

Thank you in advance.

[edited by: swa66 at 8:28 am (utc) on Sep. 24, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

[swa66]

You could leave a wide image centered on the background of e.g. the html
and then center the body on top of that to keep it in the center regardless of the size of the window.

If the window is smaller than your image it will cut off the image on both sides, so your image needs to be made with that in mind.

I'd not think too much in terms of layers and z-index. Use it sparingly -as you have to only-. Going with the flow is so much easier.

Let's say you have a box drawn on the background of your html and you know it's in the center horizontally and vertically it's 200px from the top. and it's 320x 200px in size.
To position something over that you could simply use absolute positioning:
position:absolute;
top:200px;
left: 50%; /* left side in the middle */
width: 320px;
height: 200px;
margin-left: -160px; /* move back half the width */)

[Cobra]

Hey there,

I apologize about the link, I'll take a look at the charter.

Anyway, if I want to center the body on top of the image, how do I code this new box on top of the image? The image right now is 1200x827px. So, do I just do something like this?

content {
position: absolute;
width: 1200px;
height: 827px;
}

[Cobra]

I figured it out. Actually finished the site after this. Thanks for the help. I just need to tinker around a little more.

[Cobra]

I looked at my website in IE, and the div's I have created on top of the background image are displayed UNDER it. So, all my content is messed up. Is there something I need to do for IE differently?

Right now, in Firefox all I did was create a div that was the size of the background image. Then, did FIXED positioning for the other div's inside of 1200px by 827px area of the background image.

Do I have to do z-index for IE or something, or is there something I'm missing?

[swa66]

Some legacy IE versions don't support position:fixed at all.

I'm not all that sure position:fixed is a great idea, as it means the visitor cannot scroll to see the element if it would fall outside of the viewport.
If you do need position:fixed support: take a look at IE7.js, it adds support for it in IE6.
[code.google.com...]

[Cobra]

I have another question. I have a 1px solid black border around my content that gets shifted whenever I use <ul>, <h1> and <li> tags. Do I have to adjust the padding on these individual tags to avoid the shifting of the border?

Thanks.

[Cobra]

Any help on that last one?