Also ich habe nun via <div> und CSS ein Layoutbasic erstellt so wie ich es ungefähr haben will.
Nun stoße ich auf ein problem das ich irgendwie nicht lösen kann.
Und zwar habe ich einen festen Header Background per CSS festgelegt.
Möchte darüber zwei Buttons setzten, einmal FB und einmal Twitter. Jeweils Links unten, Rechts unten ausgerichtet an der festen größe des headers (280px) (man sieht die grüne fläche)
Jedesmal wenn ich es versuche mit bottom:0px; auszurichten, tut sich garnichts.
Es bleibt dauerhaft links oben in der ecke kleben.
Website: Aktueller Code
[Only registered and activated users can see links. Click Here To Register...]
Hier mein Code:
CSS
Code:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #000;
}
a img {
border: none;
}
.container {
width: 100%;
max-width: 1260px;
min-width: 780px;
background-color: #000000;
margin: 0 auto;
}
.header {
background-color: #F0A;
margin-bottom: 5px;
width: 100%;
height: 280px;
background-image:url(Bilder/Header.png)
}
.sidebar1 {
float: left;
width: 25%;
background-color: #93A5C4;
margin-right: 5px;
background-color:#0A0;
background-image:url(Bilder/Daniel-Neu-Perfekt_18.png)
}
.topbar {
background-color: #FFF;
widht: 20%;
margin-bottom: 5px;
}
ul.nav {
list-style:none
}
.content {
padding: 10px 0;
width: 48.8%;
float: left;
margin-bottom: 5px;
margin-right: 5px;
background-color:#0F0;
background-image:url(Bilder/Daniel-Neu-Perfekt_16.png)
}
.sidebar2 {
float: right;
width: 25%;
background-color: #93A5C4;
background-color:#0A0;
background-image:url(Bilder/Daniel-Neu-Perfekt_18.png)
}
.footer {
background-color: #0FF;
position: relative;
clear: both;
background-image: url(Bilder/Daniel-Neu-Perfekt_28.png);
font-size: 9px;
}
HTML
Code:
<!DOCTYPE html PUBLIC "
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daniel Basic</title>
<link href="HTML5_thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">LEERFLÄCHE</div>
<div class="topbar"><div>
<img src="Bilder/Daniel-Neu-Perfekt_09.png" /><img src="Bilder/Daniel-Neu-Perfekt_10.png" /><img src="Bilder/Daniel-Neu-Perfekt_11.png" /><img src="Bilder/Daniel-Neu-Perfekt_12.png" /><img src="Bilder/Daniel-Neu-Perfekt_13.png" />
<div></div></div><div></div><div></div><div></div></div>
<div class="sidebar1">
<div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
<ul class="nav">
<li><a href="#">Hyperlink 1</a></li>
</ul>
<div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
<ul class="nav">
<li><a href="#">Hyperlink 1</a></li>
</ul>
</div>
<div class="content">
<p>CONTENT</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>test</p>
<p>test</p>
</div>
<div class="sidebar2">
<div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
<ul class="nav">
<li><a href="#">Hyperlink 1</a></li>
</ul>
<div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
<ul class="nav">
<li><a href="#">Hyperlink 1</a></li>
</ul>
</div>
<div class="footer"></div>
</div>
</body>
</html>