Skip navigation
highhokie
highhokie Calculating status...
Currently Being Moderated

Need Help With Div Tags

Jun 13, 2012 7:38 PM

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?

1080 Views   13 Replies   Latest reply: Nancy O., Jun 16, 2012 9:37 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 13, 2012 9:16 PM   in reply to highhokie
    Report 
    <!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

     
    |
    Mark as:
  • highhokie
    Currently Being Moderated
    2. highhokie,
    Jun 14, 2012 4:59 AM   in reply to Ben Pleysier
    Report

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

    Have a good one.

     

    Owen

     
    |
    Mark as:
  • cdeatherage
    Currently Being Moderated
    3. cdeatherage,
    Jun 14, 2012 5:30 AM   in reply to highhokie
    Report

    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

     
    |
    Mark as:
  • highhokie
    Currently Being Moderated
    4. highhokie,
    Jun 14, 2012 6:24 AM   in reply to Ben Pleysier
    Report

    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.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    Jun 14, 2012 6:25 AM   in reply to cdeatherage
    Report

    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

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    6. Ben Pleysier,
    Jun 14, 2012 6:30 AM   in reply to highhokie
    Report

    Change

    .article {

        width: 30%;

        float: left;

        background: #FFF;

    }

    .three, .four {

        margin-top: 20px;

    }

     

    Gramps

     
    |
    Mark as:
  • cdeatherage
    Currently Being Moderated
    7. cdeatherage,
    Jun 14, 2012 6:36 AM   in reply to Ben Pleysier
    Report

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

     

    Chris

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    8. osgood_,
    Jun 14, 2012 6:51 AM   in reply to cdeatherage
    Report

    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.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    9. Ben Pleysier,
    Jun 14, 2012 6:58 AM   in reply to osgood_
    Report

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

     

    Gramps

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    10. osgood_,
    Jun 14, 2012 7:51 AM   in reply to Ben Pleysier
    Report

    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.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    11. Ben Pleysier,
    Jun 14, 2012 8:19 AM   in reply to osgood_
    Report

    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

     
    |
    Mark as:
  • highhokie
    Currently Being Moderated
    12. highhokie,
    Jun 16, 2012 9:20 AM   in reply to Ben Pleysier
    Report

    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

     

     











    Content for id "box1" Goes Here


    insert image


    insert image


    insert image


    insert image









     

     

     

     

     

    </html

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    13. Nancy O.,
    Jun 16, 2012 9:37 AM   in reply to highhokie
    Report

    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/

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points