PDA

View Full Version : Simple (uncomplicated) Layer Centering


mark4man
08-14-2007, 11:05 PM
Hello...

I have a site that I am in the process of developing; & the design concept is a fairly simple one. I already know how to nest layers in a parent layer & center that parent layer...but I always wind up w/ a margin on the left & top of the parent (centered) layer (which...doesn't look right if there's any type of backgrounding in the layer.)

My concept is to have the parent layer sized to 779 X 386 pxl's...so as to open fully in an 800 X 600 browser screen w/ no scroll bars...& then move to the center for all larger screen sizes (1024 X 768, etc.) No more...no less...simple design...info & content stays centered in all cases, with no margins at the smaller res.

Is there a way to do this in simple form...without all that P7 bloated layer centering fix hullabaloo?

Thanks,

mark4man

mark4man
08-15-2007, 01:21 AM
SOLVED...!!!

I actually had a page constructed to work in the way I described, but the parent layer was a bit skinny. When I found it, I reconstructed it as follows:

First, I made my DocType a strict one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then...in the Head...below my keyword metadata...there is this stylesheet (or 'fully qualified layer', or whatever the frig it is):

<style type="text/css">
body, html{
margin:0;
padding:0;
}

[I believe this was the missing link for what I wanted to do...because with every other page where I tried to center the parent/container layer, whereby I had the stupid margin on the left & top...it was missing.]

Then the parent layer, with the nested layers, is as follows:

<div id="Layer1" style="position:relative; width:779px; height:1120px; margin: 0 auto;">
<div id="Layer2" style="position:absolute; left:Xvalue px; top:Xvalue px; width:Xvalue px; height:Xvalue px; z-index:1"><img src="SomePhoto.jpg" ></div>
<div id="Layer3" style="position:absolute; left:Xvalue px; top:Xvalue px; width:Xvalue px; height:Xvalue px; z-index:2"><img src="SomeOtherPhoto.jpg"></div>
</div>

There's no z-index value for the parent div...but it all works.

[& please note: layers 2 & 3 are tabbed two spaces to the right for nesting, but that config didn't display as such here.]

Just wanted to put this out there for anyone else who may need it.

Thanks again,

mark4man

domedia
08-15-2007, 02:00 AM
Yupp, the page will always have default margins. I think only setting body {margin: 0 padding: 0;} is enough to fix it crossbrowser wise