Fixieren am unteren Rand @ tutorials.de: Tutorials, Forum & Hilfe

mike4004 · 18.08.07 17:59

Hallo

Ich erzeugen durch folgenden CSS code auf meiner Homepage einen ~schwarzen Streifen, als Abgrenzung.
So nun zu meiner Frage wie muss ich den Code modifizieren das der Balken immer am unteren Rand des Bildschirms ist auch wenn nicht genug Seiten-inhalt vorhanden ist. Sonnst soll er ganz normal zum scrollen sein.

HTML-Code:

div#bot { background-color: #222; border: 0px; clear: both; padding: 5px 1% 5px 0px; text-align: right; width: 99%; }

hoffe ihr versteht was ich meine.

mfg mike4004

Maik · 18.08.07 18:12

Hi,

den "Footer" positionierst du auf diese Weise am unteren Fensterrand, so dass er bei zunehmenden Inhalt nach unten wandert

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_mike4004</title>
 
<style type="text/css">
<!--
html,body {
margin:0;
padding:0;
height:100%;
}
 
div#wrapper {
position:relative;
margin:0 auto;
width: 800px;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE (<7) */
background:#e9e9e9;
}
 
#content {
padding-bottom:30px; /* Damit der Inhalt nicht unter den Footer wandert */
}
 
div#bot {
position:absolute;
bottom:0;
left:0;
width:99%;
background:#222;
clear:both;
padding:5px 1% 5px 0px;
text-align:right;
color:#fff;
}
-->
</style>
 
</head>
<body>
 
<div id="wrapper">
   <div id="content">
        <p>content</p>
        <!-- Ab hier wird der Inhalt zunächst auskommentiert -->
        <!--<p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        - END - -->
   </div>
   <div id="bot">bot</div>
</div>
 
</body>
</html>

mike4004 · 18.08.07 19:06

THX hat funktioniert.

mfg mike4004

Sevenit · 21.08.07 21:48

Hallo,

Ich hab eigentlich das selbe Problem nur etwas komplizierter und zwar soll der untere footer über die ganze body breite gehen. Und drotzdem scrollbar sein! Wie kann ich das lösen?

Siehe hier: http://sevenit.de

Danke...

Maik · 21.08.07 21:57

Hi,

wenn bei dir der Footer bei zunehmenden Seiteninhalt nach unten wandern soll, müsstest du zunächst mal das übrige Layout von den absoluten Positionsangaben befreien.

Sevenit · 21.08.07 21:59

Ja schon klar... Aber wie dann
Ich hab mitlerweile schon alles probiert....

Maik · 21.08.07 22:07

Hast du es beispielsweise schon mal mit der float-Eigenschaft versucht, um Blockelemente nebeneinander anzuordnen, oder sie mit der margin-Eigenschaft an die gewünschte Position zu setzen?

Sevenit · 21.08.07 22:09

Gute Idee! Probier ich gleich aus. Meld mich gleich nochmal.
Schon mal danke für deine Hilfe!

Sevenit · 21.08.07 22:22

Naja klappt nicht mit float.

Was meint ihr soll ich es mal mit Java-Script probieren. Mach ich aber ungern.

Maik · 21.08.07 22:35

Ich hab jetzt nur mal die absoluten Positionsangaben rausgenommen und ein weiteres DIV #wrapper angelegt, in das das bestehende Layout eingebettet wird:

Code :

@charset "utf-8";
html,body {
        height:100%;
        margin:0;
        padding:0;
}
 
body {
        background-color: #F0F0F0;
}
 
#wrapper {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;
        background-image: url(http://sevenit.de/images/bg-main.gif); /* ersetzt das DIV #bg! */
        background-repeat: no-repeat;
        background-position:400px bottom;
}
 
#head {
        height: 200px;
        width: 100%;
        background-image: url(http://sevenit.de/images/bg-head.gif);
        background-repeat: repeat-x;
}
 
#main #head_panel {
        width: 100%;
        height: 26px;
        color: #FFFFFF;
        font-size: 11px;
}
 
#main {
        width: 650px;
        margin: 0 auto;
}
 
#main #head_panel #subnavi {
        width: 300px;
        top: 6px;
        float:right;
        text-align: right;
}
 
#main #sevenit {
 
}
 
#footer {
        bottom: 0px;
        position: absolute;
        width: 100%;
        height: 76px;
        background-image: url(http://sevenit.de/images/bg-footer.gif);
        background-repeat: repeat-x;
        text-align: center;
        font-size: 11px;
        color: #000;
        padding-top: 10px;
        z-index: 1;
        clear: both;
}
#main #head_panel #date {
        width: 300px;
}
 
#main #navi {
        width: 100%;
        height: 33px;
        z-index: 2;
}
#main #navi ul {
        list-style-image: none;
        list-style-type: none;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
}
#main #navi li {
        float: left;
        width: 20%;
        font-size: 17px;
        display: block;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
}
#main #content #content_end {
        background-image: url(http://sevenit.de/images/bg_con_end.png);
        height: 35px;
        width: 100%;
        z-index: 10;
        margin-left: -10px;
}
 
#main #content {
        width: 640px;
        background-image: url(http://sevenit.de/images/bg_con_no.png);
        background-repeat: repeat-y;
        padding-right: 20px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 300px;
}

Code :

<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand ohne das DIV #bg  -->
    </div>
</body>

Den eventuell erforderlichen Feinschliff mußt du dann noch selber vornehmen

Sevenit · 21.08.07 22:39

Ja so weit bin ich schon kommen nur, wie grig ich jetzt den header und Footer auf 100%

Maik · 21.08.07 22:49

Hast du meinen CSS-Code nicht getestet?

Oder sind das hier beim Header und Footer keine 100% in der Horizontalen?

Fixieren am unteren Rand-demo_sevenit.jpg

Sevenit · 21.08.07 22:56

HEEE
komisch, ich hab auch firefox... und bei mir sieht das nicht so aus....

Maik · 21.08.07 22:58

Dann lad mal deine überarbeitete Fassung des Quellcodes hoch, damit ich auch in den Genuß komme, deine Version zu sehen, denn der o.g. Link führt noch auf die alte Variante.

Sevenit · 21.08.07 23:11

Ich hab es jetzt geschafft. Ich hab noch den alle DIV Tags auser den Content und den footer aus dem wrapper DIV raus genommen dann hat es geklappt.... Vielen Dank nochmal

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Seite am unteren Rand ausrichten

Abstand vom unteren Rand

Tabelle bis an den unteren Rand des IE

div am unteren rand fixieren

flimmern am unteren rand

E-Mail:

Abonnieren Abbestellen