Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Centering a multiple, overlapping LAYER layout (???)

    Man...this is so frustrating....must be like the most closely guarded secret in webdev. A designer (even a neophyte like me), should be able to use layers, overlapping other layers, positioned anywhere he wants in their relation to each other, for custom design purposes...& then be able to have that group of layers or nesting of layers (or whatever you want to call it)...stay dead center when the browser window is resized.

    Say a designer wanted to place six cameos of former presidents in a circular design, each cameo in it's own layer & overlapping other cameo/layers (overlapping, mind you...which you can only do w/ layers)...& wanted those six presidents in their circular pattern to always remain at the center of the browser window...that should be able to be accomplished very easily.

    How in the heck is this done? I couldn't find help on this anywhere so I came here.

    Thanks (I hope)

    mark4man

  • #2
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Look up the z-index positioning command in CSS. I think thats what you are looking for.

    w3schools has some great CSS info. You can find the Z-index command information there
    Last edited by Tyrial101; 01-03-2007 at 05:44 AM. Reason: Added link

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning

    "Layer" is a term coined by DreamWeaver and doesn't exist (anymore) in the HTML/CSS nomenclature; I assume you're talking about (absolutely) positioned elements.

    I don't know if your are referring to horizontal or vertical entering; in the case of the first this can fairly easily be accomplished by positioning the "former presidents" in relation to a common container element and centering this element using auto left and right margins.
    Vertical centering is not natively supported by CSS well and would require a bit of positioning trickery; it should be feasible as well, though. Please let us know what exactly you're looking for.

    Your assumption that CSS should accomodate every design whim and disregard technical restrictions and usability and accessibility considerations should be regarded as a misconception, though.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66 View Post
    "Layer" is a term coined by DreamWeaver and doesn't exist (anymore) in the HTML/CSS nomenclature; I assume you're talking about (absolutely) positioned elements.

    I don't know if your are referring to horizontal or vertical centering.
    Ron...

    Thanks...horizontal, that's all.

    MF

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center

    Okay; if you create an container element (typically a div) that is parent to all the "former president" elements (probably divs as well, but a look into your markup would be nice and helpful) and position this relative without offset, the president elements can be positioned relative to the position of the container element rather than the browser window so they always keep their bearing.
    If you then give the container a certain set width and specify auto left and right margins, the container will remain centered in the browser window while the president elements will sit nicely inside the container where you put them.

    A simple example:

    HTML:
    Code:
    <div id="container">
      <div id="nixon">...</div>
      <div id="ford">...</div>
      ...
    </div>
    CSS:
    Code:
    #container {
      position: relative;
      width: 500px;
      margin: 0 auto;
      ...
    }
    
    #container div {
      position: absolute;
      ...
    }
    
    #nixon {
      left: [value];
      top: [value];
      ...
    }
    
    #ford { etc.
    }
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ron...

    Dude...I can't figure that out, man.

    Look...here's a test page I constructed using nested layers:

    http://www.moonjams.com/centercontainertest.htm

    When you view the source code, layers 2, 3 & 4 are nested in layer 1...they will stay in their absolute position within layer 1 'cause they're nested.

    All I want to do is slide layer 1 to the center of the browser window.

    [I tried to do that by renaming layer 1 "container" & going w/ your code...but got all farted up. By taking the "style= " snippet out of each div, along w/ all the coordinates; & then placing those coordinates in your css entries...well...let's just say it didn't look so good.]

    Can't we just leave the code for layers 2, 3 & 4 the way it reads now; & somehow just center layer 1...& won't that work 'cause 2, 3 & 4 are nested in 1 ???

    I'll go w/ CSS if it's required...but I'm not so good at filling in the blanks. Check out the page...if you can come up w/ something I can use (as a template) I'll send you some dough via PayPal.

    (hope I'm allowed to say that in the BBS.)

    mark4man

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css

    First of all, I strongly recommend avoiding inline styles via the style attribute, and instead place the styles in a separate section, either internally via the style element, or externally via the link element and a separate style sheet file (preferred). Read this page on the HTML Dog CSS tutorial for more information on this (in fact, read the whole set of tutorials).

    Besides that, you're quite close to the solution; you only need to change the positioning of the container div (id="Layer1") from "absolute" to "relative", remove the left and top offsets and z-index and add margins:
    Code:
    <div id="Layer1" style="position:relative; width:333px; height:311px; margin: 0 auto;">
    This should place the Layer1 div top center regardless of window size (provided it's big enough to fit of course). The Layer2 to -4 divs should now be positioned from the edges of the Layer1 div rather than from the window edges; you probably will need to adjust the left values accordingly.

    Add--temporary--borders if you want to see where your divs are at: "border: 1px solid #ccc;".

    Edit:
    Also, supply a full and (preferably) strict doctype to prevent IE to revert to quirks mode and refuse to center the container:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    I've tried this, and without a full doctype the container won't center. With it, it does.
    Last edited by ronaldb66; 01-05-2007 at 09:07 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ron...

    That is fantastic, man...thanks a bazillion !!!

    What finally did it WAS NOT the addition of the relative & auto margin positioning entries (as I had already tried that, to no avail...which really left me scratching my head)...it was the DOCTYPE entry, as you said.

    So now...I have three things I would like to do:

    1) As you said...& everybody else also tells you to avoid inline styles...but no one tells you why. I don't think it's a case of browser support, but I actually have no idea know what it is...so...I'm pretty sure Dreamweaver can write layer code in a method other than inline css, so I'm going to hit the help files to see if there is a way to configure the app accordingly...

    ...but...

    I do know that when Dreamweaver adds styles (into existing code)...I have never seen the external link method (as on html dog)...I've only seen the conventional method, where the style definitions go into the head & the individual divs refer to the style defs. I don't know how fond I am of the external link idea (speed & all that)...but I want to look into all this in any event.

    2) The DOCTYPE entry was the most important part of the solution...& I want to look into that, as well (to see if Dreamweaver can be configured to write the strict doctype into a new page...& why it uses the transitional entry by default.)

    3) Can I send you some renumeration for you troubles.

    Thanks again...very much,

    mark4man


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •