18 Replies Latest reply on May 4, 2010 1:46 PM by thuy.copeland

    Div wrapper question

    KatyDad Level 1

      I'm having a hell of time understanding a div #wrapper

       

      Is a wrapper preset?

       

      Does the wrapper go inside the body?

       

      Do the rest of the main block divs go inside the wrapper and are they centered?

       

      Is the body set to center?

       

      Is the wrapper set to text align left or centered?

       

      I understand the principle of a wrapper, just not sure how to set one up and insert the rest of the block divs.

       

      KatyDad

        • 1. Re: Div wrapper question
          thuy.copeland Level 2

          Do you mean the div #wrapper when you create a new template?

           

          1. Yes, it usually is defined when you first set up your page.

          2. Yes. All of your <divs> will be inside the <body>

          3. Yes, usually the other divs are located inside the #wrapper. They might be centered, depending on your layout.

          4. Not sure what you are asking here. Your CSS will say something like body{text-align: center;} or body{margin: 0 auto;} to center it.

          5. The wrapper can be set so the text aligns left or centered. That depends on what you want to define in your CSS.

           

          HTH.

          • 2. Re: Div wrapper question
            osgood_ Level 8

            KatyDad wrote:

             

            I'm having a hell of time understanding a div #wrapper

             

            Is a wrapper preset?

            No.

             

            Does the wrapper go inside the body?

            Yes.

             

            Do the rest of the main block divs go inside the wrapper and are they centered?

             

             

            They can do. A wrapper just wraps other elements, so you can have as many wrappers a you like on a page. Normally you would set one main wrapper if you want to center a website, then all the other element go in the wrapper.

             

            Is the body set to center?

             

            Not usually.

             

            Set the wrapper to center if you want to center the content within it by using margin: 0 auto; The wrapper also requires a specific width set as the example below shows:

             

            #wrapper {

            width: 850px

            margin: 0 auto;

            }

             

            Is the wrapper set to text align left or centered?

             

            Either, depends if you want the text within it centered or aligned left. Aligned left is the default setting so no need to set it anyway.

             

             

            I understand the principle of a wrapper, just not sure how to set one up and insert the rest of the block divs.

             

             

            It's not as confusing as you think. You start off with the basic wrapper <div> and then insert other <divs> within it:

             

            <div id="wrapper">

            <div id="leftCol">Left Column</div>

            <div id="rightCol">Right Column</div>

            </div> <!-- end wrapper -->

             

             

            Then use some css to position the <divs>. This gives you a two column layout.

             

            #wrapper {

            width: 850px;

            margin: 0 auto;

            overflow: hidden;

            }

             

            #leftCol {

            float: left;

            width: 250px;

            }

             

            #rightCol {

            float: left;

            width: 600px

            }

            1 person found this helpful
            • 3. Re: Div wrapper question
              KatyDad Level 1

              Thuy

               

              Yes I mean a template. How and where is it defined when you first set up the pages. I was using a Lyndon tutorial and they skipped how to create a wrapper. They had the body and then the #wrapper with no explanation how they got there. In the "body" they zeroed out the margin and padding and set the text aligned to center. The wrapper I'm assuming was set inside the body with a 0 auto for the padding and 0 margins. They set the text aligned to left in the wrapper. The problem is that the div blocks are not centered in wrapper. Should they?

               

              Thanks

               

              Katydad

              • 4. Re: Div wrapper question
                thuy.copeland Level 2

                Can you point me to your tutorial, so I can see the code that's confusing you?

                • 5. Re: Div wrapper question
                  KatyDad Level 1

                  The tutorial is with James Williamson in Essential Training for Dreamweaver. chapter 10_ controlling layout with CSS

                   

                  KatyDad

                  • 6. Re: Div wrapper question
                    osgood_ Level 8

                    KatyDad wrote:

                     

                    The tutorial is with James Williamson in Essential Training for Dreamweaver. chapter 10_ controlling layout with CSS

                     

                    KatyDad

                    The chances are the wrapper <div> was placed in position by going:

                     

                    Insert>Layout Objects>Div Tag

                     

                    Type wrapper in the ID field.

                     

                    If you then look in code view that gives you this:

                     

                    <body>
                    <div id="wrapper">Content for  id "wrapper" Goes Here</div>
                    </body>

                     

                    I dont think there is a way automatically in Dreamweaver to wrap all the existing <divs> on a page. You will most likely have to go into code view and do it manually.

                    • 7. Re: Div wrapper question
                      thuy.copeland Level 2

                      Are you watching this one? http://www.lynda.com/home/DisplayCourse.aspx?lpk2=50679#

                       

                      If so, now that I can see what you're talking about, some answers for you:

                       

                      How and where is it defined when you first set up the pages.

                       

                      In DW CS4, the #wrapper is not in automatically defined in the template.

                       

                      It looks like he built a custom page to work on the box model concept.

                       

                      To create the page he has, replace everything between the body tags with this:

                       

                      <body>

                      <div id="wrapper">

                      <p>This is a paragraph with 10px of margins.</p>

                      <p>This paragraph also has 10px of margins.</p>

                      <div id="container1">

                      <p>This paragraph is inside of the container1 DIV.</p>

                      </div><!-- close container1 -->

                      <div id="container2">

                      <p>This paragraph is contained inside a DIV that also has 20px of margins.</p>

                      </div><!-- close container2 -->

                      </div><!-- close wrapper -->

                      </body>

                       

                      The wrapper I'm assuming was set inside the body with a 0 auto for the padding and 0 margins.

                       

                      Yep, that's correct, the wrapper is inside the body. I think the problem you are running into is located here:


                      #wrapper{

                          padding: 0 auto;

                          margin: 0;

                      }

                       

                      but that's a bit backwards. Try this:

                       

                      #wrapper{

                          padding: 0;

                          margin: 0 auto;

                      }

                       

                      setting the margins to "0 auto" is what makes it center the block.

                       

                      Does it work now?

                      • 8. Re: Div wrapper question
                        KatyDad Level 1

                        Thuy

                         

                        Thanks you very much. I needed to get this thing right because it’s the foundation. You've been a great help

                         

                        Regards

                         

                        KatyDad

                        • 9. Re: Div wrapper question
                          thuy.copeland Level 2

                          I'm glad to see you make such an effort to understand CSS. Good luck!

                          • 10. Re: Div wrapper question
                            eliteflyers_com Level 1

                            It's not as confusing as you think. You start off with the basic wrapper  <div> and then insert other <divs> within it

                            • 11. Re: Div wrapper question
                              KatyDad Level 1

                              Thuy

                               

                              I have one more issue that I need to get straight. I created a wrapper with width of 750 pixel. I created a left panel which is 250 pixel and floated to the left. Then a right panel which is 500 pixel and floated to the right. I cleared the footer which is at the bottom. When I preview the layout I see the wrapper coming through with about 250 pixel space between the right and left panel. When I look at the layout in the design mode in DreamWeaver the left and right butt up against each other and look correct. Another thing that bothers is the wrapper was set to text align left, but the Div inside did not take on that property and I've had to set each to the correct align property.

                               

                              regards

                              KatyDad

                              • 12. Re: Div wrapper question
                                thuy.copeland Level 2

                                Katy,

                                Can you post your CSS?

                                 

                                As a general rule, I don't trust DW's design view. I don't know which version you are working with, but as of CS3, it would butcher my designs and render very similar to the non-standard IE6. When I check them in FF, IE 7/8, Opera & Safari, all is well.

                                 

                                Ok, so what you want to layout is something like this?

                                mockup.png

                                Without your code, I'm just going to think out loud. My first guess it that your HTML isn't in the right order. Is your closing div for the wrapper below all the other divs?

                                 

                                The HTML structure would be:

                                <div id="wrapper">

                                   <div id="left-bar">

                                   </div>

                                   <div id="content">

                                   </div>

                                   <div id="footer">

                                   </div>

                                </div>

                                 

                                My second guess is that you have a margin + padding declared somewhere, forcing a 250px space between your left bar and content divs.

                                 

                                The CSS would be:

                                #wrapper{

                                  text-align: left;

                                  width: 750px;

                                }

                                #left-bar{

                                  float: left;

                                  width: 250px;

                                }

                                #content{

                                  float: right;

                                  width: 500px;

                                }

                                #footer{

                                  clear: both;

                                }

                                 

                                The third guess is your browser. Which one and what version are you using to preview your layout? IE 7 and IE 6 have known "double margin" bugs, where the vertical margins will not collapse.

                                 

                                As far as the DIV inside the wrapper not taking on the text-align property, I would need to see your CSS again. CSS is useful because of its inheiritability, so if you are forced to reset the text alignment for the left-bar (once its declared in the #wrapper), then it may be an indication that the left-bar is not inside the wrapper div.

                                 

                                Post your HTML/CSS and I can give you specifics.

                                • 13. Re: Div wrapper question
                                  KatyDad Level 1

                                  Katy

                                   

                                  I'm trying to set up good template that I can understand.

                                   

                                  Here is my html

                                   

                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                  <html xmlns="http://www.w3.org/1999/xhtml">
                                  <head>
                                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                  <title>Untitled Document</title>
                                  <link href="Assets/HAD_layout.css" rel="stylesheet" type="text/css" />
                                  </head>

                                  <body>
                                  <div id="wrapper"></div>
                                  <div id="nav">Content for  id "nav" Goes Here</div>
                                  <div id="header">Content for  id "header" Goes Here</div>
                                  <div id="leftbar">Content for  id "leftbar" Goes Here</div>
                                  <div id="righttext">Content for  id "righttext" Goes Here</div>
                                  <div id="footer">Content for  id "footer" Goes Here</div>

                                   

                                  and CSS

                                   

                                  @charset "utf-8";

                                  /* CSS Document */

                                  body {

                                  background: #bbb;

                                  margin: 0;

                                  padding: 0;

                                  text-align: center;

                                  }

                                  #wrapper {

                                  text-align: left;

                                  margin: 0 auto;

                                  padding: 0px;

                                  width: 750px;

                                  }

                                  #nav {

                                  background-color: #0FC;

                                  margin: 0px;

                                  padding: 0px;

                                  height: 50px;

                                  }

                                  #header {

                                  background-color: #CC0;

                                  margin: 0px;

                                  padding: 0px;

                                  height: 50px;

                                  }

                                  #leftbar {

                                  background-color: #C9F;

                                  margin: 0px;

                                  padding: 0px;

                                  height: 500px;

                                  float: left;

                                  width: 250px;

                                  text-align: left;

                                  }

                                  #righttext {

                                  background-color: #3CF;

                                  margin: 0px;

                                  padding: 0px;

                                  height: 500px;

                                  float: right;

                                  width: 500px;

                                  text-align: left;

                                  }

                                  #footer {

                                  background-color: #FC0;

                                  margin: 0px;

                                  padding: 0px;

                                  height: 50px;

                                  clear: both;

                                  }

                                  • 14. Re: Div wrapper question
                                    thuy.copeland Level 2

                                    Ah, you are very close to having it right! There is your issue--you closed the wrapper div right after you opened it.

                                     

                                    Try moving your closing wrapper div "</div>" to the end of your code block.

                                     

                                    <div id="wrapper">
                                    <div id="nav">Content for   id "nav" Goes Here</div>
                                    <div id="header">Content for   id "header" Goes Here</div>
                                    <div id="leftbar">Content  for  id "leftbar" Goes Here</div>
                                    <div  id="righttext">Content for  id "righttext" Goes Here</div>
                                    <div  id="footer">Content for  id "footer" Goes Here</div>

                                    </div><!-- closing div for the wrapper goes here -->

                                     

                                    I tend to think of it as tape on a gift. When I tape the wrapper <div id="wrapper"> to the top of the box (rest of the code is in the box), I have to tape it on the bottom too </div>.

                                    • 15. Re: Div wrapper question
                                      KatyDad Level 1

                                      Thuy

                                       

                                      I should I have showed you the html and CSS at the start. I thought something was fishy. This stuff may look easy to some people, but it can be tricky.

                                       

                                      Thanks very much for your patients

                                       

                                      KatyDad

                                      • 16. Re: Div wrapper question
                                        thuy.copeland Level 2

                                        No problem. I remember grappling with the box model when I once used tables for my layouts. It took a lot of visuals before I finally understood the basic concept.

                                        • 17. Re: Div wrapper question
                                          KatyDad Level 1

                                          Thuy

                                           

                                          While I have your ear I have one last question. I promise. The question has to do with creating divs for pictures. Is this a best practice thing or is it necessary? I guess the same question could be asked about text. I've always entered pictures and text into the main divs.

                                           

                                          KatyDad

                                          • 18. Re: Div wrapper question
                                            thuy.copeland Level 2

                                            KatyDad,

                                             

                                            That depends on what you plan on doing with your images. If they're being used as background elements for your design, they can be attached to your #container, #wrapper, #content or any other structural div, so an extra div isn't necessary. If you're planning on using some subtle animation on your photos with Scriptaculous, then yes, having a separate div will help.

                                             

                                            In general, I don't put my images in their own div. For images that I plan on placing in the content area, I style the image tag directly. For example, let's say I like the Polaroid look and I know I will have mostly square images in the content area. My CSS would look like this:

                                             

                                            #content img{
                                                background-color: #fff;
                                                padding: 5px 5px 50px;
                                                border: 1px solid #ccc;
                                            }

                                             

                                            And if I needed it to align to the left, I applied an "align-left" class to it.

                                            HTML: <img src="something.jpg" class="align-left" />

                                            CSS:

                                            .align-left{

                                               float: left;

                                               margin-right: .25em; /* add some right side spacing */

                                            }

                                             

                                            You want to keep your <div>s to a minimum, to keep your page uncluttered and lightweight. Each one should have a purpose.

                                             

                                            I once heard a web designer say that if you could create the layout and add the design elements in 7 <div>s or less, you're a CSS expert. (I haven't yet).