none
Learning layers RRS feed

  • General discussion

  • I found a tutorial video that walks you through creating a basic website.  I'm trying to understand divs and layers.


    This is the page:  http://brigan.com/test1/main.html

    I have a layer called wrapper that contains other layers.  I'm attempting to center that layer using margin: auto for the left and the right.  But it is not centering.

    The other thing I don't understand is;  I have attempted to create 2 columns using a divs called rightColumn and leftColumn.  Their respective float is set accordingly.  But that's not working either, as you can see by the web page.

    What am I doing wrong?

     

    Thursday, August 12, 2010 5:39 PM

All replies

  • What am I doing wrong?

     

    Using layers.  Layers should not be used to lay out a web page.  It's the wrong use for them. Read the BEFORE POSTING and take note of Cheryl's video tutorial on building a web page .

    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, August 12, 2010 5:45 PM
  • I've read quite a few of your replies on this forum and many of them, like this one, come across as someone that's annoyed by answering "beginner" questions over and over.  If it annoys you, don't answer.  To only tell me that I shouldn't do it this way, with no explanation as to "why", doesn't help me at all.  And I thought that's what this forum was for, to get help.

    I did read the BEFORE POSTING.  I went through many W3 tutorials.  I downloaded and watched Cheryl's tutorial on building a web page.  And in the past couple days started watching the videos on this website: http://www.learnexpression.com/

    That site suggests layers.  I'm just looking for some basic help to help me understand the difference.  One video says layers, the other divs - neither explains their reasoning.

     

    Thursday, August 12, 2010 6:28 PM
  • Layers use z orders and absolute positioning, both of which make using them a genuine pita,
    because they will not render properly if a viewer resizes their browser viewport to something different
    than your page.


    Expression Web MVP
    Thursday, August 12, 2010 6:58 PM
  • Not annoyed at all.  You asked what you are doing wrong and I gave you the answer.  If you want the detailed, verbose answer then search the forum.  Layers have been discussed ad-nauseum.  Search Google why Layers are evil - lots written on it.

    The site suggestioning layers is 100% wrong.  Layers are divs with special CSS properties applied.

    Again, use Cheryl's guide.  She shows the proper way.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, August 12, 2010 7:14 PM
  • You are on the right track by setting yaour main div container to auto on both sides in the CSS style sheet attached to yuor webpage for the purpose of  getting the div into the centre ( not [sic] Canadian eh).

    You want to set the outside div max to 980px or whatever and then do the margins set, top right bottom left

     ie margins: 10px auto 10px auto;   There is an abbreviated form but learn the long form 1st.

    Don't make your outside div container 100 % of the browser width. The screens are way too wide these days and your layout will look broken on some screens.

    Forget the layers for now. You may not even need them at all to accomplise what you want

    To better understand div layouts, you can also look at samples of code at :

     http://www.dynamicdrive.com/style/layouts/category/C12/

    There are many more good sites with the layouts already done for you with the divs. This is one.  Why reinvent the wheel?

    There is also a plugin to be used in EW4 for smaking such divs page layouts. I tried it out and found it good. I forgot the name of it. I just write them myself, biut that is great for people that have many types of layouts.


    GW
    Friday, August 13, 2010 4:07 AM
  • Forget the layers for now. You may not even need them at all to accomplise what you want

    I'll take a look at your suggestions and the link.  My answer may be in there.

    But I'm curious, before I read more and watch more videos.... what is the right way to do this, based on what I want to do? 

    I should have probably started this way:  a while back I purchased a template, created some graphics, entered a bunch of content, and this is the result:
    http://www.wildfrontiercampground.com/

    I like the basic concept, and I'd like to learn to recreate this on my own from scratch.  The parts that I'm most interested in recreating are:
    - the outer "wrapper" or div, that is positioned down slightly from the top of the browser and that div is centered in the browser.
    - I like having the header graphic at the top with the dropdown menu at the bottom of the graphic.
    - I also like having the rounded corners and drop-shadow affect around the entire edge.

    The way the original author did this was to have the header graphic in a div.  The menu is in a div.  The body is in a div, and there's a footer in a div.  All of that is inside (I believe) the outer div.

    My problem is recreating the positioning required to make that all happen.  And that's how I ended up going down the "layers" road... it seemed like I needed that to get the positioning right.  I'll look at those examples you gave.

     

     

    Friday, August 13, 2010 3:20 PM
  • Start with an empty template that gets you closest to your desired layout.  Then add copy, style and graphics.  Avoid position:absolute.

    CSS Layouts:
    http://layouts.ironmyers.com/

    Layout Galore:
    http://blog.html.it/layoutgala/

    Even more layouts:
    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htm


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Friday, August 13, 2010 3:27 PM
  • To center the wrapper horizontally:

    #wrapper {
    margin: 0 auto;}

    If you want the wrapper to sit slightly down from the top of the screen, add a top margin:

    #wrapper {
    margin: 20px auto 0 auto;}

    Block elements like margins and padding are listed clockwise starting at the top.

    Positioning can be very helpful if you know what you are doing, but most beginners overuse it or don't fully grasp the concepts. For example, if you had a header graphic, but wanted other elements to appear on top of the image, positioning can make that very easy. In past years, a designer would have to "slice and dice" the image. You could set up your header div like this:

    #header {
    background: #c0c0c0 url('yourimage.jpg') no-repeat;
    position: relative;
    width: 960px;
    height: 150px;}

    Now you can add items to the header div by absolutely positioning them:

    #topnav {
    position: absolute;
    top: 10px;
    left: 460px;
    width: 500px;
    height: 30px;}

    The #topnav content will be positioned within the header div and will sit 10 pixels down from the top edge of the header and 460 pixels in from the left side.

    Your page coding would look like this:

    <div id="header">
    <div id="topnav">contents of top nav
    </div>
    </div>
    Without positioning, divs will stack themselves. The first div will come first, the second div will be next, etc. Only if a div has a width that is shorter than the wrapper width or you need two divs floated side by side would things get a bit more complex.

    So download free templates and then see how they are put together. Get a good book on CSS and take it one bite at a time. Congratulations on wanting to learn more. You are in for a fun ride.

    Karey Cummins
    http://www.rtbwizards.com

     

    Friday, August 13, 2010 10:17 PM
  • Using layers for laying out a web page is not the correct way and will lead to nothing but problems.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Friday, August 13, 2010 10:58 PM
  • Don't use layers for anything that contains text, and don't absolutely position something below text on the page. In other words, there are very few reasons for using layers, and few cases where it won't cause problems.  Resizing the text (e.g. in Firefox Zoom, Text Only, or in IE Page -> Text Size) will break the site - the text will overflow the fixed width and height of a layer, and overlap what's below it - and, yes, there are many reasons for people to resize text when visiting a site, including simply having  a very high resolution screen on a small form factor laptop.
    Friday, August 13, 2010 11:10 PM
  • Karey's scenario is unnecessary. You don't need to use absolute positioning to do that. If you have a background set in the header div, then anything you put in that div will automatically appear in front of the background. There is no need to mess around with absolute positioning, when you can easily set the margins on whatever element you want to put in the header div. And if it contains text, never put a height on a div.

    I really think her post complicates things for you.


    Some see the glass as half full. Others see the glass as half empty. I see a glass that's clearly twice as large as it needs to be.
    Friday, August 13, 2010 11:35 PM
  • There are about as many different ways to layout a page as there are webmasters who design them. What works for one site may possibly be a disaster for another.

    My suggestion was not meant to confuse, but to only offer only one possible option along with just a tiny bit about layers. Not all layers are necessarily bad, but they do have their place. Yes, you can blow out the design if the text is increased to a very large degree, but I've seen very few sites where all elements will scale correctly and still remain in place under such circumstances.

    The web is a vast expanse with many different types of sites, some good and some not so good, but you can find a wealth of learning out there. Happy hunting.

    Karey Cummins

     

    Saturday, August 14, 2010 12:15 AM
  • "Yes, you can blow out the design if the text is increased to a very large degree, but I've seen very few sites where all elements will scale correctly and still remain in place under such circumstances."

    If you know to avoid layers it's not hard to have your pages scale quite nicely for a large range of text sizes: For example text containers with fixed widths expand downward with increasing text size because no heights are specified, and everything below them just moves down because you don't put an absolute position on it.  Infinitely large?  No - eventually a single word will be too large for some fixed width in the page - but at that size a person is probably using assistive technologies and doesn't expect many sites to scale that well.  But for "largest" in IE, and several clicks in Firefox: not hard at all.

    Saturday, August 14, 2010 12:47 AM
  • Thanks.
    Monday, August 16, 2010 7:45 PM
  • What a coincedence!  It's one of your templates that I'm working with.

    I am not knowledgeable (obviously) to comment on the pros/cons of layers vs. divs.  But thanks for the info.

    Monday, August 16, 2010 7:46 PM
  • Using layers for laying out a web page is not the correct way and will lead to nothing but problems.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign


    I've been looking at some of the sample layouts.  And have uploaded this that I added a image to:  http://brigan.com/test1/test2.html

    I feel like I'm now getting back to my original problem..... on that layout shown on that link, I want to add a horizontal menu, but it has to be "on top of" the image... placed along the image's bottom edge.  The image in this layout is inside the div "topsection".  I need to somehow stack another div on that one.  The menu has to go inside a div.  That div will need to be centered.  But my problem is; how do I stack divs without using layers?

    Monday, August 16, 2010 7:51 PM
  • <div id="header"

        <div id="menu"

        </div>

    </div>

     

    The Header DIV contains a background image, set through a CSS background property.  The Menu DIV will now float on top of the background image.  Position where desired using a combination of Margins and Padding on the Header/Menu DIV


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Monday, August 16, 2010 7:56 PM
  • FWIW, just to add to the discussion about layers, I visited Karey's site (http://www.rtbwizards.com) to see what it was. It's nice looking, but zooming text one time breaks the footer, and twice breaks the header. Not exactly a strong argument in support of her method.

    Jim

    Monday, August 16, 2010 8:52 PM
  • <div id="header"

        <div id="menu"

        </div>

    </div>

     

    The Header DIV contains a background image, set through a CSS background property.  The Menu DIV will now float on top of the background image.  Position where desired using a combination of Margins and Padding on the Header/Menu DIV

    I don't know if it matters but, in my example I had inserted a image into the div, versus using it as a background.

    I did as basic of an example as I could here:  http://brigan.com/test2/test1.html

    I think I'm on the right track, but I'm getting some very odd results.
    When I preview the page from EW and use IE, it looks like I want it to, with the yellow div sitting at the bottom of the dark grey div (and that dark grey div positioned slightly down from the top of the browser).  Previewing from Firefox is exactly upside down from that:  the yellow div is at the top of that box.  And of course, as you can see from the uploaded page, it looks all together different;  The dark grey div (mastHead) is quite a ways from the top of the browser window, with the yellow bar not along the bottom of mastHead as I wanted.  I'm totally baffled by this, I've gotten 3 different results with the same page.

     

    Tuesday, August 17, 2010 1:31 PM
  • Tested in IE 8, FF, Safari and Chrome and all show as expected, based on your code, with the menu bar at the top of the containing DIV.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, August 17, 2010 1:35 PM
  • Tested in IE 8, FF, Safari and Chrome and all show as expected, based on your code , with the menu bar at the top of the containing DIV.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign

    As a newb this doesn't make any sense to me.  I'm guessing the issue here lies in the margin-top setting for the menu bar div.  It's got a height of 40 px, sitting in a div with a height of 300 px, so I set the top margin to 300-40, which equals 260.  Isn't the menu bar div positioned relative to it's parent div?
    Tuesday, August 17, 2010 1:44 PM
  • I see what you're saying. I missed the margin.  Will check it out in a sec.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, August 17, 2010 1:53 PM
  • Add a border to the Masthead or content to the Masthead and it works.  Very strange.  I have not come across this before.  Its not just an empty DIV causing a problem, its a DIV that does not need to be rendered (adding a border alone fixes it).

    We'll see if anyone else has come across this issue before.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, August 17, 2010 2:05 PM
  • Add a border to the Masthead or content to the Masthead and it works .

    I added content and it looks the way I hoped it would.

    I replaced the content with an image, and it totally broke:
    http://brigan.com/test2/imagetest.html

    The menu bar div disappears with IE and with FF it's no longer in the masthead div.

    Tuesday, August 17, 2010 2:55 PM
  • Of course it broke. You inserted an image that is the exact size of the masthead div. This pushes the menubar div below the image, with a top margin of 260px just like you told it to do. Just make the image the background of the masthead div like Veign said, and your menubar will behave.

    Jim

    Tuesday, August 17, 2010 3:13 PM
  • See my email on how to accomplish what you want: use an image as a background for the DIV using the CSS background or background-image property.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, August 17, 2010 3:39 PM
  • This was the template/site that I had referred to
    http://www.wildfrontiercampground.com/

    I'm trying to recreate that on my own.
    That menu is in a div that is on top of the graphic header.
    This is another sample that I just did.  And I don't know if this shows or better explains what I'm trying to achieve:  http://brigan.com/test3/

    I don't have the horizontal menu in there.  Here's my best shot at explaining this:  below the mastHead div is another div (edge) that would contain content.  The 3 divs: mastHead, edge and footer comprise the graphics necessary to create the drop-shadow affect around the edge.  And on top of the mastHead div would be a div for the menu.

    I just tried setting a background for all 3 of those divs, to the same graphic that's now inserted in them.  And it doesn't show them at all.

    Of course it broke. You inserted an image that is the exact size of the masthead div.
    And therein lies my problem:  for the page graphics to display this drop-shadow affect I need the "edge" div to follow the mastHead div.  I can't place a menu div below the masthead div, it would break up the graphics.  That's why I started this process thinking I needed layers to get a div for the menu to appear "over" the masthead.

    I really appreciate those that have tried to follow all of this.

     

     

    Tuesday, August 17, 2010 6:54 PM
  • The Wild Frontier template looks good, but just like the other example mentioned above, if you zoom text it breaks the menu. If you're willing to accept that, by all means use absolute positioning. Most people will never see a problem (but some definitely will).

    Regarding the test page, why not use a gradient for the background of the whole body, then just rework the main image so that the photo collage can act as a background for the header, along with some content/padding to keep it from collapsing? Then you could position the menu below the masthead div without worrying that your gradient would be messed up. As for the drop shadow and rounded corners, there are javascript options or CSS3 to do that without having to build it all into an image. Of course, not everybody would see those either, but they would still see an attractive masthead without the effects (graceful degradation). Just be aware that people don't usually leave sites because they lack drop shadows, but they do tend to leave if the navigation breaks. Your choice...

    Jim

    Tuesday, August 17, 2010 10:54 PM
  • Just adding to what Jim said, designing a site that will break when text is resized is more of a problem than you might think.  It's not just visitors with less than perfect eyesight who set the text size larger, but people with smaller sized laptops with high resolution screens, which make standard text look very small.
    Tuesday, August 17, 2010 11:34 PM
  • That rounded corner layout would be a breeze to recreate w/o absolute positioning. As Jim said background gradient for the page. Use the masthead image as a background. Personally I'd kill the border on the menu or replace it with a darker border on top & bottom but not on the sides. Though the first thing to do would be to kill the Office WordArt or whatever it is that caused the vml bit in the doctype.

    http://wiserways.net/wildfrontier/index.html is a quick and dirty way to do it w/o absolute positioning though better image slicing would be needed for a production site.


    MS MVP Expression Tutorials & Help http://by-expression.com
    Wednesday, August 18, 2010 12:14 AM
  • That rounded corner layout would be a breeze to recreate w/o absolute positioning. As Jim said background gradient for the page. Use the masthead image as a background. Personally I'd kill the border on the menu or replace it with a darker border on top & bottom but not on the sides. Though the first thing to do would be to kill the Office WordArt or whatever it is that caused the vml bit in the doctype.

    http://wiserways.net/wildfrontier/index.html  is a quick and dirty way to do it w/o absolute positioning though better image slicing would be needed for a production site.


    MS MVP Expression Tutorials & Help http://by-expression.com


    The thought of starting over on the look and how the menu works is a little overwhelming.  I understand the importance of the need to "not break" the site when someone zooms in, etc... but quite honestly this is only for a mountain bike club, and I'm doing this for free.  I have this start that works fine in IE:  http://brigan.com/ombatest/   but of course, the menu is not centered in FF.  So from my perspective, if it wasn't for FF I would be ready to start adding content... not starting all over.

    I'm a newb and, there will be quite a few pages.  So I bought a EW add-in that generated that menu.  The menu goes good with the site colors.

    I like the look of the menu seeming to float over the header graphic, versus falling below it like yours.  But from all responses here, "floating" apparently is not an option for me.

    So back to your example:  I'm trying to understand the suggestion of setting the header image as a background image for that div.  This link http://brigan.com/test3/ shows the basic idea of how the 3 images I use go together.  This jpeg shows the individual images, that would each go in their own div:  http://brigan.com/test3/example.jpg

    I've tried setting each of those as a background image for their own div.  Didn't work.  I tried setting just the top div to have a background image.  Didn't work.  And are you and fcphdJim saying I should use a CSS background gradient, or an image gradient, like I am?

    Is your example using all the graphics I used, including the image based gradient background?  So I just need to follow that example, to end up with what I'm looking for, except with menu positioned under the header graphic, instead of over it?

     

    Office WordArt or whatever it is that caused the vml bit in the doctype.
    What is all that?  I don't use WordArt.

     


     

     

     

    Wednesday, August 18, 2010 3:47 PM
  • Well if you're determined to go that route, you might be able to make the menu position better by modifying the javascript file. If you do this, be sure to make a backup of it first! I believe the relevant code is clear down in the second to last line, where css is defined. Find where it says "ndiv#xtrmenutable table". It is currently defined as {width:auto;height:auto;margin:0px;border-collapse:separate;border-spacing:0px;}. I got it to center in FF by changing "margin:0px;" to "margin: 0 auto;". I did this by making changes with Firebug, however, so I'm not 100% sure that it will work in real life. ;-)

    Be aware that in FF or IE, even with the menu centered normally, if you widen the browser window very much it will still pull the menu slightly off-center. I'm not sure why that is, and I've already wasted too much time playing with this as an educational exercise. However, it may solve your issue and accomplish what you're after. Good luck.

    Jim

    Wednesday, August 18, 2010 5:58 PM
  • http://wiserways.net/wildfrontier/index.html  is a quick and dirty way to do it w/o absolute positioning though better image slicing would be needed for a production site.


    MS MVP Expression Tutorials & Help http://by-expression.com

    I think I'm close to being able to adapt your example:  http://brigan.com/test4/

    I have the exact structure you have in your example.  With my menu in the NavBar div.  The menu structure is a table.  I'm working on figuring out how to center that.

    Wednesday, August 18, 2010 6:26 PM