footer

Richard

18. Jun 2012 15:23

Hallo :)

Ich möchte einen "Fußbereich" machen, der in einem DIV ist. Wenn ich den aber position: absolute mache und beim inhalt der seite z.B. was dazu mache rückt der Fußberich ja nicht mit weiter nach unten sondern bleibt dort wo er war und verdeckt dann den Inhalt der Seite. Weiß jemand wie ich das mit css hinbekommen kann dass der Fußbereich mit dem DIV darüber mit rückt, wenn dieser länger oder auch kürzer wird?

Möchtest du mitreden? Kostenlos Anmelden

psycon

aus Karlsruhe (Baden- Württemberg)

18. Jun 2012 15:25

re

Warum positionierst du ihn nicht einfach im Textfluss? Also einfach hinter das letzte div packen?

richi2

Richard

18. Jun 2012 15:26

ja

Wie macht man das denn? Ich habe bis jetzt nur absolut positionierte DIVs benutzt :/

Lokus

Penis

18. Jun 2012 15:29

5g55g5

Antwort auf footer von richi2

Wenn du den Footer immer am unteren Bildschirmrand haben willst, wenn aber der Inhalt mehr wird als auf den Bildschirm passt soll er nach unten gehen?

Das geht meines Erachtens so nur mit Javascript. Mit CSS hast du halt entweder einen absolut positioniertes DIV oder ein relativ positioniertes. Absolut heisst halt, dass der Footer dann IMMER auf bottom: 0 liegt, egal wie viel Content auf der Seite ist.

Ansonsten würd ich das einfach mit min-height machen. min-height: 600px oder so für den Content.

psycon

aus Karlsruhe (Baden- Württemberg)

18. Jun 2012 15:29

re

Antwort auf ja von richi2

> Wie macht man das denn?

http://www.css4you.de/position.html

> Ich habe bis jetzt nur absolut
> positionierte DIVs benutzt :/

Warum das denn? Gibt es einen speziellen Grund dafür? Evtl zeigst du uns ja mal deinen Quelltext.

Lokus

Penis

18. Jun 2012 15:30

efef

Antwort auf ja von richi2

Du musst nur position: absolute weglassen. oder position: relative daraus machen. top, left, right, bottom brauchst du dann auch nicht mehr. Dann musst du mit margin arbeiten.

richi2

Richard

18. Jun 2012 15:52

re

hier ist der Code. Das da noch viele Fehler drin sind weiß ich. Muss ich nochmal überarbeiten.

    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2 <html>
    3 
    4 
    5 <head>
    6 <title>Statistiken - TMB</title>
    7 <link rel="icon" href="http://tbm-phi.bplaced.net/bilder/icon.png"
    8           type="image/png" />
    9 <link rel="stylesheet" href="css/braun.css" type="text/css" />
   10 <script src="javascript/design.js" language="JavaScript"
   11             type="text/javascript"></script>
   12 <script src="javascript/balken.js" language="JavaScript"
   13             type="text/javascript"></script>
   14 <script src="javascript/andern.js" language="JavaScript"
   15             type="text/javascript"></script>
   16 </head>
   17 <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
   18 <center>
   19 <div id="mother">
   20 <div id="header">
   21    <img src="http://tbm-phi.bplaced.net/bilder/oben_website_statistik.png"
   22             alt="The Black Mafia Statistiken" />
   23 </div>
   24 <div id="kasten1" class="kasten" onmouseover="wechselover(1)"
   25         onmouseout="wechselout(1)">
   26 <div id="balken1"><h4>Die Daten der letzten Woche :)</h4></div>
   27 <div id="kasteninhalt">
   28 
   29 <?php
   30   include "../../table1.php";
   31 ?>
   32 
   33 </div>
   34 </div>
   35 <div id="kasten2" class="kasten" onmouseover="wechselover(2)"
   36         onmouseout="wechselout(2)">
   37 <div id="balken2"><h4>Wie oft warst du der Beste?</h4></div>
   38 <div id="kasteninhalt">
   39 
   40 
   41 <?php
   42   include "../../table2.php";
   43 ?>
   44 
   45 </div>
   46 </div>
   47 
   48 <div id="kasten3" class="kasten" onmouseover="wechselover(3)"
   49         onmouseout="wechselout(3)">
   50 <div id="balken3"><h4>Rekord</h4></div>
   51 <div id="kasteninhalt">
   52 
   53 <?php
   54   include "../../table3.php";
   55 ?>
   56 
   57 </div>
   58 </div>
   59 
   60 <div id="kasten4" class="kasten" onmouseover="wechselover(4)"
   61         onmouseout="wechselout(4)">
   62 <div id="balken4"><h4>Bemerkungen/Notizen</h4></div>
   63 <div id="kasteninhalt">
   64 
   65 <?php
   66   include "../../notizen.php";
   67 ?>
   68 
   69 </div>
   70 </div>
   71 <div id="kasten5" class="kasten">
   72 <div id="balken5"><h4 class="designandern">Farben ändern</h4></div>
   73 <div id="kasteninhalt5">
   74 
   75       <ul id="menu">
   76          <li class="main">Menü 1.0
   77             <ul class="sub">
   78                <li><a href="#" title="#">Menü 1.1</a></li>
   79                <li><a href="#" title="#">Menü 1.2</a></li>
   80                <li><a href="#" title="#">Menü 1.3</a></li>
   81             </ul>
   82          </li>
   83          <li class="main">Menü 2.0
   84             <ul class="sub">
   85                <li><a href="#" title="#">Menü 2.1</a></li>
   86             </ul>
   87          </li>
   88          <li class="main">Menü 3.0
   89             <ul class="sub">
   90                <li><a href="#" title="#">Menü 3.1</a></li>
   91                <li><a href="#" title="#">Menü 3.2</a></li>
   92                <li><a href="#" title="#">Menü 3.3</a></li>
   93                <li><a href="#" title="#">Menü 3.4</a></li>
   94             </ul>
   95          </li>
   96          <li class="main">Menü 4.0
   97             <ul class="sub">
   98                <li><a href="#" title="#">Menü 4.1</a></li>
   99                <li><a href="#" title="#">Menü 4.2</a></li>
  100             </ul>
  101          </li>
  102       </ul>
  103 
  104 </div>
  105 </div>
  106 </center>
  107 </body>
  108 </html>

und die css datei:

    1 * {
    2   padding: 0;
    3   margin: 0;
    4 }
    5 
    6 body {
    7   text-align: center;
    8   background-color: #915900;
    9   font-size:13px;
   10   font-family:Verdana, Sans-Serif;
   11 }
   12 
   13 #mother {
   14 
   15 }
   16 
   17 #header {
   18   position: absolute;
   19   top: 0;
   20   left: 0;
   21   width: 1024px;
   22   height: 240px;
   23 }
   24 
   25 #kasten1 {
   26   position: absolute;
   27   top: 220px;
   28   left: 0;
   29   width: 650px;
   30   text-align: left;
   31   margin: 3;
   32   border: 2px solid #3f2200;
   33   padding: 2px;
   34   background-color: #ffed9a;
   35 }
   36 
   37 #kasten2 {
   38   position: absolute;
   39   top: 220px;
   40   right: 0;
   41   text-align: left;
   42   margin: 3;
   43   border: 2px solid #3f2200;
   44   padding: 2px;
   45   background-color: #ffed9a;
   46 }
   47 
   48 #kasten3 {
   49   position: absolute;
   50   top: 530px;
   51   right: 0;
   52   text-align: left;
   53   margin: 3;
   54   border: 2px solid #3f2200;
   55   padding: 2px;
   56   background-color: #ffed9a;
   57   width: 307px;
   58 }
   59 
   60 #kasten4 {
   61   position: absolute;
   62   top: 615px;
   63   left: 0;
   64   text-align: left;
   65   margin: 3;
   66   border: 2px solid #3f2200;
   67   padding: 2px;
   68   background-color: #ffed9a;
   69   width: 650px;
   70 }
   71 
   72 #kasten5 {
   73   position: absolute;
   74   top: 125px;
   75   left: 10;
   76   text-align: center;
   77   margin: 3;
   78   border: 2px solid #3f2200;
   79   padding: 9px;
   80   width: 180px;
   81 }
   82 
   83 #balken1 {
   84   position: absolute;
   85   top: 0;
   86   left: 0;
   87   width: 100%;
   88   background-color: #663700;
   89   border-bottom: 2px solid #000000;
   90 }
   91 
   92 #balken2 {
   93   position: absolute;
   94   top: 0;
   95   left: 0;
   96   width: 100%;
   97   background-color: #663700;
   98   border-bottom: 2px solid #000000;
   99 }
  100 
  101 #balken3 {
  102   position: absolute;
  103   top: 0;
  104   left: 0;
  105   width: 100%;
  106   background-color: #663700;
  107   border-bottom: 2px solid #000000;
  108 }
  109 
  110 #balken4 {
  111   position: absolute;
  112   top: 0;
  113   left: 0;
  114   width: 100%;
  115   background-color: #663700;
  116   border-bottom: 2px solid #000000;
  117 }
  118 
  119 #balken5 {
  120   position: absolute;
  121   top: 0;
  122   left: 0;
  123   width: 100%;
  124   background-color: #663700;
  125   border-bottom: 2px solid #000000;
  126   font-size: 10px;
  127 }
  128 
  129 h4 {
  130   font-family: "Comic Sans MS";
  131   font-size: 17px;
  132   font-weight: bolder;
  133   color: #ffffff;
  134 }
  135 
  136 .designandern {
  137   font-family: "Comic Sans MS";
  138   font-size: 10px;
  139   font-weight: bolder;
  140   color: #ffffff;
  141 }
  142 
  143 #kasteninhalt {
  144   margin-top: 27px;
  145 }
  146 
  147 #kasteninhalt5 {
  148   margin-top: 15px;
  149 }
  150 
  151 #notizen {
  152   color: black;
  153   text-align: center;
  154   font-family: "Comic Sans MS";
  155   font-size: 14px;
  156   font-weight: bolder;
  157 }
  158 
  159 .tbm {
  160   border-style: solid;
  161   border-width: 3px;
  162   border-color: #000000;
  163 }
  164 
  165 table {
  166   border-collapse:collapse;
  167   color: #ffd195;
  168   text-align: center;
  169   font-family: "Comic Sans MS";
  170   font-size: 14px;
  171   font-weight: bolder;
  172 }
  173 
  174 td {
  175   border:1px solid #000000;
  176 }
  177 
  178 .kasten th {
  179   width: 150px;
  180   border:2px solid #000000;
  181   background-color: #6d3e00;
  182 }
  183 
  184 
  185 h4 {
  186   text-align: center;
  187 }
  188 
  189 .d {
  190   background-color: #985600;
  191 }
  192 
  193 .d:hover {
  194   background-color: #000000;
  195 }
  196 
  197 .h {
  198   background-color: #ba6900;
  199 }
  200 
  201 .h:hover {
  202   background-color: #000000;
  203 }
  204 
  205 .n {
  206   text-align: left;
  207   letter-spacing: 1px;
  208 }
  209 
  210 .f {
  211   text-decoration:underline;
  212   letter-spacing: 0.1em;
  213   font-size: 16px;
  214 }
  215 
  216 .a {
  217   background-color: #985600;
  218 }
  219 
  220 .z {
  221   background-color: #985600;
  222 }
  223 
  224 ul#menu
  225 {
  226    list-style-type:none;
  227 }
  228 
  229 ul#menu li.main
  230 {
  231    display:block;
  232    float:left;
  233    width:130px;
  234    padding:0px;
  235    margin-left:5px;
  236    background-color:#ccc;
  237    text-align:center;
  238    line-height:20px;
  239    height:20px;
  240    overflow:hidden;
  241 }
  242 
  243 ul#menu li.main:hover
  244 {
  245    overflow:visible;
  246 }
  247 ul#m
  248 enu li.main ul.sub
  249 {
  250    list-style-type:none;
  251    padding:0px;
  252    text-align:center;
  253    background-color:#ddd;
  254 }
  255 
  256 ul#menu li.main ul.sub li:hover
  257 {
  258    background-color:#eee;
  259 }
  260 
  261 ul#menu li.main ul.sub li a
  262 {
  263    border:0px solid #000;
  264    display:block;
  265    color:#000;
  266    text-decoration:none;
  267 }

