layout, fusszeile bleibt nicht unten

Status
Nicht offen für weitere Antworten.

Prijv

Mitglied
Ich habe das problem dass sich bei meinem neuen layout, die fusszeile nach der mittleren, der Content-Spalte, richtet.

Also wenn ich nur ganz wenig Inhalt habe, rutscht die Fusszeile nach oben, und überdeckt die Navigation.

Beispiel:
falsch:
http://www.netstreet.ch/tutorials/index.php?&handler=cat&cat=46
richtig:
http://www.netstreet.ch/tutorials/index.php?handler=content&location=126

Wie kann ich sagen, dass eine Box immer unter diese Drei boxen (Nav, Inhalt, Headlines) rutscht ?

Hier noch der Code:
Code:
<style>
body {
	padding: 0px;
	margin: 0px;
	}
#top-section {
	background-color: #FF6600;
	position:relative;
	left:0;
	top:0;
	}
#mid-section {
	position:relative;
	left:0;
	top:0;
	}
#bottom-section {
	background-color: red;
	position:relative;
	left:0;
	top:0;
	}
#top-col-1 {
	height: 100px;
	background-color: #FF6600;
	position:relative;
	padding-left:20%;
	padding-right:10px;
	width: 70%;
	margin-bottom: 2px;
	border-color: #FF6600;
	border-bottom: 1px solid;
	}
#top-col-2 {
	height: 100px;
	background-color: #FF6600;
	position:absolute;
	border-color: #FF6600;
	border-left: 1px solid;
	border-bottom: 1px solid;
	margin-bottom: 1px;
	padding-left: 5px;
	top: 0;
	right: 0;
	width: 30%;
	}
#mid-col-1 {
	background-color: #ABBEC2;
	position:absolute;
	top:0;
	left:0;
	width:25%;
	}
#mid-col-2 {
	background-color: #dddddd;
	position:relative;
	top:0;
	left:25%;
	width:50%;
	border-color: #ffffff;
	border-right: 1px solid;
	border-left: 1px solid;
	margin-right: 2px;
	}
#mid-col-4 {
	background-color: #ABBEC2;
	position:absolute;
	top:0;
	right: 0;
	width:25%;
	}
#bottom-col-1 {
	background-color: #FF6600;
	position:relative;
	padding-left:20%;
	padding-right:10px;
	height: 40px;
	border-color: #ffffff;
	border-top: 2px solid;
	clear: top;
	}
#box
{
  border:2px solid;
  border-color: #FF6600;
  margin: 4px;
  padding: 2px;
}
#contentbox
{
  border:2px solid;
  border-color: #FF6600;
  margin: 4px;
  padding: 2px;
}
#titlebox
{
  border:2px solid;
  border-color: #FF6600;
  margin: 4px;
  padding: 2px;
  padding-top: 2px;
  margin-top: 4px;
  background-color: #eeeeee;
  font-color: #FF6600;
}

</style>
</head>
<body>
	<div id="top-section">
		<div id="top-col-1">
			<?php
			// Modul Position head
			module_conf("head",$modules);
			echo $mod_position;
			// Modul Position head Ende
			?>
		</div>
		<div id="top-col-2">
			logoplatz
		</div>
	</div>
	<div id="mid-section">
		<div id="mid-col-1">
			<div id="titlebox">nav<br></div>
				<?PHP
				include('menu.php');
				// Modul Position FOOT
				module_conf("menu",$modules);
				echo $mod_position;
				// Modul Position FOOT Ende
				?>
				<div id="box">
				<?php
				// Modul Position NEWSLETTER
				module_conf ("newsletter", $modules);
				echo $mod_position;
				// Modul Position NEWSLETTER Ende
				?>
			</div>
		</div>
		<div id="mid-col-2">
			<?php
			include('engine.php');
			// Modul Position HEAD
			module_conf("center",$modules);
			echo $mod_position;
			// Modul Position HEAD Ende
			?>		
		</div>
		<div id="mid-col-4">
			<div id="titlebox">Headlines</div>
				<?php
				include('headlines.php');
				// ModuL Position Headlines
				?>
				<div id="box">
					<?php
					module_conf ("headlines", $modules);
					echo $mod_position;
					// Modul Position Headlines Ende
				?>
			</div
		</div>
	</div>
	<div id="bottom-section">
		<div id="bottom-col-1">
			fusszeile hier - - copyright hier - - alles hier ;D<br>
		</div>
	</div>
</body>

wenn jemand einen Lösungsansatz, oder eine CSS option welche dies lösen könnte, weiss, wäre ich froh über eine Antwort.

Merci, Gruässli Prijv.
 
Du musst hier nicht den ganzen Code posten.

Mach es ungefär so:

Lass das bottom-col-1 komplett weg:
PHP:
body {
  [...]
  margin-bottom: 15px;
}

.bottom-section {
  background-color: red;
  position: absolute;
  bottom: 1px;
}

[...]

<div class="bottom-section">
fusszeile hier - - copyright hier - - alles hier ;D
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück