✔ Fixieren am unteren Rand

Status
Nicht offen für weitere Antworten.
M

mike4004

Erfahrenes Mitglied
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: 
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
 
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>
 
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?

Danke...
 
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.
 
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?
 
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 :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück