13 Replies Latest reply: Jun 16, 2012 9:37 AM by Nancy O. RSS

    Need Help With Div Tags

    highhokie Community Member

      Hello,

       

      I'm trying to figure out to create 4 div tags within a body content area.  And have them formatted with two on top and two right beneath.  Then have a right hand column within this body area.  Here is the code I have so far.  Its more about getting the format I need.

       

         <div id="body">

           <div id="1">Content for  id "1" Goes Here</div>

           <div id="2">Content for  id "2" Goes Here     </div>

           <div id="3">Content for  id "3" Goes Here     </div>

           <div id="4">Content for  id "3" Goes Here</div>

           <div id="4">Content for  id "RighhandColumn" Goes Here</div>

        </div>

       

       

       

      Any help?

        • 1. Re: Need Help With Div Tags
          Ben Pleysier MVP
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <style>
          body {
              width: 960px;
              margin: auto;
          }
          .article {
              width: 60%;
              float: left;
              background: #FFF;
          }
          .three {
              margin-top: 20px;
          }
          .aside {
              width: 35%;
              float: right;
              min-height: 250px;
              background: #FFC;
          }
          </style>
          </head>
          
          <body>
            <div class="aside">Content for  id "RighhandColumn" Goes Here</div></body>
            <div class="article one">Content for  id "1" Goes Here</div>
            <div class="article two">Content for  id "2" Goes Here</div>
            <div class="article three">Content for  id "3" Goes Here</div>
            <div class="article four">Content for  id "3" Goes Here</div>
          </html>
          

           

          Gramps

          • 2. Re: Need Help With Div Tags
            highhokie Community Member

            Wow. Thanks so much. I'll try that method later today when I'm in class.

            Have a good one.

             

            Owen

            • 3. Re: Need Help With Div Tags
              cdeatherage Community Member

              Note that in your original example, you have written the same id twice:

               

                   <div id="4">Content for  id "3" Goes Here</div>

                   <div id="4">Content for  id "RighhandColumn" Goes Here</div>

               

              Just wanted to make sure you understand classes (as in Gramp's response) may be used multiple times on a page, but IDs may only be used once. In this case, your last ID would logically be "5."

               

              Chris

              • 4. Re: Need Help With Div Tags
                highhokie Community Member

                One more thing, I tried that code at the computer lab, and it shows the two

                boxes are on top of each other.

                Do you know how I can make two box appear side by side to each other and

                then have another row right beneath with two boxes side by side.

                 

                The right hand column does appear to be on the right side within this area,

                so thanks for that.

                • 5. Re: Need Help With Div Tags
                  Ben Pleysier MVP

                  cdeatherage wrote:

                   

                  Note that in your original example, you have written the same id twice:

                   

                       <div id="4">Content for  id "3" Goes Here</div>

                       <div id="4">Content for  id "RighhandColumn" Goes Here</div>

                   

                  Just wanted to make sure you understand classes (as in Gramp's response) may be used multiple times on a page, but IDs may only be used once. In this case, your last ID would logically be "5."

                   

                  Chris

                  That is a very good comment, one that has opened a debate whether to use ID's when only used for styling purposes. The contemporary trend is to use CLASS's for styling purposes and ID's when one wants to identify an element to manipulate it using scripts.

                   

                  A good example is the SpryMenuBar where menubar widgets are identified with an ID and styles are given to a CLASS as in

                  <ul id="MenuBar1" class="MenuBarHorizontal">

                    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>

                      <ul>

                        <li><a href="#">Item 1.1</a></li>

                        <li><a href="#">Item 1.2</a></li>

                        <li><a href="#">Item 1.3</a></li>

                      </ul>

                    </li>

                    <li><a href="#">Item 2</a></li>

                    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>

                      <ul>

                        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>

                          <ul>

                            <li><a href="#">Item 3.1.1</a></li>

                            <li><a href="#">Item 3.1.2</a></li>

                          </ul>

                        </li>

                        <li><a href="#">Item 3.2</a></li>

                        <li><a href="#">Item 3.3</a></li>

                      </ul>

                    </li>

                    <li><a href="#">Item 4</a></li>

                  </ul>

                   

                  <script>

                  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                  </script>

                  A second menubar will have an ID of MenuBar2 (or similar) and deviating style rules will be addressed using ul#MenuBar2.MenuBarHorizontal as the selector. Notice how #MenuBar2 is used to identify the menu list element and is not allotted a style.

                   

                  Gramps

                  • 6. Re: Need Help With Div Tags
                    Ben Pleysier MVP

                    Change

                    .article {

                        width: 30%;

                        float: left;

                        background: #FFF;

                    }

                    .three, .four {

                        margin-top: 20px;

                    }

                     

                    Gramps

                    • 7. Re: Need Help With Div Tags
                      cdeatherage Community Member

                      I'm with Gramps. Better to use classes. But I'm probably guilty of over-using IDs for styling.

                       

                      Chris

                      • 8. Re: Need Help With Div Tags
                        osgood_ MVP

                        Personally I'd try my best to steer clear of anything that the developers write at Adobe in terms of code. Usually it's overbloated and overcomplicated, a case in point is the Spry css.

                        • 9. Re: Need Help With Div Tags
                          Ben Pleysier MVP

                          Could you please supply an instance of where the CSS for the SpryMenuBar could be overbloated. I am keen to learn.

                           

                          Gramps

                          • 10. Re: Need Help With Div Tags
                            osgood_ MVP

                            Hacks and if that's not bad enough hacks for IE5????????????(who the F••K uses IE5??????

                             

                            /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                            ul.MenuBarHorizontal iframe

                            {

                                position: absolute;

                                z-index: 1010;

                                filter:alpha(opacity:0.1);

                            }

                            /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                            @media screen, projection

                            {

                                ul.MenuBarHorizontal li.MenuBarItemIE

                                {

                                    display: inline;

                                    f\loat: left;

                                    background: #FFF;

                                }

                            }

                             

                             

                            The whole css needs rewriting.

                            • 11. Re: Need Help With Div Tags
                              Ben Pleysier MVP

                              Good one!

                               

                              Perhaps it should be taken out of the CSS and be manipulated in JS as is used in PVII Pop Menu Magic 2

                              tM.p7opt=p7PMMctl[k];

                              if(typeof(opera)!='undefined'||navigator.appVersion.indexOf("MSIE 5")>-1){

                                  tM.p7opt[2]=0;

                              }

                              Bad luck if JS has been turned off.

                               

                              Gramps

                              • 12. Re: Need Help With Div Tags
                                highhokie Community Member

                                Hello Gramps,

                                 

                                Thanks again for your help.  So I applied your changes and still cant the

                                two boxes in the second row to match up the two boxes in the first row.

                                Could you take a look? Thanks

                                 

                                http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




                                body {

                                background-color: #CF3;

                                height: auto;

                                width: 960px;

                                margin-right: auto;

                                margin-left: auto;

                                }

                                 

                                #wrapper {

                                background-color: #CCC;

                                width: 960px;

                                margin-right: auto;

                                margin-left: auto;

                                height: auto;

                                }

                                #logo

                                #banner

                                #navbar {

                                background-color: #FFF;

                                height: auto;

                                width: 960px;

                                font-family: Arial, Helvetica, sans-serif;

                                font-size: 24px;

                                font-style: normal;

                                font-weight: bold;

                                text-transform: uppercase;

                                color: #F00;

                                text-align: center;

                                border-top-width: medium;

                                border-bottom-width: medium;

                                border-top-style: solid;

                                border-bottom-style: solid;

                                border-top-color: #000;

                                border-bottom-color: #000;

                                }

                                #rightside

                                 

                                 

                                .article

                                 

                                 







                                !art116/owzhu/images/PandaBanner2.jpg|height=175|width=700|src=art116/owzhu/images/PandaBa nner2.jpg!


                                !art116/owzhu/images/PandaLogo.jpg|height=175|width=260|src=art116/owzhu/images/PandaLogo. jpg!


                                home | listings | events | classifieds | FAq's |
                                about



                                Content for id "box1" Goes Here


                                insert image


                                insert image


                                insert image


                                insert image









                                 

                                 

                                 

                                 

                                 

                                </html

                                • 13. Re: Need Help With Div Tags
                                  Nancy O. MVP

                                  Is this more or less what you're trying to do?  View source to see the code.

                                  http://alt-web.com/TEMPLATES/2-col-fixed-with-floats.shtml

                                   

                                   

                                  Nancy O.

                                  Alt-Web Design & Publishing

                                  Web | Graphics | Print | Media  Specialists 

                                  http://alt-web.com/