Jump to content

Floating elements


Diablo

Recommended Posts

I recently redesigned my site after i learned how to put elements inside elements. (elements is probably the wrong word) I created 4 zones with in the main page cell and i used float commands to make different parts appear at the top and bottom. The issue is that there is no float command for bottom. i have a site info bar at the bottom of the page and it moves up and down depending on the size of the text in the content box. How do i make the site info bar stay at the bottom of the page and stay the same size no matter what is in the size of the content box.Also the page doesn't work right in FireFox because of this problem.This is where the site info bar should be and look like.http://ultrapcgear.com/This is what happens when there is not enough in the content box.http://ultrapcgear.com/articles.html

<!--I used notpad to edit the text. still have not figured out all the end and outs of css, but i am having a lof to fun learning about it.--><html>	<head>		<meta name="author" content="Eamon O'Huallachain, admin@ultrapcgear.com">	<meta name="content-language" content="English">	<meta name="revisit-after" content="1 day">	<title>UltraPcGear.com</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<meta name="description" content="computers, help, components, examples" />		<meta name="keywords" content="Computer Components, Computer Parts, LCD Monitors, 		Video Cards, Processors and CPUs, Computer Memory, RAM, 	Laptops, Motherboards, PC Speakers, Sound cards" />		<link href="mycss.css" rel="stylesheet" type="text/css" />	</head>	<body><div id="masthead"></div><!--pagecell1--><div id="pagecell1">  <img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl" /> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr" /><div id="pageName">	<a href="http://ultrapcgear.com">	<img src="ultrabanner2.JPG" alt="Banner"> </div>	  <div id="pageNav">	<center><h2>Navigation</h2></center>		<center><a href="http://ultrapcgear.com/index.html">HOME</a>		<a href="http://ultrapcgear.com/phpbb/index.php" target="_blank">FORUM</a>		<a href="http://ultrapcgear.com/articles.html">ARTICLES</a>		<a href="http://ultrapcgear.com/reviews.html">REVIEWS</a>		<a href="http://ultrapcgear.com/cblog" target="_blank">BLOG</a>		<a href="http://ultrapcgear.com/mwiki/index.php?title=Main_Page" 		target="_blank">WIKI</a>				<a href="http://ultrapcgear.com/jobs.html">JOBS</a>		<a href="http://ultrapcgear.com/FeedBack_New.html">FEEDBACK</a>		<a href="http://ultrapcgear.com/links.html">LINKS</a>		<a href="http://ultrapcgear.com/resume.html">RESUME</a></center>	</div><div id="content">	<div class="story">	<h2>News</h2><h3>November 9th, 2006</h3>	I changed the website from a basic .css site to a more stream lined version. 	More changes are coming. I added an article and review pages where people can find help 	and info about current PC products.	<h3>November 6th, 2006</h3>			I removed the weather and the Amazon adds cause they didn't go along with the look	 and feel of the website right now. I am still looking for another moderator and someone 	 to help me flesh out the website. If you are interested in helping or know anyone that is 	 good and making websites please send them this way. You can email me at info@ultrapcgear.com	 <h3>September 12th, 2006</h3>	I added a new banner to the top of the page, data stamp and amazon add to the navigation bar, amazon adds in most of the sections, 	and a weather stamp that shows the current conditions in my home town.	<h3>September 5th, 2006</h3>		Still having too much fun playing with the CS Sheets as I design my website.		<h3>August 28th, 2006</h3>		I have added a Wiki to the website. It is a mini Wikipedia. Please feel free to add content to make it better.		<h3>August 9th, 2006</h3>		Ultra PC Gear is a site dedicated to providing information about the latest hardware and software products on the market today.  		I started this website in the hopes to provide the average user the answers to the questions they couldn't find on the Internet.  		I am currently looking for authors to write articles about new products in the market. If you have recently built a new computer  		or upgraded our existing system write an article about it and get your work published on the web. Please check out the forums.<br /><br />	</div></div><div id="siteInfo"> <img src="" width="44" height="22" /> <a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2006 UltraPcGear.com </div></div></div><!--end pagecell1--></body></html>

