3 Replies Latest reply on Mar 15, 2010 2:41 AM by fledermaus

    CSS, DIV's and editable regions

    fledermaus

      Hi all,

       

      I'm having some trouble regarding a quite simple dreamweaver template in combination with an external css file. For design purposes, it should all be done using DIV's (no tables).

       

      This is what I'm trying to obtain: page width 80%, centered:

       

      1. Header left (editable) ------------------------------- Header right

      2. Menu

      3. Content (editable)

      4. Footer

       

      It is especially important that the Content (3) can be changed WITHOUT interfering with other DIV's or anything else. Also, the Header left (1) should be editable, but that's only text or a banner or so.

       

      I really hope someone can help me out here because after hours of searching, I'm kindof seeing letters, no words anymore ;-)

       

      <!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" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Testing</title>
      <!-- TemplateEndEditable -->
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <link href="../Style/Main.css" rel="stylesheet" type="text/css" />
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      </head>
      <body class="MainCssClass">
      <div id="container">
      <div id="header">
      <div align="right"><!-- TemplateBeginEditable name="Header" --><!-- TemplateEndEditable -->Header</div>
      </div>
      <div id="Menubar">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="../index.html" title="Home" target="_self">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
      </div>
      <div id="container">
        <div align="center"><!-- TemplateBeginEditable name="MainContent" -->
          <p align="center"> </p>
          <p align="center"> </p>
          <p align="center"> </p>
          <div id="mainContent">
            <p> </p>
          </div>
          <!-- TemplateEndEditable -->
          <!-- end #mainContent -->
        </div>
      </div>
        <div id="footer">
          <p align="center">Footer</p>
      <!-- end #footer --></div>
      <!-- end #container --></div>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>
      

       

      And here's the external CSS I'm using:

       

      @charset "utf-8";
      body {
       font: 100% Verdana, Arial, Helvetica, sans-serif;
       background: #666;
       /* margin: 0; it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
       padding 0 0 0 0;
       text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
       color: #CCC;
      }
      .MainCssClass #container {
       width: 80%;  /* this will create a container 80% of the browser width */
       height: 100%;
       background: #000;
       margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
       padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
       border: 0px;
       text-align: right; /* this overrides the text-align: center on the body element. */
      }
      .MainCssClass #header 
      {
       margin: 0 0 0 0;
       background-color: #FFF;
       color:#000;
       width:100%;
      }
      .MainCssClass #mainContent {
       padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
       background: #000;
       color:#CCC;
       text-align:center;
       height:auto;
      }
      .MainCssClass #footer 
      {
       margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
       padding: 0 0 0 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
       font-size: small;
       background-color:#666;
      }
      #divLeft { 
       float:left; 
       width:50%;
      } 
      #divRight { 
       float:right; 
       width:20%;
      } 
      

       

      I've been trying and troubleshooting all afternoon but I can't seem to find what I'm doing wrong. Can anyone advise me on this? I'm afraid it's the nested DIV's I'm mixing up.

       

      All help would be really appreciated!

       

      Thanks,

       

      Mich

        • 1. Re: CSS, DIV's and editable regions
          osgood_ Level 8

          template html (css in next post)

           

          <!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" />
          <!-- TemplateBeginEditable name="doctitle" -->
          <title>Testing</title>
          <!-- TemplateEndEditable -->
          <!-- TemplateBeginEditable name="head" -->
          <!-- TemplateEndEditable -->
          <link href="../Style/Main.css" rel="stylesheet" type="text/css" />
          <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
          <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

           

          </head>
          <body class="MainCssClass">
          <div id="container">
          <div id="header">
          <div id="divHeaderRight">Header Right</div>
          <!-- TemplateBeginEditable name="headerLeft" -->
          <div id="divHeaderLeft">Header Left</div>
          <!-- TemplateEndEditable -->
          <!-- end #header -->
          </div>
          <div id="Menubar">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="../index.html" title="Home" target="_self">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
          <!-- end #Menubar -->
          </div>
          <!-- TemplateBeginEditable name="content" -->
          <div id="content">
          <p>Some content here</p>
          <p>Some content here</p>
          <p>Some content here</p>
          <p>Some content here</p>
          <p>Some content here</p>
          <!-- end #content -->
          </div>
          <!-- TemplateEndEditable -->
          <div id="footer">
          <p align="center">Footer</p>
          <!-- end #footer -->
          </div>
          <!-- end #container -->
          </div>

           

          <script type="text/javascript">
          <!--
          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
          //-->
          </script>
          </body>
          </html>

          • 2. Re: CSS, DIV's and editable regions
            osgood_ Level 8


            css:

             

            body {
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            background: #666;
            /* margin: 0; it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
            padding 0 0 0 0;
            text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
            color: #CCC;
            }
            .MainCssClass #container {
            width: 80%;  /* this will create a container 80% of the browser width */
            background: #000;
            margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
            padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
            border: 0px;
            text-align: left; /* this overrides the text-align: center on the body element. */
            overflow: hidden; /* wraps container around floated elements inside of it */
            }
            .MainCssClass #header
            {
            background-color: #0F3;
            color:#000;
            overflow: hidden;
            }
            #divHeaderLeft {
            float:left;
            width:50%;
            }
            #divHeaderRight {
            float:right;
            width:20%;
            }
            .MainCssClass #content {
            padding: 10px 10px 10px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
            background: #000;
            color:#CCC;
            text-align:center;

            }
            .MainCssClass #footer
            {
            margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
            padding: 0 0 0 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
            font-size: small;
            background-color:#666;
            }

            • 3. Re: CSS, DIV's and editable regions
              fledermaus Level 1

              tnx for the answer, it helped a lot!

               

              Also, the clear:both; in a css can do a lot ! ;-)