2 Replies Latest reply on May 16, 2010 5:22 PM by kimziiiiii

    Gaps between header and main body

    kimziiiiii

      Hi im new to this forum and also new to creating websites so please dont bite my head off if im asking silly questions

       

      I have opened up dreamweaver and selected html and selected the layout that I want which is 1 column fixed center, header and footer and there seems to be a gap between the main body and the header and footer. the margins are set to 0. What seems to be the problem? someone please help

        • 1. Re: Gaps between header and main body
          Ben M Adobe Community Professional

          Well first off welcome.

           

          If you are looking for help though with this type of question we will need to see your code to help you out.  Whether you post a link to the page online or whether you post the HTML and CSS code here.  Either way we will need something to work with to help you out.  Unfortunately, web design is not like Page Design where you can just drag and drop and expect things to just print there.  Web development will require a little bit of coding knowledge.  A good place to start is the W3Schools website ( http://www.w3schools.com/ ).  They have very good HTML and CSS tutorials there to go over.

           

          So post back and we can go from there.

          • 2. Re: Gaps between header and main body
            kimziiiiii Level 1

            Thank you for being so kind and welcoming here is my html and css codes

             

             

            <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="Transmedia/oneColFixCtrHdr.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="oneColFixCtrHdr">
            
            <div id="container">
              <div id="header">
            <ul id="MenuBar1" class="MenuBarHorizontal">
              
                <li><a href="Transmedia/index.html">Home</a>      </li>
                <li><a href="Transmedia/menu.html">Menu</a></li>
                <li><a href="Transmedia/contactus.html">Contact Us</a>      </li>
            </ul>
              <!-- end #header --></div>
              <div id="mainContent"><h1>ain Contet</h1>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. raesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, moles8ie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Su5pendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.
                <h2>H2 level heading</h2>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
             <br /><br />
              <!-- end #mainContent --></div>
              <div id="footer">
                <p>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>
            
             
            

             

             

            @charset "utf-8";
            
            
            
                 body {
                 font: 76% Verdana, Arial, Helvetica, sans-serif;
                 background: #666666;
                 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                 padding: 20;
                 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: #000000;
            }
            .oneColFixCtrHdr #container {
                 font: 1em;
                 width: 950px; /* the auto margins (in conjunction with a width) center the page */
                 border: 2px none #000000;
                 text-align: left; /* this overrides the text-align: center on the body element. */
                 background-image: none;
                 background-repeat: repeat-x;
                 margin-top: 0;
                 margin-right: auto;
                 margin-bottom: 0;
                 margin-left: auto;
            }
            .oneColFixCtrHdr #header {
                 background-image: none;
                 height: 50px;
                 padding-top: 0;
                 padding-right: 10px;
                 padding-bottom: 0;
                 padding-left: 20px;
                 background-color: #000;
            }
            .oneColFixCtrHdr #header h1 {
                 margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
                 padding: 10px 0px 0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
                 background-color: #000;
            }
            .oneColFixCtrHdr #mainContent
                                          {
                 background-image: none;
                 border-top-style: none;
                 border-right-style: none;
                 border-bottom-style: none;
                 border-left-style: none;
                 margin: 0px;
                 padding-top: 0px;
                 padding-right: 30px;
                 padding-bottom: 0; 
                 padding-left: 20px;
                 width: 900px;
                 background-color: #CCC;
            }
            .oneColFixCtrHdr #footer {
                 background-image: none;
                 height: 40px;
                 padding-top: 0;
                 padding-right: 10px;
                 padding-bottom: 0;
                 padding-left: 0px;
                 background-color: #CCC;
            }
            .oneColFixCtrHdr #footer p {
                 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; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
                 background-image: none;
                 background-color: #CCC;
            }