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

Thread: css bottom

  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Adelaide, Australia
    Posts
    472
    Thanks
    3
    Thanked 0 Times in 0 Posts

    css bottom

    hi

    can you please go to
    http://www.lynxas.com/clients/bonnetts/

    it looks as it is meant to be (at least in 1280x1024) but..
    i want the footer/copyright thing to stay at the bottom of the PAGE not the screen all the time, and the shadows (left and right) to be dependent on the content div, so the more content, the shadow keeps going? [as at the moment the shadow divs have a coded-in height....]

    can you please help me? as i am doing something worng but i dont know what?

    part of css is below, but if you go to the website it will b e more helpful

    Code:
    #border-right {
    	position:absolute;
    	top: 161px;
    	right: 137px;
    	width:22px;
    	height:600px;
    	background-image:url(images/border-right.gif);
    	background-repeat:repeat-y;
    	z-index:0;
    }
    
    #border-left {
    	position:absolute;
    	top: 161px;
    	left: 137px;
    	width:20px;
    	height:600px;
    	background-image:url(images/border-left.gif);
    	background-repeat:repeat-y;
    	z-index:0;
    	
    }
    
    #border-left-end {
    	position:absolute;
    	top: 600px;
    	left: 0px;
    	width:20px;
    	height:26px;
    	background-image:url(images/border-left-end.gif);
    	z-index:0;
    }
    
    #border-right-end {
    	position:absolute;
    	top: 600px;
    	right: 137px;
    	width:20px;
    	height:26px;
    	background-image:url(images/border-right-end.gif);
    	z-index:0;
    }
    
    #horse-tail {
    	position:absolute;
    	top: 161px;
    	left: 63px;
    	width:94px;
    	height:61px;
    	background-image:url(images/horsetail.gif);
    	z-index:8;
    	
    }
    
    #footer {
    	position:absolute;
    	bottom: -175px;
    	width:100%;
    	height:22px;
    	background-image:url(images/footerbg.gif);
    	background-repeat:repeat-x;
    	left: 0px;
    	border-top: 1px solid orange;
    	z-index:30;
    }
    
    #footer-text {
    	position:relative;
    	bottom: 3px;
    	width:420px;
    	height:22px;
    	background-color:#FFFFFF;
    	margin:0 auto;
    	z-index:31;
    	border-right: 1px solid orange;
    	border-bottom: 1px solid orange;
    	border-left: 1px solid orange;
    
    }
    
    
    #content {
    	position: absolute;
    	top: 164px;
    	margin-left: auto;
    	margin-right: auto;
    	height: auto;
    	width: 680px;
    	z-index: 10;
    	left: 148px;
    	padding-left:30px;
    	padding-right:30px;
    }

    thanks very much
    Last edited by reubenb; 11-04-2006 at 03:02 AM. Reason: adding additional info

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    body {
    text-align: center;
    background: #fff url(headfill.jpg) top left repeat-x;
    }
    #container {
    text-align: left;
    background: url(bgfill.jpg) top center repeat-y;
    height: 1000px;
    }
    #head {
    height: 313px;
    margin: 0 auto;
    background: url(headerfill.jpg) top center no-repeat;
    }
    #footer {
    height: 22px;
    border-top: 2px solid #E5BC17;
    background: #4A2D0D;
    }
    </style>	
    </head>
    <body>
    <div id="container">
    <div id="head"></div>
    </div>
    <div id="footer"></div>
    </body>
    </html>
    http://home.earthlink.net/~harbingerofthevoid/ausie


    basic layout that should workk cross browser so far.

    have fun and you can pay me later

    absolute positioning a mian thing like the footer is going to hose you over aand over done that way. simplify it a little and it gets real easy
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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