Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple (uncomplicated) Layer Centering

Status
Not open for further replies.
BiggyRat

BiggyRat

Technical User
Dec 17, 2006
56
US
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,

Biggy Rat
 
Sort by date Sort by votes
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" "
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,

Biggy Rat
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jackQue1983
  • Locked
  • Question
centering layer in html 2
Replies
2
Views
208
Kjonnnn
Kjonnnn
4myinfo
  • Locked
  • Question
Centering a table over a graphic in CSS?
Replies
1
Views
140
vacunita
vacunita
lucidtech
  • Locked
  • Question
simple chat best practices
Replies
0
Views
114
lucidtech
lucidtech
spdawson
  • Locked
  • Question
Need help centering an image in dreamweaver
Replies
2
Views
129
spdawson
spdawson
bambipage
  • Locked
  • Question
Centering Dreamweaver Template - Help RQ
Replies
1
Views
90
imeldesign
imeldesign

Part and Inventory Search

Sponsor

Back
Top