CSS background properties

[incraftfun]

Hi. How can I get a background centered and still enter coordinates? I have a problem because I have a a layout that needs to be synchronized with the background, but when I enter "center" in the css property, it is off. How can I remedy this?

Thanks!

Alex

PS you can look at the layout at http://mrfreeipod.com/layout.html, but the top part is off because of that stupid banner.

[weegillis]

Centering is always a joy with CSS. Like everything else. It gets even more complicated when working with a generated layout using slices and spacer gifs within a complex layout table.

In its simplest form, CSS centering is very straight forward. Take for instance a paragraph that is half the width of the page, centered, with normal justification:

<div class="content">


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin porta augue et sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

First, give the content div a reference width, say, 100%, and center align its child elements. Then give the paragraph a relative width of 50%, and justify the text. Setting the right and left margins to auto evens them out, so the element becomes self-centering.

div.content{
	width:100%;
	text-align:center;
}
div.content p{
	width:50%;
	margin:1em auto;
	text-align:justify;
}

If the div is a child in a TD, 100% width is relative to the full width of the TD. Likewise, the paragraph width in this example will be half of the div, not the page, unless of course the div is the full width of the page.

The same method can be used to center a list of fixed or relative width, while maintaining left alignment of the list items. This one would have no bullets and no left indent:

div.content ul{
	width:50%;
	margin:1em auto;
	padding:0;
	list-style:none;
}
div.content li{
	margin:0;
	text-align:left;
}

[pagetta]

is it not possible to save your top images with transparent BGs and then the background wouldn't need to line up?
if you save one sun images, set that as body bg and repeat it, then have your images at the top of your site saved with transparent backgrounds (if a gif you will need to set the matte as the darker brown (#775605)) then your actual site is completely independant of the BG.
I hope that is of some help - nice looking site :-)