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 Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    left div add to page with footer

    I'm currently running the following code on a page so that the footer is always at the bottom of the screen, regardless of how long the body text is. The current configuration works great but I need to add a div on the left side of the screen - between the head and foot - that runs the length of the body section (so that there will be a green bar from the bottom of the head to the top of the foot [since I'll give the div a green background]).

    I've tried several options, including a repeating image in the background of the body and a
    Code:
    #left
    that I tried to fit next to the body since it's only 75% but that wouldn't have a height of 100% without eliminating my footer. I can't seem to get anything to work.

    any help?

    Code:
    <html>
    <head>
    <STYLE TYPE="text/css">
    <!--
    html {margin:0; padding:0; border:0px none; height:100%}
    body {height:100%; margin:0; padding-right:10;}
    #wrap {min-height:100%; position:relative;}
    * html #wrap {height:100%;}
    #head {padding-top:95px; padding-bottom:20px;}
    #head ul {margin:0; padding:0; list-style-type:none; text-align:center;}
    #head ul li {display:inline;}
    
    #body {width:75%; float: right; padding-top:25px;}
    #foot {height:40px; position:absolute; bottom:0; left:0; width:100%; border-top: 4px solid #0f6953; text-align:right;}
    #foot p {margin:0; padding:0;}
    #clearfoot {clear:both;height:50px;}
    -->
    </STYLE>
    </head>
    
    <body>
    <div id="wrap">
    	
    <div id="head">
    header text
    </div>
    
    <div id="body">
    body text
    </div>
    
    <div id="clearfoot">&nbsp;</div>
    
    	<div id="foot">
    	footer text that is always at the bottom of the screen regardless of how long the body text is
    	</div>
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello angyl,
    You should have a look at the faux columns method of using a repeating background image. Here's a demo of mine that shows how it works - http://nopeople.com/CSS/faux_columns/index.html


    Here is a full height example that uses the faux columns - http://nopeople.com/SoC/
    The image used there is which is repeated on the y axis as the background of #wrap.
    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

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks! I actually used your http://nopeople.com/CSS/full-height-3column/index.html code and it works great.

    I am having some trouble with my CSS links and I don't understand why and I was hoping you could help.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Manage Today, Thrive Tomorrow</title>
    
    <style type="text/css">
    html, body{height: 100%; text-align: center;}
    * {margin: 0; padding: 0;}
    #wrap {width: 1000px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ text-align: left; background: url(body.jpg) repeat-y;}
    #header {width: 1000px; height: 150px; background: url(composite.jpg) no-repeat;}
    #lcol {width: 187px; float: left; padding: 5px 0 0 0; background: red;}
    #content {margin: 0 20px 0 187px; padding: 5px 0 0 0;}
    #rcol {width: 20px; float: right; padding: 5px 0 0 0; background: blue;}
    #footer, #push {width: 1000px; height: 50px; margin: 0 auto;}
    #footer {border-top: 2px solid black; background: #606060;}
    #push {clear: both; background:none;}
    
    p {margin: 5px; font: 11px Verdana; color:#000; text-align:justify}
    table, tr, td {font: 11px Verdana; color:#000}
    li {margin-top: 12px; margin-bottom: 12px; font: 8pt Verdana; color:#000; text-align:justify}
    h1 {font: 12px Verdana; color:#000}
    h2 {font: 14px Verdana; color:#000}
    
    hr {color:#000}
    input, textarea {font: 10px Verdana; color:#000; text-align:justify; border: 1px solid #000; background-color:#fff}
    
    A:link {font: bold 11px Verdana; color:#000; text-decoration:none}
    A:visited {font: bold 11px Verdana; color:#3D710D; text-decoration:none}
    A:active, a:hover {color:#000; text-decoration:underline}
    
    A.nav:link {font: bold 12px Verdana; color:#fff; text-decoration:none}
    A.nav:visited, A.nav:active, A:hover {font: 12px Verdana; color:#fff; 
    text-decoration:underline}
    
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <div id="header"></div>
    <div id="lcol">
    <p>
    <a class="nav" href="home.html">Home</a><br /><br />
    <a class="nav" href="back.html">Back</a><br /><br />
    </p>
    <!--closes lcol --></div>
    
    <div id="rcol"><!--closes rcol --></div>
    
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    <a href="index.html">   diam nonumy eirmod tempor invidunt ut labore et dolore magna</a> 
       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
       sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <!--closes content--></div>
    
    <div id="push"></div>
    
    <!--closes wrap--></div>
    
    <div id="footer"><p>some footer text here</p></div>
    
    </body>
    </html>
    Where I've used "a href" the link is black and bold, but when I hover over it, it turns white, not black and isn't underlined so something isn't right in a:active and a:hover
    Similarly, in "a class=nav href" the links are white and bold but when hovered they are still bold and not underlined. Again, something's not right with A.nav:active and A:hover.

    I tried validating my CSS and it validates fine so I don't know what's going on.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again angyl,
    Try changing this bit in your CSS (highlighted in red) -
    Code:
    a.nav:link {font: bold 12px Verdana; color:#fff; text-decoration:none}
    a.nav:visited, a.nav:active, a.nav:hover {font: 12px Verdana; color:#fff; 
    text-decoration:underline}
    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

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I knew it was something simple like that. thank you!!


  •  

    Posting Permissions

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