Layout Problem bei meiner kleinen Homepage

myknoppers · 06.06.2013

Hallo,

ich erstelle momentan meine eigene kleine Website nur leider will das Layout nicht so wie ich des möchte.

HTML-Code

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fotografie Dominik Rühl</title>
<link href=".\stylesheet\style.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung. */
ul.nav a { zoom: 1; }  /* Mit der zoom-Eigenschaft erhält IE den Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum zwischen den Hyperlinks zu korrigieren. */
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="header">
    <!-- end .header --></div>
  <div class="leftsidebar">
    <!-- end .leftsidebar --></div>
  <div class="content">
	<div class="headercontent">
	<p>hay</p>
	<div class="logo">
	test
	</div>
	<div class="containernav">
		<ul class="nav">
		<li><a href="Index.html">Home</a></li>
		<li><a href=".\subsites\aboutme.html">About Me</a></li>
		<li><a href=".\subsites\kamera.html">Meine Kamera</a></li>
		<li><a href=".\subsites\fotos.html">Meine Fotos</a></li>
		</ul>
		</div>
	</div>
	test
    <!-- end .content --></div>
  <div class="rightsidebar">
    <!-- end .rightsidebar --></div>
  <div class="footer">
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Css Code

Code:

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}


ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

a:link {
	color:#414958;
	text-decoration: underline;
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 100%;
	background-color: #f5f5f5;
	margin: 0 auto;
}

.header {
	background-color: #4169E1;
	width: 100%;
	height: 80px;
}

.leftsidebar {
	float: left;
	width: 25%;
	padding-bottom: 10px;
}
.content {
	position: relative;
	padding: 10px 0;
	width: 50%;
	float: left;
}
.rightsidebar {
	float: left;
	width: 25%;
	padding: 10px 0;
}


.content ul, .content ol { 
	padding: 0 15px 15px 40px;
}

.headercontent {
	width: 100%;
	float: left;
	position: relative;
}
.containernav {
	width: 60%;
	position: relative;
}

.logo {
	width:40%;
	float: left;
	position: relative;
}

.nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; }
	  
.nav li {
      float: left; }
	  
.nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
	  
.nav li a:hover {
      color: #c00;
      background-color: #fff; }


.footer {
	height: 80px;
	padding: 10px 0;
	background-color:#4169E1;
	position: relative;
	clear: both;
}


.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

Hier ist mal ein Foto wie ich es eigentlich haben möchte.

Bitte kostenlos registrieren, damit du die Links siehst.

FlashZange · 06.06.2013

AW: Layout Problem bei meiner kleinen Homepage

.footer {
width: 100%; /*muss (zumindest für FF) definiert werden*/
height: 80px;
padding: 10px 0;
background-color:#4169E1;
position: fixed; /*bleibt immer an der gleichen Stelle auf der Seite*/
bottom: 0; /*von unten weg 0 Pixel*/
clear: both;
}

Wenn die Höhe zu klein wird, hast du natürlich nur noch footer im Bild!

deha · 06.06.2013

AW: Layout Problem bei meiner kleinen Homepage

Du musst die Klasse footer einfach nur um die roten Einträge ergänzen:

.footer {
background-color: #4169E1;
bottom: 0;
clear: both;
height: 80px;
padding: 10px 0;
position: absolute;
width: 100%;

}

FlashZange · 06.06.2013

AW: Layout Problem bei meiner kleinen Homepage

ups, ja ich glaub, ich hab das Problem falsch verstanden.
position: absolute ist natürlich das Richtige

ben3plus · 11.06.2013

AW: Layout Problem bei meiner kleinen Homepage

Es kommt noch darauf an, wie Du es genau haben möchtest.
Vielleicht ist position: absolute; doch nicht das Richtige.
Vielleicht auch position: fixed;.
Aber das darfst Du selber entscheiden:

Bitte kostenlos registrieren, damit du die Links siehst.

deha · 11.06.2013

AW: Layout Problem bei meiner kleinen Homepage

Ja, fixed oder absolute vergass ich zu erwähnen, verhalten sich von der anfänglichen Positionierung her gleich. Wobei 'position: fixed;' sogar beim scrollen an der anfänglichen Position stehen bleibt.