By prezaeis on

hi peopleim working on my theme based on the zen fixed layout theme, but i cant seem to center my content on the page, im really bad at css
when the screen reselution or browser size change the boxes move around, is there anyway to center them so they stay within the black box on the page?

i appreciate any help

⋅ Categories: Drupal 5.x

Comments

yoroy’s picture

yoroy commented

change line 33 (34?) in zen.css to something like this:

background:#000000 url(images/bg.jpg) repeat-x top center;

vsr’s picture

vsr commented

I would try and put the whole page contents in a div. Set the margins for the div to to keep the contents inside of the black area Then i wouldput another div around this with the background image as background. This outer div will be centered on the page by using the margins.. Set the margins for left and right to auto You will want to make the width of this div the width of the image. Call this div "frame Call the inside div "pagecontent" Helps you to know what they do.

Put all the coding for the page in the page-content div.

For help with CSS you might want to look at this. http://cssed.sourceforge.net/download.php
A great little tool for making CSS syntax.

I think this will keep everything together.

You might have to set the text alignment for the body to center to make it work in some versions of IE.

Hope this puts you in the right direction.

prezaeis’s picture

prezaeis commented

thanks very much people, all that sounded like too much hassle, so what i did was create another image that doesnt need the content to sit in the middle of..
aligned everything to the right and it looks ok...
i have set the background image and aligned it to the top left, is it possible to place another background image behind that one iv already put?
I want to repeat a simple picture of a star all over the page and have that logo sit on top

vsr’s picture

vsr commented

For the div that you want to apply the star to you could do something like this. Or it can be applied to the body if you want it to be the very bottom layer. 

 background-image: url("star.gif");
background-repeat: repeat;