Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Footer Problem In CSS Layout

    Hi everyone, I'm new to CSS and decided to create my first website as a test of what I could accomplish. Spent hours working on it and things look okay except for the footer. It doesn't reach all the way down to the page or main wrapper.

    I eliminated the footer and when I did this, the main wrapper background disappeared. I had to use overflow:hidden to make it come back. Then I re-added the footer and it still isn't positioned properly. I haven't uploaded this to the Internet since it is a test site.

    Here's the html code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link href="style2.css" rel="stylesheet" type="text/css"><title>Website</title>
    
    <script type="text/javascript">
        <!--
        (function() {
            var IE = /*@cc_on!@*/false;
            if (!IE) { return; }
            if (document.compatMode && document.compatMode ==  'BackCompat') {
                if (document.getElementById("af-form-972339418")) {
                    document.getElementById("af-form- 972339418").className = 'af-form af-quirksMode';
                }
                if (document.getElementById("af-body-972339418")) {
                    document.getElementById("af-body- 972339418").className = "af-body inline af-quirksMode";
                }
                if (document.getElementById("af-header-972339418"))  {
                    document.getElementById("af-header- 972339418").className = "af-header af-quirksMode";
                }
                if (document.getElementById("af-footer-972339418"))  {
                    document.getElementById("af-footer- 972339418").className = "af-footer af-quirksMode";
                }
            }
        })();
        -->
    </script>
    </head><body>
    <div class="main_wrapper">
    <div class="header"></div>
    <div class="body_wrapper">
    <h1>This is Dummy Text</h1>
    
    
    <p>Morbi magna tellus, lacinia nec adipiscing auctor, hendrerit  at dui. Donec sit amet bibendum leo. Etiam 
    
    venenatis nulla in  leo faucibus malesuada. Integer a ipsum ultrices purus  fringilla laoreet nec in odio. Etiam 
    
    adipiscing sagittis  tellus, ut dictum elit suscipit et. Donec nec arcu justo, vitae  tempus erat. Suspendisse eros 
    
    orci, faucibus nec eleifend eget,  tristique quis lacus. Lorem ipsum dolor sit amet, consectetur  adipiscing elit. 
    
    In in est augue, sed venenatis dui. Sed non  ante eu magna faucibus dictum. Proin vehicula sodales  auctor.</p>
    
    <span class='st_sharethis_hcount'  displayText='ShareThis'></span>
    <span class='st_facebook_hcount' displayText='Facebook'></span>
    <span class='st_twitter_hcount' displayText='Tweet'></span>
    <span class='st_googleplus_hcount' displayText='Google  +'></span>
    <span class='st_email_hcount' displayText='Email'></span>
    <script type="text/javascript">var switchTo5x=false;</script>
    <script type="text/javascript"  src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher:  "ur-96405ef1-4971-e0f0-8a3f-22a2fe88546"});</script>
    
    <hr>
    <div class="autoresponder_box">
    <div><img  src="autoresponderimgbnnr.png"></div>
    <div class="autoresponder_two"><form method="post" class="af-form- wrapper" 
    
    action="http://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="972339418"  />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="foss2" />
    <input type="hidden" name="redirect"  value="http://www.aweber.com/thankyou-coi.htm?m=text"  
    
    id="redirect_42c7c1c44d8730b591d16da6bc75a8a8" />
    
    <input type="hidden" name="meta_adtracking"  value="eSurveyProfits" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="email" />
    
    <input type="hidden" name="meta_tooltip" value="" />
    </div>
    <div id="af-form-972339418" class="af-form"><div id="af-body- 972339418"  class="af-body af-standards">
    <div class="af-element">
    <label class="previewLabel" for="awf_field-40540462">Enter Your   Email: </label>
    <div class="af-textWrap"><input class="text" id="awf_field- 40540462" type="text" name="email" value="" 
    
    tabindex="500"  />
    </div><div class="af-clear"></div>
    </div>
    <div class="af-element buttonContainer">
    <input name="submit" id="af-submit-image-972339418"  type="image" class="image" style="background: none;"  
    
    alt="Submit Form"  src="http://www.aweber.com/images/forms/minimal/white/button.png" tabindex="501" />
    <div class="af-clear"></div>
    </div>
    <div class="af-element privacyPolicy" style="text-align:  center"><p>We respect your <a title="Privacy Policy"  
    
    href="http://www.aweber.com/permission.htm"  target="_blank">email privacy</a></p>
    <div class="af-clear"></div>
    </div>
    </div>
    </div>
    <div style="display: none;"><img  src="http://forms.aweber.com/form/displays.htm?id=nOxMzMycLIwc"  alt="" /></div>
    </form></div>
    </div>
    <div class="body_footer_navigation"><a href="#">Return Home</a>  | <a href="#">Return
    to the Top</a></div>
    </div>
    <div class="sidebar_main_wrapper">
    
    <div class="left_sidebar">
    <div class="main_navigation">
    <h2 class="headbar">Navigation</h2>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Getting Started</a></li>
    <li><a href="#">Free Paid Survey Directory</a></li>
    <li><a href="#">Paid Survey Reviews</a></li>
    <li><a href="#">Paid Survey Articles</a></li>
    <li><a href="#">Focus Groups</a></li>
    <li><a href="#">Get Paid To</a></li>
    <li><a href="#">FAQs</a></li>
    </ul>
    <h2 class="headbar">Survey Panel of the Month</h2>
    <center><a href="http://www.mb01.com/lnk.asp? o=3348&c=43374&a=54741"><IMG SRC="http://www.mb01.com/getimage.asp?
    
    m=2414&o=3348&i=43374.dat" width=160 height=600  border=0></a></center>
    </div>
    </div>
    </div>
    <div class="footer">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Disclaimers</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Sitemap</a></li>
    </ul>
    <p>This is our text in the footer</p>
    </div>
    
    </div>
    
    
    </body></html>
    Here's the CSS code:
    Code:
    body {
    background-color : #51abff;
    font-family : Arial, Tahoma, verdana;
    font-size : 16px;
    }
    .main_wrapper {
    margin : auto;
    width : 900px;
    background-color: #fff;
    clear : both;
    overflow: hidden;
    }
    .header {
    background-image : url(Images/esurvey.png);
    background-repeat : no-repeat;
    background-position : top center;
    height : 90px;
    }
    .body_wrapper {
    width : 580px;
    float : right;
    padding-right : 20px;
    }
    .autoresponder_box {
    float : left;
    width : 600px;
    }
    .autoresponder_box img {
    float : left;
    width : 400px;
    }
    .autoresponder_two {
    float : right;
    width : 200px;
    margin-top : 25px;
    }
    .body_footer_navigation {
    width : 600px;
    text-align : center;
    padding : 5px;
    margin : auto;
    }
    
    .sidebar_main_wrapper {
    width : 300px;
    float : left;
    margin : 0;
    }
    .left_sidebar {
    width : 275px;
    margin : 10px;
    }
    .headbar {
    font : bold 14px Verdana;
    color : white;
    background : url(Images/titlebar.png) center left repeat-x 
    
    black;
    margin-bottom : 10px;
    padding : 4px 0 4px 10px;
    }
    .main_navigation {
    width : 260px;
    }
    .main_navigation ul {
    list-style-type : none;
    margin : 0;
    padding : 0;
    margin-bottom : 8px;
    }
    .main_navigation ul li {
    padding-bottom : 2px;
    }
    .main_navigation ul li a {
    color : #4189cc;
    background : url(Images/arrowbullet.png) center left no-repeat;
    display : block;
    padding : 2px 0;
    padding-left : 19px;
    text-decoration : none;
    font-weight : bold;
    border-bottom : 1px solid #dadada;
    font-size : 95%;
    }
    .main_navigation ul li a:visited {
    color : #00743a;
    }
    .main_navigation ul li a:hover {
    color : #00743a;
    background-color : #f3f3f3;
    }
    .footer {
    clear: both;
    background-color:#065306;
    text-align:center;
    
    }
    
    .footer ul {
    list-style: none;
    }
    
    .footer ul li {
    display: inline;
    text-decoration: none;
    padding-top: 8px;
    margin: 5px;
    }
    
    .footer ul li a {
    text-decoration: none;
    color: white;
    }
    
    #af-form-972339418 .af-body .af-textWrap {
    width : 98%;
    display : block;
    float : none;
    }
    #af-form-972339418 .af-body .privacyPolicy {
    color : #000000;
    font-family : Trebuchet MS, sans-serif;
    }
    #af-form-972339418 .af-body a {
    color : #9e9b9b;
    font-style : normal;
    font-weight : normal;
    }
    #af-form-972339418 .af-body input.text, #af-form-972339418 
    
    .af-body textarea {
    background-color : #f0f0f0;
    border-color : #dbdbdb;
    border-style : solid;
    color : #000000;
    text-decoration : none;
    font-weight : normal;
    font-size : 14px;
    font-family : Trebuchet MS, sans-serif;
    }
    #af-form-972339418 .af-body input.text:focus, #af-form-
    
    972339418 .af-body textarea:focus {
    background-color : #ebebeb;
    border-color : #c4c4c4;
    border-style : solid;
    }
    #af-form-972339418 .af-body label.previewLabel {
    display : block;
    float : none;
    text-align : left;
    width : auto;
    color : #000000;
    font-style : normal;
    font-weight : normal;
    font-family : Trebuchet MS, sans-serif;
    }
    #af-form-972339418 .af-body {
    padding-bottom : 7px;
    background-repeat : repeat-y;
    background-position : center left;
    background-image : none;
    color : #000000;
    font-size : 11px;
    }
    #af-form-972339418 .af-quirksMode {
    padding-right : 15px;
    padding-left : 15px;
    }
    #af-form-972339418 .af-standards .af-element {
    padding-right : 15px;
    }
    #af-form-972339418 .buttonContainer {
    text-align : center;
    }
    #af-form-972339418 button, #af-form-972339418 input, #af-form-
    
    972339418 submit, #af-form-972339418 textarea, #af-form-
    
    972339418 select, #af-form-972339418 optgroup, #af-form-
    
    972339418 option {
    float : none;
    position : static;
    margin : 0;
    }
    #af-form-972339418 div {
    margin : 0;
    }
    #af-form-972339418 form, #af-form-972339418 textarea, .af-form- 
    
    wrapper, .af-form-close-button, #af-form-972339418 img {
    float : none;
    color : inherit;
    position : static;
    border : none;
    margin : 0;
    padding : 0;
    }
    #af-form-972339418 input, #af-form-972339418 button, #af-form-
    
    972339418 textarea, #af-form-972339418 select {
    font-size : 100%;
    }
    #af-form-972339418 select, #af-form-972339418 label, #af-form-
    
    972339418 optgroup, #af-form-972339418 option {
    padding : 0;
    }
    #af-form-972339418, #af-form-972339418 .quirksMode {
    width : 185px;
    }
    #af-form-972339418.af-quirksMode {
    overflow-x : hidden;
    }
    #af-form-972339418 {
    background-color : #ffffff;
    border-color : #e3e3e3;
    border-style : none;
    }
    #af-form-972339418 {
    display : block;
    }
    #af-form-972339418 {
    overflow : hidden;
    }
    .af-body .af-textWrap {
    text-align : left;
    }
    .af-body input.image {
    border : none !important ;
    }
    .af-body input.submit, .af-body input.image, .af-form .af-
    
    element input.button {
    float : none !important ;
    }
    .af-body input.text {
    width : 100%;
    float : none;
    padding : 2px !important ;
    }
    .af-body.af-standards input.submit {
    padding : 4px 12px;
    }
    .af-clear {
    clear : both;
    }
    .af-element label {
    text-align : left;
    display : block;
    float : left;
    }
    .af-element {
    padding : 5px 0;
    }
    .af-form-wrapper {
    text-indent : 0;
    }
    .af-form {
    text-align : left;
    margin : auto;
    }
    .af-quirksMode .af-element {
    padding-left : 0 !important ;
    padding-right : 0 !important ;
    }
    .lbl-right .af-element label {
    text-align : right;
    }

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    It is your <p></p> tags.

    Either remove them, or add this to your CSS.

    Code:
    p {
    margin-bottom: 0px;
    }

  • Users who have thanked stevenmw for this post:

    omb2012 (10-06-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you. That fixed the problem. Do I still need to use the overlay:hidden for the body wrapper since I fixed the p tag? Also, do I need to set margin bottom on future p tags to 0? Trying to understand why that would mess up the layout.

    Also, I want to add 3 boxes within the main content. I'm thinking it would be easier to use tables since I want a header, middle content, and link in each box. If you know a source that will explain how to do this in css, that would be great.

    Lastly, do my codes look alright from what you see? Sorry is I'm asking too many questions.

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Yes, use overflow:hidden.

    Placing

    Code:
    p {
    margin-bottom: 0px;
    }
    in your CSS effects all <p></p> tags.

    Wherever you call <p> </p> it will have a margin-bottom. You can add other elements to the CSS

    Code:
    p {
    margin-bottom: 0px;
    font-family: verdana;
    font-size: 1em;
    }
    If you want a special <p> then you could always create a special <p> for a certain div.

    Say you have a div named blue and you want every <p> </p> tag to act a certain way inside the blue div. You could use this

    Code:
    blue p {
    font-size: 12px;
    }
    http://www.ozzu.com/html-tutorials/t...rt-t85704.html

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Do a Google search on "CSS Reset". It's purpose is to reset all browser built in style sheets so your layout works how you want it to.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •