Berechnung der Positionierung

[Anna]

Hallo,

Ich weise momentan einem div-Element folgende Eigenschaften zu:

div.footer{  
         position:absolute;  
         bottom:10%;  
         left:40%;  
  
}

das Problem: Ist die Seite nun länger, so dass man scrollen muss, erscheint das div-element trotzdem an der "selben" stelle (10% vom sichtbaren bottom entfernt). Es soll aber logischerweise erst nach scrollen ganz unten sichtbar sein.

ich hoffe ihr könnt mir helfen

liebe grüße

Anna

[suit]

das Problem: Ist die Seite nun länger, so dass man scrollen muss, erscheint das div-element trotzdem an der "selben" stelle (10% vom sichtbaren bottom entfernt). vermutlich hast du html/body mit height 100% ausgestattet - falls ja: works as designed, da diese beiden elemente einfach an der unterkante des viewports aufhören

[Anna]

das Problem: Ist die Seite nun länger, so dass man scrollen muss, erscheint das div-element trotzdem an der "selben" stelle (10% vom sichtbaren bottom entfernt). vermutlich hast du html/body mit height 100% ausgestattet - falls ja: works as designed, da diese beiden elemente einfach an der unterkante des viewports aufhören

hm also hab im body eigentlich keine angabe drin. kann es noch woanders dran liegen?

body {  
  
  background-image:url(img/back2_hell.gif);  
    background-repeat:no-repeat;  
    background-color:#3f2d2b;  
    line-height: 1.2;  
     color:#FFFF99;  
     font-family:arial;  
     text-align : center;  
  
  
}

liebe grüße

Anna

[suit]

hm also hab im body eigentlich keine angabe drin. kann es noch woanders dran liegen?

schwer zu sagen, vielleicht daran, dass heute montag ist oder dass in salzburg 21.5 lufttemperatur sind

[Anna]

schwer zu sagen, vielleicht daran, dass heute montag ist oder dass in salzburg 21.5 lufttemperatur sind

Dass kann natürlich der Grund sein aber dann hör ich sofort wieder mit css auf  :D

Ne mal im ernst, kann es z.b daran liegen, dass das nächsthöhere vorfahrenelement (wahrscheinlich ja dann der body) nicht mit position:static deklariert ist?
Das ist nämlich nicht der fall aber den hätte ich auch eigentlich gern weiterhin mit text-align:center.

es muss doch irgendeinen grund geben, dass er nur den viewport als messgröße für die positionierung nimmt?

lg

Anna

[suit]

Ne mal im ernst, kann es z.b daran liegen, dass [...]

kurz: ja

wie wärs mal mit einem demolink wo das problem auftritt - ich steh zwar irgendwie auf rätselraten, aber eher auf klassische adventures wie zb maniac mansion, monkey island oder day of the tentacle

[Anna]

wie wärs mal mit einem demolink wo das problem auftritt

Hier wäre das z.B der Fall

[suit]

wie wärs mal mit einem demolink wo das problem auftritt

Hier wäre das z.B der Fall

einerseits: dein code ist ziemlich ungültig und es ist ein wunder, dass alles so funktioniert wie du es möchtest

wenn du mit css arbeiten willst, ist es essentiell wichtig, dass du gültigen code verwendest und jeder browser im standardkonformen modus arbeitet (besonders der internet explorer)

behebe zuerst diese fehler

anschließend:

position absolute sollte nur eingesetzt werden, wenn man GENAU weiss, was man tun - in deinem fall ist die verwendung, ohne zu übertreiben, überflüssig

wenn elemente aus dem textfluss genommen werden (mittels position absolute zb) wirken sie sich nicht mehr auf die umgebenden elemente aus

da dein inhaltsbereich mittels position absolute an seine stelle gebracht wurde, wachsen sowohl body alsauch html nicht mit - dein footer ist somit unten dran positioniert und wird immer an exakt der selben stelle kleben, egal wie lang der inhalt wird

möglichkeit 1:
ignoriere alles bisher gesagte, verfrachte den footer in deinen inhalt und positioniere ihn in ihm an seinem unteren ende - das wird mit glück funktionieren

diese möglichkeit ist aber ziemlich irre, da du über kurz oder lang auf fehler stoßen wirst, die sich nicht mehr ändern lassen - mit deinem aktuellen code wird die seite unkontrollierbar (besonders in browsern, die du nicht kennst)

wenn du zb dein browserfenster kleiner oder größer machst, fällt dein design auseinander oder überlagert sich

möglichkeit 2:
du willst etwas lernen

erstelle eine kopie deiner seite und beginne neu
in das  <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst> fügst du folgenden html-schnipsel ein

  
<div id="container">  
  <h1><a href="/">miniwettbewerb.de</a></h1>  
  <div id="content">  
    <p>lorem ipsum</p>  
  </div>  
  <div id="sidebar">  
    <ul id="menu1">  
      <li><a href="#">menüpunkt</a></li>  
      <li><a href="#">menüpunkt</a></li>  
      <li><a href="#">menüpunkt</a></li>  
    </ul>  
    <ul id="menu2">  
      <li><a href="#">menüpunkt</a></li>  
      <li><a href="#">menüpunkt</a></li>  
      <li><a href="#">menüpunkt</a></li>  
    </ul>  
    <form name="login" action="#" method="post">  
      <!-- dein restliches zeug -->  
    </form>  
  </div>  
  <address id="footer">© foo bar baz</address>  
</div>  

Anm: ja, es sind einige redundate elemente dabei, man kann durchaus noch etwas code sparen  - aber so ist es verständlich zu formatieren

mit diesem code (hoffentlich valide ;)) kannst du dein aktuelles design denke ich umsetzen

und das prinzipielle css sollte so aussehen:
#container erhält eine bestimmte breite
#content erhält float: right
#sidebar ebenfalls
#menu1 wird absolut nach oben positioniert (ja, in den fall ist es sinnvoll)
#menu2 ist da wo es ist
das forumlar ebenfalls
das address-element stellt den textfluss mittels clear wieder her