nicht angemeldet
Footer unten
Hallo!
Ich bin gerade dabei, ein Css-Template meinen Wünschen anzupassen. Aus diesem Grund habe ich aus zwei drei Spalten gemacht. Nun habe ich das Problem, dass der Footer sich nicht am Ende der Seite, sprich unter dem Mainbar (variable Länge) befindet, sondern unter den Sidebars aufteilt... :(
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CreamBurn</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo"></div>
<div class="clr"></div>
<div class="htext">
<h2>Animalia.</h2>
<p>Hier kommen die wechselnden Bilder hin!</p>
</div>
<div class="clr"></div>
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html">Startseite</a></li>
<li><a href="support.html">Animalia</a></li>
<li><a href="about.html">Aktionen</a></li>
<li><a href="blog.html">Tierschutz</a></li>
<li><a href="contact.html">Sonstiges</a></li>
</ul>
<div class="searchform">
<form id="formsearch" name="formsearch" method="post" action="#">
<span>
<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Suchbegriff" type="text" />
</span>
<input name="button_search" src="images/search_btn.gif" class="button_search" type="image" />
</form>
</div>
<div class="clr"></div>
</div>
</div>
<div class="content">
<div class="leftbar">
<div class="gadget">
<h2>Kontakt</h2>
Lustiges Kontaktdingens mit Logo!
</div>
<div class="gadget">
<h2>Aktuell</h2>
Vielleicht auch einen Kalender?
</div>
</div>
<div class="mainbar">
<h2>Bla</h2>
<i>"Tiere sind die unschuldigen Opfer einer Weltanschauung, die behauptet, manche Leben seien wertvoller als andere, die Mächtigen hätten das Recht, die Machtlosen auszubeuten, und die Schwachen müssten
zum Wohle des größeren Ganzen geopfert werden." - Steven Simmons</i><br><br>
Wusstest du, dass jährlich etwa 4 Millionen Rinder und 56 Millionen Schweine geschlachtet werden?<br>
Wusstest du, dass jährlich etwa 50.000 Galgos in Spanien aufgehängt werden?<br>
Wusstest du, dass Delphine in Aquazoos Selbstmord begehen?<br><br>
Auf dieser Website wollen wir auf die Notwendigkeit des Tierschutzes im Allgemeinen und die Aktionen unserer Gruppe im Besonderen eingehen, denn die Tiere können sich nicht wehren;
es sind die Menschen, die ihre Stimme sein müssen. Wir haben beschlossen diese Stimme zu sein, unsere Augen vor diesen Missständen nicht länger zu verschließen und uns für
die Rechte der Tiere einzusetzen, denn Mitleid ist nicht genug!<br><br>
Dein Team von<br>
Animalia
</div>
<div class="rightbar">
<div class="gadget">
<h2>Kontakt</h2>
Lustiges Kontaktdingens mit Logo!
</div>
<div class="gadget">
<h2>Aktuell</h2>
Vielleicht auch einen Kalender?
</div>
</div>
<div class="footer">
<p class="lf">© Copyright <a href="#">Animalia</a>.</p>
<p class="rf">Layout by Rocket <a href="http://www.rocketwebsitetemplates.com/">Website Templates</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
color:#959595;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
background:#f5f1e6 url(images/main_bg.gif) repeat-y center center;
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}
.logo {
padding:12px 0 0 40px;
float:left;
width:auto;
}
h1 {
margin:0;
padding:16px 0;
color:#3a3b3b;
font:bold 36px/1.2em Arial, Helvetica, sans-serif;
letter-spacing:-2px;
}
h1 span {
color:#ebc42b;
}
h1 a, h1 a:hover {
color:#3a3b3b;
text-decoration:none;
}
h1 small {
display:block;
padding-left:140px;
font:normal 12px/1.2em Arial, Helvetica, sans-serif;
color:#959595;
letter-spacing:normal;
}
h2 {
font:normal 24px/1.5em Arial, Helvetica, sans-serif;
margin:8px 0;
color:#323a3f;
}
p {
margin:8px 0;
padding:0 0 8px 0;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
p.spec {
text-align:left;
}
a {
color:#daa520;
text-decoration:underline;
}
a.com {
float:right;
}
.header, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .rightbar, .content .leftbar {
margin:0;
padding:0;
}
.header {
background:no-repeat center 88px;
}
.header_resize {
margin:0 auto;
padding:0;
width:970px;
}
.header .htext {
margin:0;
padding:24px 520px 24px 60px;
height:194px;
background:url(images/hbg_img.jpg) no-repeat center center;
}
.header .htext h2 {
color:#fff;
font:normal 24px/1.5em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
.header .htext p {
color:#fff;
font:bold 14px/1.4em Arial, Helvetica, sans-serif;
}
.header .htext a {
color:#fff;
text-decoration:underline;
}
.menu_nav {
margin:0;
padding:0 24px;
height:65px;
background:url(images/menu.gif) repeat-x center top;
}
.menu_nav ul {
list-style:none;
}
.menu_nav ul li {
margin:0;
padding:10px 2px 0 0;
float:left;
background:url(images/menu_sep.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:17px 24px 16px;
color:#959595;
text-decoration:none;
font-size:13px;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
color:#fff;
background:#f00 url(images/menu_a.gif) repeat-x center;
}
.content {
margin:0 auto;
padding: 0px 24px 24px 24px;
width:970px;
position: relative;
}
.content .leftbar {
float: left;
width: 200px;
margin-top: 0px;
margin-left: 24px;
}
.content .leftbar .gadget, .content .rightbar .gadget{
padding: 3px;
}
.content .mainbar {
width: 513px;
margin-left: 230px;
padding: 3px;
position: absolute;
}
.content .rightbar {
width: 200px;
margin-top: 0px;
margin-left: 750px;
}
.footer {
}
.footer_resize {
margin:0 auto;
padding:24px 40px;
width:890px;
color:#959595;
}
.footer p {
margin:0;
padding:4px 0;
line-height:normal;
color:#959595;
}
.footer a {
color:#959595;
padding:inherit;
text-decoration:underline;
}
.footer a:hover {
text-decoration:none;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
ol {
list-style:none;
}
ol li {
display:block;
clear:both;
}
ol li label {
display:block;
margin:0;
padding:16px 0 0 0;
}
ol li input.text {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:5px 2px;
height:16px;
background:#fff;
}
ol li textarea {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:2px;
background:#fff;
}
ol li .send {
margin:16px 0 0 0;
}
.searchform {
float:right;
}
#formsearch {
margin:0;
padding:12px 0 0;
}
#formsearch span {
display:block;
margin:6px 0;
padding:0;
float:left;
background:#fff url(images/search.gif) no-repeat top left;
}
#formsearch input.editbox_search {
margin:0;
padding:11px 6px 10px;
float:left;
width:181px;
border:none;
background:none;
font:normal 12px/1.5em Arial, Helvetica, sans-serif;
color:#a8acb2;
}
#formsearch input.button_search {
margin:6px 0 0 0;
padding:0;
border:none;
float:left;
}
Danke für eure Hilfe!
-
Om nah hoo pez nyeetz, postfach!
Die mittlere Spalte ist absolut positioniert, das heißt aus dem Textfluss genommen. Da ist es normal, dass nachfolgende Elemente dieses Element ignorieren.
Du könntest den Footer aus dem Content entfernen.
Matthias
--
1/z ist kein Blatt Papier.
-
Du könntest den Footer aus dem Content entfernen.
Matthias
Das habe ich gemacht, es hat sich leider nicht (viel) geändert.
Liebe Grüße<div class="content"> <div class="leftbar"> <div class="gadget"> <h2>Kontakt</h2> Lustiges Kontaktdingens mit Logo! </div> <div class="gadget"> <h2>Aktuell</h2> Vielleicht auch einen Kalender? </div> </div> <div class="mainbar"> <h2>Bla</h2> <i>"Tiere sind die unschuldigen Opfer einer Weltanschauung, die behauptet, manche Leben seien wertvoller als andere, die Mächtigen hätten das Recht, die Machtlosen auszubeuten, und die Schwachen müssten zum Wohle des größeren Ganzen geopfert werden." - Steven Simmons</i><br><br> Wusstest du, dass jährlich etwa 4 Millionen Rinder und 56 Millionen Schweine geschlachtet werden?<br> Wusstest du, dass jährlich etwa 50.000 Galgos in Spanien aufgehängt werden?<br> Wusstest du, dass Delphine in Aquazoos Selbstmord begehen?<br><br> Auf dieser Website wollen wir auf die Notwendigkeit des Tierschutzes im Allgemeinen und die Aktionen unserer Gruppe im Besonderen eingehen, denn die Tiere können sich nicht wehren; es sind die Menschen, die ihre Stimme sein müssen. Wir haben beschlossen diese Stimme zu sein, unsere Augen vor diesen Missständen nicht länger zu verschließen und uns für die Rechte der Tiere einzusetzen, denn Mitleid ist nicht genug!<br><br> Dein Team von<br> Animalia </div> <div class="rightbar"> <div class="gadget"> <h2>Kontakt</h2> Lustiges Kontaktdingens mit Logo! </div> <div class="gadget"> <h2>Aktuell</h2> Vielleicht auch einen Kalender? </div> </div> </div> <div class="footer"> <div class="footer_resize"> <p class="lf">© Copyright <a href="#">Animalia</a>.</p> <p class="rf">Layout by Rocket <a href="http://www.rocketwebsitetemplates.com/">Website Templates</a></p> </div> </div> </div> </div> </body> </html>-
Om nah hoo pez nyeetz, postfach!
floate die beiden linken Spalten, entferne das margin-left bzw. mache es für einen gewünschten Abstand deutlich kleiner, gib dem content overflow: hidden und beseitige die 9 Fehler
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, postfach!
floate die beiden linken Spalten, entferne das margin-left bzw. mache es für einen gewünschten Abstand deutlich kleiner, gib dem content overflow: hidden und beseitige die 9 Fehler
Matthias
Vielen Dank für deine Hilfe!
Ich habe die Fehler beseitigt und dem Content overflow:hidden gegeben, außerdem die rechte Spalte mit float: right an die gewünschte Position gebracht. Wenn ich beide linke Spalten nach links floate, sind sie (logischerweise?) übereinander, was genau meintest du?.content { margin:0 auto; padding: 0px 24px 24px 24px; width:970px; position: relative; overflow: hidden; } .content .leftbar { float: left; width: 200px; margin-top: 0px; margin-left: 24px; } .content .leftbar .gadget, .content .rightbar .gadget{ padding: 3px; } .content .mainbar { width: 513px; float: left; padding: 3px; position: absolute; } .content .rightbar { float: right; width: 200px; margin-top: 0px; }-
Om nah hoo pez nyeetz, postfach!
immer noch position: absolute. Siehe meine erste Antwort.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, postfach!
immer noch position: absolute. Siehe meine erste Antwort.
Matthias
Vielen, vielen Dank, jetzt funktioniert alles.
-
-
-
-
-
-
Bounjoun postfach,
Mächtigen
müssten
größerenWenn du utf8 nutzt, warum die HTML-Entities?
Wusstest du, dass jährlich
Hier geht's doch auch.
»»werden?<br>
^^^^Bei einem XHTML-Doctype müssen auch standalone-Tags geschlossen werden.
Adiou.
--
Ich bin eigentlich ganz anders, aber ich komme so selten dazu. - Ödön von Horwáth
Ist Rudi Carrell Gott? Oder George Harrison Ford?
Ich bin faul und das ist gut so.-
Bounjoun postfach,
Wenn du utf8 nutzt, warum die HTML-Entities?
Bei einem XHTML-Doctype müssen auch standalone-Tags geschlossen werden.Adiou.
Danke für die Hinweise. :)
-