Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    I just added a center wrapper, now the pages with minium content the footer has a large gap. Not sure how to fix it , I have spent days trying to get it to work, I have read css sticker footer but don't get how to apply it to my site, It looks like ryanfiat method is already in the css and worked until I centered it. I dont even know if I centered it correctly it was on an old test page I had. I took out any code trying to fix it so you could see what was originally there.

    This page works: http://www.cohmlaw.com/indexcentered.html
    This page doesnt: http://www.cohmlaw.com/profiles/hs_consultant_ectestold.html

    I am obviously missing something and hoping someone can help me get it.
    Thanks!
    Q

  2.  

  3. #2
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    Remove this from your wrapper in your CSS style sheet. That should fix the problem.

    min-height:100%;

    Ken

  4. #3
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Ken,

    Thank you! I was beginning to think I was never going to get help! lol! I took out what you said and it definitely looks better and would have never have thought to take it out. But it still doesn't make the footer stick to the bottom of the browser with minimal content. What else could I be missing? and thank you soooooo much for taking your time to help me!

    Q

  5. #4
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    You were missing some CSS stuff but the main thing was your Footer div was still inside the wrapper. Try the suggestions below and let me know if they fix it. Make sure to save a copy of your files before you override them.

    This would be your new CSS style sheet (csscohm2testcenter.css)

    HTML Code:
    /*html, body, ul, li, input, form, h4, form {
               margin: 0;
               padding: 0;
        }*/
    
       * {
        margin: 0;
        padding: 0;
    }
    
        html, body, #wrapper{
               height: 100%;
        }
    
        body {
              font: 11px Tahoma, Geneva, sans-serif;
               color: #757575;
                 }
           /* ----------------- centered wrapper ----------------------- */
        #wrapper{
                background: White;
                    height:auto;
                    min-height:100%;
            margin:0px auto -35px;
             width:800px;
            border-style:solid;
                    border-width:1px;
            
        }
    
        #main {
            padding-bottom:22px;
            }    
      /* ----------------- end of centered ----------------------- */
                 
        /* ----------------- common elements ----------------------- */
         p{
             text-align: justify;
         }
    
        img {
               border: 0;
        }
    
        #header h1 {
               display: none;
        }
    
        h2 {
              background: #fff url(../i/h2-line.jpg) no-repeat 0 -3px;
               color: #757575;
               font-size: 11px;
               height: 20px;
               padding-left: 15px;
        }
    
        h3 {
              color: #82A950;
               font-size: 12px;
        }
    
        h4 {
               color: #757575;
               font-size: 11px;
        }
    
        a {
               color: #7F410F;
        }
    
        .line {
               border-bottom: 1px solid #ccc;
               line-height: 0;
               width: 90%;
        }
    
      /* ----------------- main separations ----------------------- */
        #header {
               background: url(../i/header-bg.jpg) repeat-x 0 100px;
               height: 314px;
               margin-bottom: 10px;
               color: #757575;
               font-size: 12px;
        }
    
        #header #header-wrap {
               width: 750px;
        }
    
        #wrap, #content-wrap {
               width: 715px;
               padding: 0 0 10px 35px;
               overflow: auto;
        }
    
        #content-wrap {
               background: #fff url(../i/content-bg.jpg) repeat-y 0 0;
        }
    
        #content {
              float: left;
               width: 485px;
               padding-right: 15px;
                font-size: 12px;
    }
    
        #sidebar {
               float: right;
               width: 200px;
            font-size: 11px;
        }
    
        #footer {
               background: url(../i/footer-bg.jpg) repeat-x 0 0;
               padding-top: 13px;
               color: #fff;
               font-size: 10px;
        position:relative;
            clear:both;
            margin-top:-22px;
            margin-left:auto;
            margin-right:auto;
            height:22px;
            width:800px;
        }
    
        /* ----------------- header: styles --------------------------- */
    
        #navigation {
               height: 24px;
               background-color: #5a5a5a;
               border-bottom: 1px solid #fff;
        }
    
        #navigation ul {
               list-style: none;
        }
    
        #navigation ul li {
               float: left;
               white-space: nowrap;
        }
    
        #navigation ul li a {
               display: block;
               float: left;
               border-right: 1px solid #fff;
               padding: 3px 22px 0;
               color: #fff;
               text-decoration: none;
               height: 21px;
               font-size: 12px;
        }
    
        #navigation ul li a:hover {
               background-color: #999;
        }
    
        #header .headerpic {
               border-right: 1px solid #fff;
               height: 214px;
               width: 220px;
               float: left;
        }
    
        #top-block {
               float: right;
               width: 529px;
               text-align: right;
        }
    
        .top-block-left {
               float: left;
               width: 280px;
                text-align: left;
               padding: 15px 0 0 20px;
               color: #fff;
        }
    
        .top-block-left ul {
               list-style: none;
               margin: 10px 0 0 0;
               padding: 0;
        }
    
        .top-block-left ul li {
               margin: 5px 0;
               padding: 0 0 0 13px;
               background: #9cb675 url(../i/buttons-bullets/bullet-orange.jpg) no-repeat 0 4px;
        }
    
        .top-block-left a {
               font-weight: bold;
        }
    
        .top-block-right {
               float: right;
               width: 185px;
               height: 126px;
               color: #fff;
               padding: 30px 20px 0;
               text-align: center;
               font-weight: bold;
        }
    
        .top-block-right p {
               margin: 0;
               padding: 0;
                padding-top: 10px;
                font-size: 11px;
        }
    
        .top-block-right address {
               font-style: normal;
               text-align: center;
        }
    
        /* ----------------- content: styles--------------------------- */
        #wrap ul, #content-wrap ul {
              list-style: none;
               margin: 10px 0 0 0;
               padding: 0;
        }
    
        #wrap ul li, #content-wrap ul li {
               margin: 5px 0;
               padding: 0 0 0 20px;
               background: #fff url(../i/buttons-bullets/bullet-green.jpg) no-repeat 0 2px;
        }
            
        #wrap table, #content-wrap table {
            width: 100%;
            border-collapse: separate;
            margin-bottom: 10px;
        }
            
        table td {
            padding: 2px 2px 10px;
        }
         
             
     /* ----------------- image: styles --------------------------- */
        img.floatleft { 
        float: left; 
        margin: 4px; 
        }
         img.floatright { 
        float: right; 
        margin: 4px; 
       }
         /* ----------------- end image: styles --------------------------- */
         
         
        /* ----------------- footer: styles --------------------------- */
          
         #footer p {
              margin: 0 0 0 10px;
               padding: 0;
               float: left;
        }
    
        #footer p.copy {
               margin: 0 0 0 10px;
        }
                
        #footer ul {
               list-style: none;
               display: inline;
        }
    
        #footer ul li {
               float: left;
               white-space: nowrap;
        }
    
        #footer ul li a {
               float: left;
               border-right: 1px solid #fff;
               padding: 0 5px;
               font-weight: normal;
        }
    
        #footer ul li a.first {
               border-left: 1px solid #fff;
               margin-left: 10px;
        }
    
    .clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
    
    
    
    
    
    
    This would be your new HTML. Replace all of the content between your this tag <body> and this tag </body>
    
    
    <div id="wrapper">
    <div id="main" class="clearfix">
    <!-- header -->
    <div id="header">
        <img src="../i/logo.jpg" alt="Colleran, O'Hara &amp; Mills" height="73" width="750">
        <h1>Colleran, O'Hara &amp; Mills - A full Serice Law Firm Specializing in Labor Law</h1>
        <div id="navigation">
            <ul>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="../about_us.html">About Us</a></li>
                    <li><a href="../areas_of_practice.html">Areas of Practice</a></li>
                    <li><a href="../profiles.html">Attorney Profiles</a></li>
                    <li><a href="../news.html">News</a></li>
                    <li><a href="../resources2.html">Resources</a></li>
                    <li><a href="../contact.html">Contact Us</a></li>
            </ul>
        </div>
        <div id="header-wrap">
            <img src="../i/profile_pic/clock.jpg" alt="" class="headerpic" height="215" width="220">
            <div id="top-block">
            <div style="padding: 10px; text-align: right;">
                <!-- Google CSE Search Box Begins  -->
     <form action="http://www.google.com/cse" id="searchbox_017951731933203588137:lpwy8upkdsc">
     <p style="text-align: right;"><input name="cx" value="017951731933203588137:lpwy8upkdsc" type="hidden">
      <input style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url([URL="http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif"]http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif[/URL]) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" name="q" size="25" type="text">
      <input name="sa" value="Search" type="submit"></p>
    </form>
    <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_017951731933203588137%3Alpwy8upkdsc&amp;lang=en"></script>
    </div><!-- Google CSE Search Box Ends -->
                <div class="top-block-left">
                <strong>EDWARD J. CLEARY</strong><br>
                 <p>Position: Health and Safety Consultant<br>
              Telephone: 516-248-5757<br>
              Fax: 516-742-1765<br>
              E-Mail:</p><br>
                </div>
                <div class="top-block-right" style="background-image: url(../i/header-pic/block.jpg);">
                            <address>Colleran, O'Hara &amp; Mills L.L.P.<br>
                        1225 Franklin Ave, Suite 450<br>
                        Garden City, NY 11530<br>
                        Phone: 516-248-5757<br>
                        Fax: 516-742-1765</address>
                
                </div>
            </div>
        </div>
    </div>
    <!-- END OF header -->
    
    <div id="content-wrap">
    <!-- content -->
    <div id="content">
        <h2>EDWARD J. CLEARY - Health and Safety Consultant</h2>
        <p>Mr. Cleary is the former President of the New York State AFL-CIO, former President of
         the New York City and New York State Building and Construction Trades Councils and former
         President of the I.B.E.W. Local 3. His long experience in the field of labor relations well 
         qualifies him for consultation on matters involving health and safety and allied areas.</p><br>
        </div>
    <!-- END OF content -->
    
    <!-- sidebar -->
    <div id="sidebar">
        <h2>Practice Areas</h2>
                     <p></p><br>                  
       <h2>Education</h2>
                     <p></p><br>
       <h2>Court Admissions</h2>
                    <p></p><br>
       <h2>Bar Admissions</h2>
                      <p></p><br>
       <h2>Memberships</h2>           
                       <p></p>
         </div>
    </div>
    </div>
    <!-- END OF sidebar -->
    
    
    <!-- footer -->
    </div>
    <div id="footer">
        <p>Colleran,O'Hara &amp;Mills L.L.P @ 2007.</p>
        <ul>
            <li><a href="../index.html" class="first">Home</a></li>
            <li><a href="../about_us.html">About Us</a></li>
            <li><a href="../areas_of_practice.html">Areas of Practice</a></li>
            <li><a href="../profiles.html">Attorney Profiles</a></li>
            <li><a href="../news.html">News</a></li>
            <li><a href="../resources2.html">Resources</a></li>
            <li><a href="../contact.html">Contact Us</a></li>
            <li><a href="../disclaimer.html">Disclaimer</a></li>
        </ul>
        <p class="copy">Last Updated Jan, 2008</p>
    </div>
    
    <!--END OF footer -->




    Ken Stout

  6. #5
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Ken,

    Thank you so much! that is exactly what I was trying to achieve(with no luck til you!)
    I will study the css and html so hopefully I get what you did in the future.
    but... for now... I know how to change the link to the new style sheet with your css for all the other pages, but what should I do on all the other pages with the new html? How do I apply that to them?

    this is the new page with the new css and html.
    http://www.cohmlaw.com/profiles/hs_c...nt_ectest.html

    Thank you again for helping me I would not have figured this one out on my own!
    Sue

  7. #6
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    Hello,

    I'm glad it worked for you. I will give you some more insight when I get home from work today.

    Ken

  8. #7
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Ken,

    I don't know where your post went that I received earlier today about helping with the other pages, it seems to have vanished.
    the link to the live current site is www.cohmlaw.com. if you want to take a look @ it. I appreciate your help very much!

    Thanks,
    Sue

  9. #8
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    These fixes take place in your HTML
    Below <div id=”wrapper”>
    Add <div id=”main” class=”clearfix”>
    Delete: <div class=”push”></div>
    Above <!--footer-->
    Add
    </div>
    </div>
    Delete the </div> tag just before the </body> tag


    These fixes take place in your CSS file
    Replace:
    html, body {
    height: 100%;
    }
    With:
    html, body, #wrapper{
    height: 100%;
    }

    Add this below the wrapper:
    #main {
    padding-bottom:22px;
    }

    Add this to your #footer:
    position:relative;
    clear:both;
    margin-top:-22px;
    margin-left:auto;
    margin-right:auto;
    height:22px;
    width:800px;

    Add this to the end:
    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    That should do it for you. If all of your pages use the same CSS stylesheet, then you just have to fix it then save it and you are finished with that part. Then fix the HTML portion for each page and you are set.

  10. #9
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Ken,

    Thanks! I will work on that later today and post back and let you know how I make out. can't thank you enough!

    Sue

  11. #10
    Member suz4x4's Avatar
    Join Date
    Mar 2007
    Location
    Long Island, NY
    Posts
    78
    Member #
    14978
    Ken,

    I finished all the pages and it worked like a charm! Thank you Thank you!
    and after fixing all the pages I think I now get how that works. I think. LOL!

    here's the finished pages www.cohmlaw.com

    Thank you so much!
    Sue


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com