Der #kasten3 ist unter dem #kasten1. Wenn ich die Tabelle in #kasten1 erweitere, soll der #kasten3 weiter runterrücken und nicht über dem #kasten1 stehen.

Lokus

Penis

18. Jun 2012 15:56

evev

Ich würde sagen du liest was über position: absolute und position: relative und setzt es dann einfach um.

psycon

aus Karlsruhe (Baden- Württemberg)

18. Jun 2012 16:19

Zusatz

Am Besten auch noch ein bisschen was über dynamische Seiten, CSS allgemein, ... Die verschiedenen Designs sind hier verdammt umständlich realisiert ;-)

Lokus

Penis

18. Jun 2012 16:21

feffe

Das wäre sicher nicht schlecht. Vielleicht würde er dann mal vom Copy & Paste wegkommen und checken was er da eigtl. macht :)

richi2

Richard

18. Jun 2012 17:13

re

danke für eure Ratschläge. Ich werde noch was lernen. Das ist ja meine erste Seite mit css. Lerne sowas erst seit 1 Monat :/

Lokus

Penis

18. Jun 2012 17:14

eveve

Achso, dann hab ich dich mit jemandem verwechselt, sorry.

jojo..

18. Jun 2012 18:26

re

Antwort auf footer von richi2

Wenn ich dich richtig verstanden habe, brauchst du dafür am unterem Rand fixiertes [[fn position:fixed; bottom:0px;]] DIV und für den letzten DIV vorm Footer ein margin-bottom.
Mit dem position:fixed legst du halt fest, dass sich das DIV beim Scrollen nicht mitbewegt, sondern an der Position verbleibt. bottom:0px; ist dafür verantwortlich, dass das betreffende DIV sich 0px vom unteren Rand ausrichtet. Für das vorhergehende DIV legst du einen Außenabstand nach unten fest, der alle weiteren Elemente (sofern vorhanden) nach unten verschiebt bzw. einfach Platz freilässt. Das geht mit margin-bottom:40px (oder irgend einem anderen passenden Wert).
Kleines Beispiel:

index.html

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.
    2 org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    4   <head>
    5     <title>DIV mit CSS unten positionen mit überlangem Content</title>
    6     <link rel="stylesheet" type="text/css" href="style.css" media="all">
    7   </head>
    8   <body>
    9     <div id="content">
   10       <h1>Inhalt</h1>
   11       <p>
   12         &lt;Hier überlangen Text einfügen!&gt;
   13       </p>
   14     </div>
   15     <div id="footer">Das hier ist der Footer!</div>
   16   </body>
   17 </html>

style.css

    1 body {
    2   padding:0px;
    3   margin:0px;
    4 }
    5 div#content {
    6   position:relative;
    7   width:50%;
    8   border:1px solid #000;
    9   padding:5px;
   10   margin:10px auto 40px auto; /* 10px Abstand nach oben, automatischer 
   11   abstand nach links, 40px Abstand nach unten, automatischer Abstand nach 
   12   rechts. "auto" für links und rechts sorgt bei weniger als 100% Breite für 
   13   mittige Positionierung */
   14 }
   15 div#footer {
   16   position:fixed;
   17   bottom:0px;
   18   height:30px;
   19   width:100%;
   20   padding:0px;
   21   margin:0px;
   22   background-color:#aaa;
   23   text-align:center;
   24   border-top:1px solid #000;
   25 }

jojo..

18. Jun 2012 18:27

Kleiner Fehler

Na sowas... Da hab ich mich doch glatt nicht an's XHTML gehalten ;D

<link rel="stylesheet" type="text/css" href="style.css" media="all">
muss natürlich lauten:
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

Loxiran

19. Jun 2012 14:26

re

Antwort auf 5g55g5 von Lokus

nein, das ist nicht richtig, such mal nach "sticky footer" geht auch ohne js, nur mit css

Lokus

Penis

19. Jun 2012 19:50

egregre

Ok stimmt. Aber das ist dann wieder so ein Hack der vielleicht mit der nächsten IE Version nicht mehr funktioniert.

wandkeks

19. Jun 2012 20:36

noe

nenee, http://ryanfait.com/sticky-footer/ z.B. ist 100% valides CSS/HTML. Die Hacks sind nur fuer *alte* IEs da.

jojo..

19. Jun 2012 20:59

re

Antwort auf egregre von Lokus

Hm... Wo hab ich bei meinem Beispiel hier (also da weiter unten in der Baumansicht ^^) hacks benutzt? :P

Lokus

Penis

20. Jun 2012 08:53

grege

Antwort auf noe von wandkeks

Na gut. Überredet. ;)

Möchtest du mitreden? Kostenlos Anmelden

spin.de · die Community: Diskussions-Forum und Chat - Lern nette Leute kennen!

footer

re

ja

5g55g5

re

efef

re

evev

Zusatz

feffe

re

eveve

re

Kleiner Fehler

re

egregre

noe

re

grege