Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: DIV on Bottom of Page

  1. #1
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default DIV on Bottom of Page

    Does anyone know how to put a <div> on the very bottom of the page? (Like http://ideas.live.com/ when you sign in)

    Thanks in advance!
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  2. #2
    Join Date
    May 2006
    Posts
    255
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Do you mean something that brings you back at the top of the page when you click on it?
    "Only dead fish flow with the stream".
    - Unknown

  3. #3
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    No,

    Like some kind of bar on the bottom of the page. (Using div's not frames)

    You should see the page i was talking about! Then you'd understand what i meant
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    No javascript required. As long as you don't have other content on your page positioned absolutely in such a way as it confuses the browser as to the true height of your page, something like so will work just fine:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    <body>
    <div style="position:absolute;bottom:0;">Hi</div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Thanks!

    How about the centre of the page?
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    That's a little more complicated, this is the best primer that I've seen on that. The styling is a bit more complex than required but, it is that way to cover all possible situations:

    http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    Use your browser's view source to see the code and read the text on the page for hints as to how to adapt it to any particular content.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    **Scratches Head**

    Can't seem to get it working

    Here's the code: Maybe you should try

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<title>Dead Centre</title>
    		<style type="text/css" media="screen"><!--
    body 
    	{
    	color: white;
    	background-color: #003;
    	margin: 0px
    	}
    
    #horizon        
    	{
    	color: white;
    	background-color: transparent;
    	text-align: center;
    	position: absolute;
    	top: 50%;
    	left: 0px;
    	width: 100%;
    	height: 1px;
    	overflow: visible;
    	visibility: visible;
    	display: block
    	}
    
    #content    
    	{
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	background-color: transparent;
    	margin-left: -125px;
    	position: absolute;
    	top: -35px;
    	left: 50%;
    	width: 250px;
    	height: 70px;
    	visibility: visible
    	}
    
    .bodytext 
    	{
    	font-size: 14px
    	}
    
    .headline 
    	{
    	font-weight: bold;
    	font-size: 24px
    	}
    
    #footer 
    	{
    	font-size: 11px;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	text-align: center;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 20px;
    	visibility: visible;
    	display: block
    	}
    
    a:link, a:visited 
    	{
    	color: #06f;
    	text-decoration: none
    	}
    
    a:hover 
    	{
    	color: red;
    	text-decoration: none
    	}
    
    --></style>
    	</head>
    
    	<body>
    		<div id="horizon">
    			<div id="content">
    				<div class="bodytext">
    					This text is<br>
    					<span class="headline">DEAD CENTRE</span><br>
    					and stays there!</div>
    			</div>
    		</div>
    		<div id="footer">
    			<a href="deadcentre4.html">view construction</a></div>
    	</body>
    
    </html>
    And the second page:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<title>Dead Centre</title>
    		<style type="text/css" media="screen"><!--
    body 
    	{
    	color: white;
    	background-color: #003;
    	margin: 0px
    	}
    
    #content     
    	{
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	background-color: #f00;
    	text-align: center;
    	margin-top: -35px;
    	margin-left: -125px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	width: 250px;
    	height: 70px;
    	visibility: visible
    	}
    
    .bodytext 
    	{
    	font-size: 14px
    	}
    
    .headline 
    	{
    	font-weight: bold;
    	font-size: 24px
    	}
    
    #footer 
    	{
    	font-size: 11px;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	text-align: center;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 20px;
    	visibility: visible;
    	display: block
    	}
    
    a:link, a:visited 
    	{
    	color: #06f;
    	text-decoration: none
    	}
    
    a:hover 
    	{
    	color: red;
    	text-decoration: none
    	}
    
    .captions  
    	{
    	color: white;
    	font-size: 10px;
    	line-height: 14px;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	text-align: left
    	}
    
    #caption1     
    	{
    	padding-left: 6px;
    	border-top: 1px dashed #66c;
    	position: absolute;
    	top: 50%;
    	left: -180px;
    	width: 150px;
    	height: 120px;
    	visibility: visible;
    	display: block
    	}
    
    #caption2    
    	{
    	padding-left: 6px;
    	border-left: 1px dashed #66c;
    	position: absolute;
    	top: 92px;
    	left: 125px;
    	width: 250px;
    	height: auto;
    	visibility: visible;
    	display: block
    	}
    
    --></style>
    	</head>
    
    	<body>
    		
    			<div id="content">
    				<div class="bodytext"><div id="caption1" class="captions">&nbsp;<br>The red 'content' box is 250px wide, 70px high and is positioned absolutely 50% from the top - but it is given a negative top margin that is exactly half of its height, -35px. .</div>
    					This text is<br>
    					<span class="headline">DEAD CENTRE</span><br>
    					and stays there!
    					<div id="caption2" class="captions">To get it to centre horizontally, it is positioned 50% from the left and has a negative left margin that is exactly half of its width, -125px.</div>
    				</div>
    			</div>
    		
    		<div id="footer">
    			<a href="deadcentre1.html">
    			back</a></div>
    		
    	</body>
    
    </html>
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Why would you need two pages? Anyways, both of your examples work.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    That was what I got from the source code.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by tech_support
    That was what I got from the source code.
    I can see that, but you did manage to modify it somewhat and to successfully add your bottom content. Did you have a specific question?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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