And the CSS

/* Generic Selectors */body {	background-color: #B0C4DE;	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 14px;	color: #000000;}h1 {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 18px;	font-weight: bold;	color: #000000;}h2 {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 16px;	font-weight: bold;	color: #000000;}h3 {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 14px;	color: #000000}/**************** Pseudo classes ****************/:link {	color: #0000FF;	text-decoration: underline;	font-weight: bold;}:visited {	color: #FF00FF;	text-decoration: underline;	font-weight: bold;}:hover {	color: rgb(0, 255, 0);	font-weight: bold;	text-decoration: underline;}:active {	color: rgb(255, 0, 102);	font-weight: bold;	text-decoration: underline;}/************************* ID's *************************//*top right bottom left*/#header {	position: absolute;	padding: 0px 0% 0px 5%;}#masthead{	position: absolute;	top: 0px;	left: 2%;	right: 2%;	width:95.6%;}#pagecell1{	position:absolute;	top: 5px;	left: 2%;	right: 2%;	width:95.6%;	height: 800px;	background-color: #FFFFFF;}#tl {	position:absolute;	top: -1px;	left: -1px;	margin: 0px;	padding: 0px;	z-index: 100;}#tr {	position:absolute;	top: -1px;	right: -1px;	margin: 0px;	padding: 0px;	z-index: 100;}#pageNav{	float: left;	width: 100%;	height: 50px;	padding: 0px 0px 0px 0px;	background-color: #F5F5F5;	border-bottom: 1px solid #cccccc;	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 20px;}/*#navigation {	position: absolute;	z-index: 10;	width: 150px;	height: 800px;	margin: 0;	margin-top: 10px;	border-right: 15px solid #778899;	font-weight: bold;}*//*#content{	padding: 0px 10px 0px 0px;	margin:0px 0px 0px 178px;	border-left: 1px solid #ccd2d2;}*/#content{	float: left; 	z-index: 100;	padding: 0px 0px 0px 0px; /*top right bottom left*/	margin:0px 0px 0px 0px;	}/*top right bottom left*//************* pageName styles ****************/#pageName{	padding: 0px 0px 0px 8%;	margin: 0px;	border-bottom:1px solid #ccd2d2;	}#pageName h2{	font: bold 175% Arial,sans-serif;	color: #000000;	margin:0px;	padding: 0px;}/*#pageName img{	position: absolute;	top: 0px;	right: 6px;	padding: 0px;	margin: 0px;*/}/************** feature styles *****************/.feature{	padding: 0px 0px 10px 10px;	font-size: 80%;	min-height: 200px;	height: 200px;}html>body .feature {height: auto;}.feature h3{	font: bold 175% Arial,sans-serif;	color: #000000;	padding: 30px 0px 5px 0px;}.feature img{	float: left;	padding: 0px 10px 0px 0px;}/*************** story styles ******************//*top right bottom left*/.story {	padding: 0px 20px 0px 20px;	}.story h3{	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 18px;	font-weight: bold;	color: #000000;		}.story p {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 12px;	color: #000000;	padding: 0px 0px 0px 0px;}.story a.capsule{		font: bold 1em Georgia, "Times New Roman", Times, serif;	color: #005FA9;	display:block;	padding-bottom: 5px;}.story a.capsule:hover{	text-decoration: underline;}td.storyLeft{	padding-right: 12px;}/************** siteInfo styles ****************//*top right bottom left*/#siteInfo{	position: fixed;	clear: both;	width: 100%;	height: 50px;		border-top: 1px solid #cccccc;	font-size: small;	color: #cccccc;	padding: 10px 10px 10px 10px;	margin-top: 0%;}#siteInfo img{	padding: 4px 4px 4px 0px;	vertical-align: middle;}/*******************end****************************/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...