7 Replies Latest reply on Jul 16, 2008 11:49 PM by Newsgroup_User

    contents and footer

    nailair
      I have done a web site at http://www.smallbizwebdesign.com.au and for some reason the contents and footer don't separate. The page in Dreamweaver on my desktop shows the sections all separate, but on the web the 2 sections join. What am I doing wrong?

      Vicki
      My CSS sheet -

      @charset "UTF-8";
      #wrapper {
      font-family: Georgia, "Times New Roman", Times, serif;
      margin: 0auto;
      padding: 0px;
      width: 800px;
      color: #CCCCCC;
      }
      #header {
      font-family: Georgia, "Times New Roman", Times, serif;
      margin: 0px;
      padding: 0px;
      float: left;
      height: 195px;
      width: 800px;
      color: #FFFFFF;
      }
      #navbar {
      font-family: Georgia, "Times New Roman", Times, serif;
      height: 29px;
      width: 800px;
      top: 240px;
      margin: 0px;
      padding: 0px;
      }
      #content {
      font-family: Georgia, "Times New Roman", Times, serif;
      width: 800px;
      float: left;
      top: 300px;
      background-color: #FFFFFF;
      color: #000000;
      }
      #footer {
      font-family: Georgia, "Times New Roman", Times, serif;
      float: left;
      width: 800px;
      height: auto;
      top: 600px;
      background-color: #FFFFFF;
      }
      .clear{
      clearboth;
      height:0
      font-size:1px;
      line-height:0px;
      }
        • 1. Re: contents and footer
          Level 7
          Hummm....I don't like to mention this but if you're offering a web
          design service you should really know how to code first. Sadly I don't
          see how you are going to be successful without this basic requirement.

          Theres a lot wrong with the css.

          For instance you only use top: 300px; in association with absolutely
          positioned (layer <divs>) plus there is no need to float the 'content'
          <div> at all.

          Remove the float: left; from the 'content' css and the space between the
          content and footer <divs> will probably return.


          #content {
          font-family: Georgia, "Times New Roman", Times, serif;
          width: 800px;
          float: left;
          top: 300px;
          background-color: #FFFFFF;
          color: #000000;
          }


          I fear that this won't help you much but good luck.



          nailair wrote:
          > I have done a web site at http://www.smallbizwebdesign.com.au and for some
          > reason the contents and footer don't separate. The page in Dreamweaver on my
          > desktop shows the sections all separate, but on the web the 2 sections join.
          > What am I doing wrong?
          >
          > Vicki
          > My CSS sheet -
          >
          > @charset "UTF-8";
          > #wrapper {
          > font-family: Georgia, "Times New Roman", Times, serif;
          > margin: 0auto;
          > padding: 0px;
          > width: 800px;
          > color: #CCCCCC;
          > }
          > #header {
          > font-family: Georgia, "Times New Roman", Times, serif;
          > margin: 0px;
          > padding: 0px;
          > float: left;
          > height: 195px;
          > width: 800px;
          > color: #FFFFFF;
          > }
          > #navbar {
          > font-family: Georgia, "Times New Roman", Times, serif;
          > height: 29px;
          > width: 800px;
          > top: 240px;
          > margin: 0px;
          > padding: 0px;
          > }
          > #content {
          > font-family: Georgia, "Times New Roman", Times, serif;
          > width: 800px;
          > float: left;
          > top: 300px;
          > background-color: #FFFFFF;
          > color: #000000;
          > }
          > #footer {
          > font-family: Georgia, "Times New Roman", Times, serif;
          > float: left;
          > width: 800px;
          > height: auto;
          > top: 600px;
          > background-color: #FFFFFF;
          > }
          > .clear{
          > clearboth;
          > height:0
          > font-size:1px;
          > line-height:0px;
          > }
          >
          >
          • 2. Re: contents and footer
            Level 7
            Below is your code and css all cleaned up. Look how much simpler it is.

            You don't have to keep declaring the font style once you have declared
            it on the body tag.

            You don't have to specify the width of a container IF it stretches the
            whole width of its parent container.

            You don't have to keep adding: <div align="center" id="navbar"> plus you
            should only use an 'id' once on your page. 'classes' can be used
            multiple times.

            You don't have to 'float' a container UNLESS you want it to go beside
            another container.

            You don't need to specify a top: XXXpx; position of a container UNLESS
            you're using layers or you wish to push a static <div> away from a
            preceeding container, in which case you'd use margin-top: XXpx;

            I hope the code below translates well to the webforum. If not I suggest
            you join the Dreamweaver newsgroup forum.



            <!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" />
            <title>Smallbiz Web Design for businesses in Australia</title>

            <style type="text/css">
            h2 {
            font-size: 36px;
            font-style: italic;
            font-weight: bold;
            color: #FF6600;
            margin: 0;
            padding: 30px 0 0 0;
            }
            body {
            background-color: #CCCCCC;
            font-family: Georgia, "Times New Roman", Times, serif;
            text-align: center;

            }
            #wrapper {
            margin: 0 auto;
            width: 800px;
            color: #CCCCCC;
            }
            #header {
            height: 195px;
            color: #FFFFFF;
            }

            #content {
            margin: 0 0 10px 0;
            padding: 0 0 30px 0;
            background-color: #FFFFFF;
            color: #000000;
            }
            #footer {
            background-color: #fff;

            }

            </style>
            </head>

            <body>
            <div id="wrapper">
            <div id="header"><img src="images/sbheader2.jpg" alt="smallbiz logo"
            width="800" height="195" border="0" /></div><!-- end header -->
            <div id="navbar">
            <img src="images/buttons/butAbout.jpg" alt="about" width="133"
            height="29" />
            <img src="images/buttons/butFAQ.jpg" alt="contact" width="133"
            height="29" />
            <img src="images/buttons/butContact.jpg" alt="contact" width="133"
            height="29" />
            </div><!-- end navbar -->
            <div id="content">
            <h2>Hello and welcome to our site....</h2>
            <h3>we are in the process of building our site, but ...</h3>
            <p>Our aim to to help build web sites for small business in Australia.<p>
            <p>To give you the ability to show your clients and any perspective
            clients what you and your business is all about.
            Whether it is to show what services or products you offer, your location
            and contact information
            without spending more than you can afford.</p>
            </div><!-- end content -->
            <div id="footer"><a href="mailto:info@smallbizwebdesign.com.au">email
            me</a></div>
            </div><!-- end wrapper -->
            </body>

            </html>















            nailair wrote:
            > I have done a web site at http://www.smallbizwebdesign.com.au and for some
            > reason the contents and footer don't separate. The page in Dreamweaver on my
            > desktop shows the sections all separate, but on the web the 2 sections join.
            > What am I doing wrong?
            >
            > Vicki
            > My CSS sheet -
            >
            > @charset "UTF-8";
            > #wrapper {
            > font-family: Georgia, "Times New Roman", Times, serif;
            > margin: 0auto;
            > padding: 0px;
            > width: 800px;
            > color: #CCCCCC;
            > }
            > #header {
            > font-family: Georgia, "Times New Roman", Times, serif;
            > margin: 0px;
            > padding: 0px;
            > float: left;
            > height: 195px;
            > width: 800px;
            > color: #FFFFFF;
            > }
            > #navbar {
            > font-family: Georgia, "Times New Roman", Times, serif;
            > height: 29px;
            > width: 800px;
            > top: 240px;
            > margin: 0px;
            > padding: 0px;
            > }
            > #content {
            > font-family: Georgia, "Times New Roman", Times, serif;
            > width: 800px;
            > float: left;
            > top: 300px;
            > background-color: #FFFFFF;
            > color: #000000;
            > }
            > #footer {
            > font-family: Georgia, "Times New Roman", Times, serif;
            > float: left;
            > width: 800px;
            > height: auto;
            > top: 600px;
            > background-color: #FFFFFF;
            > }
            > .clear{
            > clearboth;
            > height:0
            > font-size:1px;
            > line-height:0px;
            > }
            >
            >
            • 3. Re: contents and footer
              Level 7
              > You don't need to specify a top: XXXpx; position of a container UNLESS
              > you're using layers or you wish to push a static <div> away from a
              > preceeding container, in which case you'd use margin-top: XXpx;

              The top/left/right/bottom styles only work on absolute/relative positioned
              elements.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "Osgood" <notavailable@thisaddress.com> wrote in message
              news:g5ksgc$ja6$1@forums.macromedia.com...
              > Below is your code and css all cleaned up. Look how much simpler it is.
              >
              > You don't have to keep declaring the font style once you have declared it
              > on the body tag.
              >
              > You don't have to specify the width of a container IF it stretches the
              > whole width of its parent container.
              >
              > You don't have to keep adding: <div align="center" id="navbar"> plus you
              > should only use an 'id' once on your page. 'classes' can be used multiple
              > times.
              >
              > You don't have to 'float' a container UNLESS you want it to go beside
              > another container.
              >
              > You don't need to specify a top: XXXpx; position of a container UNLESS
              > you're using layers or you wish to push a static <div> away from a
              > preceeding container, in which case you'd use margin-top: XXpx;
              >
              > I hope the code below translates well to the webforum. If not I suggest
              > you join the Dreamweaver newsgroup forum.
              >
              >
              >
              > <!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" />
              > <title>Smallbiz Web Design for businesses in Australia</title>
              >
              > <style type="text/css">
              > h2 {
              > font-size: 36px;
              > font-style: italic;
              > font-weight: bold;
              > color: #FF6600;
              > margin: 0;
              > padding: 30px 0 0 0;
              > }
              > body {
              > background-color: #CCCCCC;
              > font-family: Georgia, "Times New Roman", Times, serif;
              > text-align: center;
              >
              > }
              > #wrapper {
              > margin: 0 auto;
              > width: 800px;
              > color: #CCCCCC;
              > }
              > #header {
              > height: 195px;
              > color: #FFFFFF;
              > }
              >
              > #content {
              > margin: 0 0 10px 0;
              > padding: 0 0 30px 0;
              > background-color: #FFFFFF;
              > color: #000000;
              > }
              > #footer {
              > background-color: #fff;
              >
              > }
              >
              > </style>
              > </head>
              >
              > <body>
              > <div id="wrapper">
              > <div id="header"><img src="images/sbheader2.jpg" alt="smallbiz logo"
              > width="800" height="195" border="0" /></div><!-- end header -->
              > <div id="navbar">
              > <img src="images/buttons/butAbout.jpg" alt="about" width="133" height="29"
              > />
              > <img src="images/buttons/butFAQ.jpg" alt="contact" width="133" height="29"
              > />
              > <img src="images/buttons/butContact.jpg" alt="contact" width="133"
              > height="29" />
              > </div><!-- end navbar -->
              > <div id="content">
              > <h2>Hello and welcome to our site....</h2>
              > <h3>we are in the process of building our site, but ...</h3>
              > <p>Our aim to to help build web sites for small business in Australia.<p>
              > <p>To give you the ability to show your clients and any perspective
              > clients what you and your business is all about.
              > Whether it is to show what services or products you offer, your location
              > and contact information
              > without spending more than you can afford.</p>
              > </div><!-- end content -->
              > <div id="footer"><a href="mailto:info@smallbizwebdesign.com.au">email
              > me</a></div>
              > </div><!-- end wrapper -->
              > </body>
              >
              > </html>
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              >
              > nailair wrote:
              >> I have done a web site at http://www.smallbizwebdesign.com.au and for
              >> some reason the contents and footer don't separate. The page in
              >> Dreamweaver on my desktop shows the sections all separate, but on the web
              >> the 2 sections join. What am I doing wrong?
              >>
              >> Vicki
              >> My CSS sheet -
              >>
              >> @charset "UTF-8";
              >> #wrapper {
              >> font-family: Georgia, "Times New Roman", Times, serif;
              >> margin: 0auto;
              >> padding: 0px;
              >> width: 800px;
              >> color: #CCCCCC;
              >> }
              >> #header {
              >> font-family: Georgia, "Times New Roman", Times, serif;
              >> margin: 0px;
              >> padding: 0px;
              >> float: left;
              >> height: 195px;
              >> width: 800px;
              >> color: #FFFFFF;
              >> }
              >> #navbar {
              >> font-family: Georgia, "Times New Roman", Times, serif;
              >> height: 29px;
              >> width: 800px;
              >> top: 240px;
              >> margin: 0px;
              >> padding: 0px;
              >> }
              >> #content {
              >> font-family: Georgia, "Times New Roman", Times, serif;
              >> width: 800px;
              >> float: left;
              >> top: 300px;
              >> background-color: #FFFFFF;
              >> color: #000000;
              >> }
              >> #footer {
              >> font-family: Georgia, "Times New Roman", Times, serif;
              >> float: left;
              >> width: 800px;
              >> height: auto;
              >> top: 600px;
              >> background-color: #FFFFFF;
              >> }
              >> .clear{
              >> clearboth;
              >> height:0
              >> font-size:1px;
              >> line-height:0px;
              >> }
              >>
              • 4. Re: contents and footer
                Level 7
                Murray *ACE* wrote:
                >> You don't need to specify a top: XXXpx; position of a container UNLESS
                >> you're using layers or you wish to push a static <div> away from a
                >> preceeding container, in which case you'd use margin-top: XXpx;
                >
                > The top/left/right/bottom styles only work on absolute/relative
                > positioned elements.
                >

                Yeah, thats what I say innit?
                • 5. Re: contents and footer
                  Level 7
                  No. You even implied that it would work on a static element.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "Osgood" <notavailable@thisaddress.com> wrote in message
                  news:g5l192$o9k$1@forums.macromedia.com...
                  > Murray *ACE* wrote:
                  >>> You don't need to specify a top: XXXpx; position of a container UNLESS
                  >>> you're using layers or you wish to push a static <div> away from a
                  >>> preceeding container, in which case you'd use margin-top: XXpx;
                  >>
                  >> The top/left/right/bottom styles only work on absolute/relative
                  >> positioned elements.
                  >>
                  >
                  > Yeah, thats what I say innit?

                  • 6. Re: contents and footer
                    Level 7
                    Murray *ACE* wrote:
                    > No. You even implied that it would work on a static element.
                    >
                    What!

                    I think you're up to you're old tricks again.....interpreting thing ***-
                    about-face.

                    Read again. It clearly says to only specify a top position when using
                    layers (absolutely positioned elements) and I said to use a margin-top
                    on a static <div> (read the WHOLE sentence, not just some of it and make
                    the rest up in your own mind) :)


                    • 7. Re: contents and footer
                      Level 7
                      Osgood wrote:
                      > Murray *ACE* wrote:
                      >> No. You even implied that it would work on a static element.
                      >>
                      > What!
                      >
                      > I think you're up to you're old tricks again.....interpreting thing ***-
                      > about-face.
                      >
                      > Read again. It clearly says to only specify a top position when using
                      > layers (absolutely positioned elements) and I said to use a margin-top
                      > on a static <div> (read the WHOLE sentence, not just some of it and make
                      > the rest up in your own mind) :)
                      >
                      >
                      What..no apology for implying I said something I didn't. Really Murray
                      you're losing it.