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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS. How to make the document expand..

    Hi, I'm kind of new to creating CSS and learning all of the coding and stuff.
    But I can't figure something out.
    I want the footer to be at the bottom with all of the text within the "content" and "navigation" sections to make the document expand. Right now, only information within the "content" section makes it expand. Anything I type in the "navigation" section just writes it over and past the footer, it doesn't expand.

    I'm hoping someone can help me, let me know if you need more information..
    Here's my CSS document:

    Code:
    body {
    	background: #fcf5d8;
    	font-family: Verdana, Geneva, sans-serif;
    	margin: 0px;
    	text-align: left;
    	font-size: 14px;
    	color: #c7215f;
    	line-height: 20px;
    	}
    
    h1 {
    	color: #c7215f;
    	font-size: 18px;
    	font-weight: bold;
    	margin: 0 0 0 0;
    	}
    	
    a:link, a:visited {
    	color: #587b1d;
    	text-decoration: none;
    	}
    
    a:hover, a:active {
    	color: #fcf5d8;
    	background: #db5c87;
        }
    
    #container {
    	position: relative;
    	width: 799px !important;
    	width /**/: 799px;
    	height: 100%;
    	background: #fff url(images/cascade.jpg) repeat-y;
    	border: 0px solid #fff;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left; 
        }
    
    #content {
    	margin: 0 25px 0 220px;
    	}
    
    #footer {
    	width: 799px !important;
    	width /**/: 799px;
    	height: 95px !important;
    	height /**/: 95px;
    	background: #fff url(images/footer.jpg);
    	margin-top: 20px;
    	padding: 0 0 0 0;
    	border-top: 0px solid #fff;
    	text-align: right;
    	}
    
    #navigation {
    	position: absolute;
    	top: 268px;
    	left: 7px;
    	width: 200px;
    	text-align: right;
    	font-size: 14px;
    	font-family: Verdana, Geneva, sans-serif;
    	line-height: 20px;
    	height: 688px;
    	}
    Last edited by cassi3e11a; 06-11-2009 at 06:28 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Absolutely positioned elements are placed relative to its parent element assuming it is also positioned. If not, it will be removed from the normal flow until it finds a positioned element. This is probably why that is floating over your other text/elements.

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    Do you have a URL we can look at?
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by udjamaflip View Post
    Do you have a URL we can look at?
    http://www.kissedbyabutterfly.net/sh...ng/index2.html

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    Absolutely positioned elements are placed relative to its parent element assuming it is also positioned. If not, it will be removed from the normal flow until it finds a positioned element. This is probably why that is floating over your other text/elements.
    That makes sense, but I, unfortunately don't know how to fix it >.<

  • #6
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    I am also fairly new to CSS so I mite be well off the mark and could easily stand corrected.

    Your #navigation div appears to have a fixed height of 668px so will not expand with the text as its fixed....unless im wrong?

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I fixed it using http://bonrouge.com/2c-hf-fixed.php but I'm still not sure what was wrong with it in the first place =/

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    well if the page you are working on is that which you have linked to above, it ain't fixed.

    OK, let's get started.

    put your doctype all on one line. it errors in the validator, as it is.
    remove all your absolute positioning especially from the nav div.
    put your navigation inside a list

    Code:
    <ul id='nav'>
    <li><a href=''>Home</a></li>
    <li><a href=''>Our Story</a></li>
    <li><a href=''>etc</a></li>
    </ul>
    remove height from you nav div. divs expand vertically, to hold their content. fixing height does just that which is why it won't expand vertically.

    Put the nav div above the content div. Make the nav div, float:left.

    whatever the table stuff is for, get rid. make the whole top of the page, one image and set its div to be the same height at the height if that new image.

    then come back and we'll tidy up the css for the nav list which you could use this to start with

    Code:
    ul#nav {
    width: 200px;
    text-align: right;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 20px;
    background-color:inherit;
    }
    
    ul#nav li {
    list-style-type:none;
    display:block;
    background-color:inherit;
    }
    
    ul#nav li a:link {
    color: #000;
    font-size: 1em;
    background:#fff;
    }
    
    ul#nav li a:hover {
    color: red;
    background:#ccc;
    }
    The content of your source code is in thw wrong order, currently.


    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Still working on it? I have three text files ready to send you with it done.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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