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 15 of 15

Thread: Footer issues

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Footer issues

    I have been working on the footer for my webpage and no matter what I do it will not sit right.
    Code:
    <div class="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
    ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean 
    vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p></div></div>
    
     
    <div id="footer"><p>Copyright © 2010</p></div>
    </div></div>
    </div>
    </body>
    </html>
    I want the footer to just sit underneath the 'text' box.

    Css
    Code:
    .textbox {
    	background: #33CC33; 
    	border-left: 1px solid #DF8FA9;
    	border-right: 1px solid #DF8FA9;
    	color: #000000;
    	margin-left: 8px;
    	padding-left: 20px;
    	padding-right: 10px;
    	padding-top: 20px;
    	width: 90%;
    	padding-bottom: 10px;
    }
    .text {background: #fff;
    	width: 80%;
    	padding: 5%;
    	margin: 5%;
    }
    
    #footer 
    {
    height:40px;
    background:#ccc;
    bottom:0;
    left:0;
    width:90%;
    text-align: right;
    font-weight: bold;
    }
    the webpages are puddypaws.co.uk/test,html and style.css. Please do not say they are not semantic I know that I am just trying to get the pages done. Also I am now working with percentages and would appreciate a resource if anyone knows a good one, I need to get the others away from pixels and into p[ercentages.
    Last edited by quartzy; 11-13-2010 at 01:44 AM.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Have you tried putting them into separate paragraph tags rather than one? From the appearance, it seems you have improper tag order. If your paragraph tags starts on the inside of a div, it needs to end inside a div.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    It looks like your div structuring is not right. Well I'm not sure if your structure is right. We're you intending to close container so early?
    Code:
    <body>
    <div id="container">
      <div id="header">
        <div id="navigation">Content for  id "navigation" Goes Here</div>
      </div>
      <div id="mainContent"> </div>
      <div id="footer">Content for  id "footer" Goes Here</div>
    </div>
    </body>

  • Users who have thanked teedoff for this post:

    quartzy (11-13-2010)

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Thank you for coming behind me, Teed and picking up what I cannot see while I'm at work.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Chris Hick View Post
    Thank you for coming behind me, Teed and picking up what I cannot see while I'm at work.
    haha you supposed to be on the net while working??....lol

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    *Gazes around*

    Umm lets say.. yeah ^_^ but no I'm not hehe
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    Could not understand why chris posted his first post. But see that maybe I have my divs in misorder.

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    Yes, that got it in order, though now I have no background color, still too late now to change off to bed.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You have no background color because you have not cleared your floats.... but why are you floating those elements??? A full width element should not be floated, we float thing to put other things beside them and a full width element has no room beside it.

    You can almost always clear floats like this:
    Code:
    #container {
    	/*height: auto;*/
    	background: #f00;
    	text-align: left;
    	margin: 0 auto;
    	padding: 0;
    	width: 65%;
    	position: relative;
    overflow: auto;
    }
    Read a bit how overflow: auto; clears floats.

    Still, no reason to float those elements.
    Last edited by Excavator; 11-13-2010 at 04:22 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    He originally had his container div closed to early. I think thats why he had a float on it. Now that he's wrapped everything else in the container div, he needs to rework some of his style rules.

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re:

    I read the link you gave but did not understand it.
    When I applied the overflow:auto; my webpage had a side scroll bar and another scroll bar and that is not want I want to do. If I change it to overflow: hidden, the footer is not shown at all.
    Last edited by quartzy; 11-13-2010 at 03:19 PM.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    I read the link you gave but did not understand it.
    When I applied the overflow:auto; my webpage had a side scroll bar and another scroll bar and that is not want I want to do. If I change it to overflow: hidden, the footer is not shown at all.
    Most times, when you get an unwanted scrollbar from trying to clear floats with overflow: auto;, your box model is off somewhere.
    Did you post a link to the test site? I looked but didn't see it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    I added some clear div's after the floated items. And still my footer is not sitting right. And I also made sure that my divs were in the right places. thanks for your help
    I posted the link:

    puddypaws.co.uk/test.html

    The box model I am worried about as I am trying to keep everything in percentages and do not know how the box model would work with that.
    Last edited by quartzy; 11-13-2010 at 05:05 PM.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You seem to want #footer to line up with .textbox inside of #right?
    You have #right at 99.9% width (not sure the .9 works across browsers) and floated, then you margin .textbox over a bit.
    #footer is not margined over to line up with .textbox.

    Try like this instead:
    Code:
    #right {/*float:left;*/ width:99.9%;}
    #footer {
    height:40px;
    width:90%;
    margin: 0 0 0 8px;
    background:#CCC;
    text-align: right;
    font-weight: bold;
    overflow: hidden;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    That did not work, so I moved a div ending and changed the right to 95% then changed the padding on the textbox and it works. Who knows why! just relieved


  •  

    Posting Permissions

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