+ Post New Thread
Results 1 to 9 of 9
Web Development Thread, CSS - PITA in Coding and Web Development; Can anybody help me? First I'll give my code and then explain what i want to acieve. PHP HTML Code: ...
  1. #1

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241

    CSS - PITA

    Can anybody help me? First I'll give my code and then explain what i want to acieve.

    PHP

    HTML Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/main-style.css" />
    </head>
    <body><div id="wrapper">
        <div id="leftnavigation"><p>Navi here</p></div>
        <div id="contentarea">
            <div id="header"><h1>Banner goes here</h1></div>
            <p>Content here</p>
        </div>
        
    </div></body>
    </html>
    CSS

    Code:
    body{
        background-color:#000000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    #wrapper{
        margin:0px auto;
        width:754px;
        height:97%;
        padding:7px;
        background-color:#FFFFFF;
    }
    
    #leftnavigation{
        height:100%;
        background-color:#FFCC33;
        width:144px;
        margin-right:17px;
        float:left;
        text-align:center;
        padding-left:3px;
        padding-right:3px;
    }
    
    #contentarea{
        float:left;
        width:587px;
        height:100%;
    }
    Right - I want the page to expand as needed when more content is displayed, but I want the left navigation to expand with it.

    How easy is this? Tried other forums and things but couldn't get my head around the answers.

    Any help appreciated thanks,

  2. #2
    stratisphere's Avatar
    Join Date
    Apr 2007
    Posts
    295
    Thank Post
    33
    Thanked 87 Times in 31 Posts
    Rep Power
    30
    Put the content div inside the navigation div. Then give the content div a left (or right) margin of the navigation's width.

    If you want some code, lemme know.

  3. #3

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Please - just has a play and can't it it right. Any code would be great!

  4. #4
    stratisphere's Avatar
    Join Date
    Apr 2007
    Posts
    295
    Thank Post
    33
    Thanked 87 Times in 31 Posts
    Rep Power
    30
    Think this is what ya want...
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
        <div id="navigation">
    	<p>links...</p>
          <ul>
            <li>oink1</li>
            <li>oink2</li>
            <li>doink1</li>
            <li>doink2</li>
          </ul>
    	  </div>
        <div id="content">  
    	<h1>this is a content bit...</h1>
    	<p>did you know that? I wonder if this works... yes it does!</p>
    	<p>dfg</p>
    	<p>df</p>
    	<p>f</p>
    	<p>dfs</p>
    	<p>dfsg</p>
    	<p>dfsg</p>
    	<p>&nbsp;</p>
    </div>
    </div>
    </body>
    </html>
    style.css
    Code:
    #content {
    	border: 1px solid #000000;
    	margin-left: 150px;
    	height: 100%;
    }
    #navigation {
    	width: 150px;
    	border: 1px solid #FF0000;
    	height: 100%;
    	float: left;
    }
    #wrapper {
    	height: 97%;
    	border: 1px solid #0000FF;
    }
    body {
    	height: 100%;
    }

  5. Thanks to stratisphere from:

    Hightower (28th November 2008)

  6. #5

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Brilliant - thanks!

    Just gotta figure how to get the footer to stay on the bottom now!

  7. #6

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,400
    Thank Post
    636
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    319
    For the footer, try clear:both;.

  8. #7
    stratisphere's Avatar
    Join Date
    Apr 2007
    Posts
    295
    Thank Post
    33
    Thanked 87 Times in 31 Posts
    Rep Power
    30
    was just going to suggest that. To make it stay on the very footer, put it outside the wrapper and do bottom: 0px; in the css. For that to have effect you will have to set the Position one aswell, options are: relative, absolute & static, each give slightly different looks so have an experiment with it.

  9. Thanks to stratisphere from:

    Hightower (28th November 2008)

  10. #8

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Quote Originally Posted by webman View Post
    For the footer, try clear:both;.
    I want the footer to remain in the content div though - so the left menu goes all the way down still and the footer starts to the right of it at the bottom of the page.

  11. #9

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Got it working - thanks!

SHARE:
+ Post New Thread

Similar Threads

  1. CSS Hacks
    By danIT in forum Web Development
    Replies: 3
    Last Post: 2nd October 2008, 05:44 PM
  2. XHTML + CSS Help
    By My220x in forum Coding
    Replies: 8
    Last Post: 25th September 2008, 07:08 PM
  3. CSS Styles
    By crazy in forum EduGeek Joomla 1.0 Package
    Replies: 3
    Last Post: 12th March 2008, 06:54 AM
  4. CSS gurus!
    By nickje in forum Web Development
    Replies: 2
    Last Post: 12th June 2007, 11:42 AM
  5. File ownership pita!
    By SpuffMonkey in forum Windows
    Replies: 13
    Last Post: 2nd November 2005, 12:23 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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