SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layer questions....how?

    I am only recently looking into implementing CSS (as many know) into my designs.

    I messed around with using layers today also. What I want to know is this...

    I have found ways, using tables, to make sure that every visitor sees my sites the same regardless of resolution or browser.

    How is this possible with layers? When I resize the screen, my content goes all over the place.

    Is there a practical way to do this? Or, are layers only to be used for special reasons (menu fly-outs and other DHTML tricks) instead of general content arrangement?

    Thanks!
    Come get 5,000 Full Color - High Gloss(front and back) business cards for only $270!
    www.diamondqueue.com

  2. #2
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There have been a couple of threads dealing with this exact same topic in the CSS forum here. You might try searching for them.

    Anyway here's a good read to get you started.

    http://www.alistapart.com/stories/journey/

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm....

    I read that article and then did a search for the other threads you mentioned.

    Yes, there were many questions but none of them had any answers! There was a lot of banter back and forth but no solutions!

    Every thread seemed to end with a question and no answer, this question has not ben answered from what I can find.

    Again:

    I have found ways, using tables, to make sure that every visitor sees my sites the same regardless of resolution or browser.

    How is this possible with layers? When I resize the screen, my content goes all over the place.

    Is there a practical way to do this? Or, are layers only to be used for special reasons (menu fly-outs and other DHTML tricks) instead of general content arrangement?

    When I resize my screen, I want nothing to change. Nothing!
    Come get 5,000 Full Color - High Gloss(front and back) business cards for only $270!
    www.diamondqueue.com

  4. #4
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using Dreamweaver you could download the "FixDynamicLayers" extension that can be found here.
    This is what it does:

    Ever wondered why Netscape displayed layers incorrectly even though Explorer had no trouble and in Dreamweaver everything looked perfect? The answer lies in the way layers are (and can be) defined. In Dreamweaver, when a layer is created, the HTML looks something like this:

    Example 1
    <div id="Layer1" style="position:absolute; top:50px; left:10px; width:10px; height:5px; z-index:1">">bla bla bla</div>

    This is fine if your layer is static (or animated by Dreamweaver). But the moment you want to get into serious DHTML using objects and the like, Netscape will not like this way of defining layers. And as every good DHTML author knows - you have to make dynamic pages Cross-Browser compatible. This is where Fix Dynamic Layers comes in. There is a second way to define a layer's properties by using a <style> tag (yes - like the one Dreamweaver uses to define CSS styles) in the HEAD. This is how the previous layer would be defined in this way:

    Example 2
    In the HEAD you would have:

    <style type="text/css">
    #Layer1 {position:absolute; top:50px; left:10px; width:10px; height:5px; z-index:1;}
    </style>

    Then in the BODY you would have:

    <div id="Layer1">bla bla bla</div>

    This means that now the <div> tag is a lot less cluttered and also ALL your layers' definitions can be compared easily with one another because they all reside in the same <style> tag.
    You can read more on this page: http://www.geocities.com/tchislett/dw/dynlayer.html.

    Also, don't forget using the "Add Netscape Resize Fix" command in Dreamweaver.

  5. #5
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know...I find that article I linked to covers all the important points for implementing CSS-P for me. Except in your case you do your dimensions in pixels instead of percentages. Sorry it didn't help you.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the post duckie. Sorry if I came off a little ungrateful for the post. I appreciate your feedback and help.

    Would using pixels vs percentages make much difference?

    The window is still gonna be smaller and the layers will still end up in the wrong places in regards to where the center of the window is.

    150 pixels away from the left side might put it right in the middle of a 300 pixel window but with a 600 pixel window it will be left of center. Correct?

    But if I use percentages, that opens up a whole new set of issues such as spacing adjustments and such.

    Is there a reson to use layers instead of tables? With tables I can define where an object will be, and it works correctly on any size window. The layers seem to move around.

    Or, am I misunderstanding the use and function of layers?
    Come get 5,000 Full Color - High Gloss(front and back) business cards for only $270!
    www.diamondqueue.com

  7. #7
    SitePoint Member
    Join Date
    May 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to use An extention from Project seven called Snap Layers.

    It snaps the layer to an image so no matter what size the window...the layer is always where you want it to be.

    You can even use a transarent pixel image if you needed to.

    http://www.projectseven.com/extensions/index.htm

    Very handy Dreamweaver extention.

  8. #8
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For information on centering elements:

    http://www.elementkjournals.com/wdv/0105/wdv0151.htm

    Take note this will work only on IE5 and Mozilla.

  9. #9
    SitePoint Enthusiast thenovice's Avatar
    Join Date
    Mar 2001
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Layers do work well, when positioned absolutely. Encapsulating the content in <DIV> usually does the trick for me.
    Let the table width/height be 100%...then u can fix all BUT the last colum/row in pixels. Let the last colum/row be 100% so that it expands appropriately.

    The most feasible solution seems to me Marina's. Hope we could be of some help :-)


Bookmarks

Posting Permissions

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