CSS

Yanick64 · 02-03-2012, 08:47 AM

Hello,

I tryed already a long time to fix my footer, I also googeled much but didnt found anything. My footer is working perfect but there is open space under my footer what I dont want.

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head xmlns="http://www.w3.org/1999/xhtml">
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<?php
		include("php/mysqlconnect.php");
		connect();
	?>
		
	<body>
		<!-- Topbar -->
		<div id="topbar">
			<!-- Topbar Logo -->
			<div id="topbarlogo">
			</div>
			
			<!-- Topbar Header -->
			<div id="topbarheader">
				<!-- Topbar Menu -->
				<div id="topbarmenu">
						<?php
							// Menu selection from database!
							$query = "SELECT * FROM menu";
							$result = mysql_query($query) or die("Query to get blah failed with error: ".mysql_error());
							while($row = mysql_fetch_assoc($result)) {
								// Create the link
								echo '
								<div class="topbarmenu1">
									<div class="topbarmenu2">
										<a href="' . $row['link']. '.php"> ' . $row['title'] . ' </a>
									</div>
								</div>
								
								';
							}
						?>
				</div>
				
				<!-- Topbar Header Image -->
				<div id="topbarheaderimage">
				</div>
			</div>
		</div>
		
		<!-- Middlebar -->
		<div id="middlebar">
			Content Here asdasd
		</div>
		
		<!-- Bottombar -->
		<div id="bottombar"></div>
	</body>
</html>

CSS:

Code:

html, body {
	background-image: url("images/main/background-bottom.png");
	background-repeat: repeat;
	height: 100%;
}

/* ####### */
/* Top bar */
/* ####### */
div#topbar {
	position: absolute;
	top: 0px;
	left: 0px;
	
	background-image: url("images/main/bar-top.png");
	background-repeat: repeat;
	
	width: 100%;
	height: 236px;
	
	z-index: 1;
}

div#topbarmenu {
	position: absolute;
	height: 40px;

	margin-top: -53px;
	right: 0;
	z-index: -1;
}

div.topbarmenu1 {
	float: left;
	height: 27px;
	width: auto;
	
	margin-left: 5px;
	padding: 7px;
	
	background-color: #415463;
	border: 1px solid #213340;
}

div.topbarmenu2 {
	height: 25px;
	width: auto;
	
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	
	background-color: #374a59;
	
	font-family: "Verdana";
	font-size: 12px;
}

div.topbarmenu2 a {
	text-decoration: none;
	color: #ececec;
}

div.topbarmenu2:hover {
	background-color: #ececec;
}

div.topbarmenu2:hover a {
	color: #293c4c;
	text-decoration: none
}

div#topbarlogo {
	position: absolute;
	margin-top: 5px;
	margin-left: 15%;
	
	background-image: url("images/main/logo.png");
	background-repeat: repeat;
	
	width: 287px;
	height: 50px;
}

div#topbarheader {
	position: relative;
	margin-top: 118px;
	margin-left: auto;
	margin-right: auto;

	background-color: #ececec;
	width: 70%;
	height: 185px;
	padding: 10px;
	
	border: 1px solid #415463;
}

div#topbarheaderimage {
	margin-left: auto;
	margin-right: auto;
	
	background-image: url("images/main/header.png");

	width: 695px;
	height: 185px;
}

/* ########## */
/* Middle bar */
/* ########## */
div#middlebar {
	position: relative;
	min-height: 30%;
	height: auto !important;
	height: auto;
	margin: 0 auto 10px;
	
	width: 68%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 350px;
	padding: 0px;
	
	background-color: #ececec;
	border: 1px solid #415463;
}

/* ########## */
/* Bottom bar */
/* ########## */
div#bottombar {
	position: absolute;

	background-image: url("images/main/bar-bottom.png");
	background-repeat: repeat-x;
	
	left: 0;
    height: 313px;
	width: 100%;
}

Phreaddee · 02-03-2012, 12:49 PM

http://lmgtfy.com/?q=Sticky+footer

Janja · 02-03-2012, 07:12 PM

I would try adding a margin of 0 to your body tag and maybe also give the bottomdiv a property of bottom:0px;

Hope that helps, otherwise can you post a link?

Yanick64 · 02-04-2012, 08:45 AM

Sorry, I dont got a FTP host yet. Maybe you can download my website as .rar file?

http://upload.gamingrack.co.uk/files/website.rar

I hope you will.

Thanks,
Yanick

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

02-03-2012, 12:49 PM	#2
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	http://lmgtfy.com/?q=Sticky+footer __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

02-03-2012, 07:12 PM	#3
Janja Bronze Member Join Date: Jul 2011 Location: Vista, CA Posts: 65	I would try adding a margin of 0 to your body tag and maybe also give the bottomdiv a property of bottom:0px; Hope that helps, otherwise can you post a link? __________________ JANJAWATSON www.jewel-webdesign.com

02-04-2012, 08:45 AM	#4
Yanick64 New Member Join Date: Feb 2012 Posts: 2	Sorry, I dont got a FTP host yet. Maybe you can download my website as .rar file? http://upload.gamingrack.co.uk/files/website.rar I hope you will. Thanks, Yanick