Skip navigation
highhokie
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?

 
Replies
  • Currently Being Moderated
    Jun 13, 2012 9:16 PM   in reply to highhokie
    <!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:
  • Currently Being Moderated
    Jun 14, 2012 5:30 AM   in reply to highhokie

    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:
  • Currently Being Moderated
    Jun 14, 2012 6:25 AM   in reply to cdeatherage

    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:
  • Currently Being Moderated
    Jun 14, 2012 6:30 AM   in reply to highhokie

    Change

    .article {

        width: 30%;

        float: left;

        background: #FFF;

    }

    .three, .four {

        margin-top: 20px;

    }

     

    Gramps

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

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

     

    Chris

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

    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:
  • Currently Being Moderated
    Jun 14, 2012 6:58 AM   in reply to osgood_

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

     

    Gramps

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

    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:
  • Currently Being Moderated
    Jun 14, 2012 8:19 AM   in reply to osgood_

    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:
  • Currently Being Moderated
    Jun 16, 2012 9:37 AM   in reply to highhokie

    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:

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