position:fixed und anker

[mcmurphy]

Moin,
folgendes Problem:
habe eine Seite, auf der die allgemeinen Layout Elemente fixed auf der Seite stehen sollen und nur der Inhalt scrollbar sein soll.
Soweit so gut, jetzt ist aber auf einer Seite eine Art Subnavigation, mit der in einem Text mehrere Anker angesprungen werden sollen. Diese werden dann ohne das nötige Offset auch angezeigt.
Hier das online Beispiel...
die Punkte "Was ist..." & "wie wird"

Hier der CSS Teil:

 * { padding:0px; margin:0px; }
 html, body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; 
    min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
  }
  p {
     /* Positionierung des 'zurueck'-Links */
  }

  body { background-image:url(../myicons/background.gif); background-repeat:repeat-y;
         background-attachment:fixed;  }

  h1#topHeadline {  border:0px;  height:205px; width:500px; position:fixed;
                    left: 500px; top:0px; text-align:left; text-indent:-5500px; border:1px solid red;
                    background-image:url(../myicons/naturheilpraxis.gif); 
                    background-repeat:no-repeat;
                     background-position:70px; background-color: #E0DDD8; }
  h2#homoImage { background-image:url(../myicons/homo.gif); 
                 background-repeat:no-repeat; position:fixed;
                 margin-left: 44px;  margin-top: 165px; text-indent:-5500px;}
 /* p#naturheilImg { background-image:url(../myicons/naturheilpraxis.gif); background-repeat:no-repeat; 
                 margin-left: 305px;  margin-top: 90px; text-indent:-5500px;} */
  img#logo {  margin-right:83px; } 
  a {  text-decoration:none; font-weight:bold}
     ul#nav { margin-left:45px; margin-top:185px;  }
     ul#nav li {  list-style-type:none; height:57px; width:220px; 
                  margin-bottom:0px; padding-left:0px;}
     ul#nav li a { height:35px; width:210px; display:block; text-indent:-5000px;  }
     ul#nav li a#home  {background-image:url(../myicons/home.gif);  } 
     ul#nav li a#therapie  {background-image:url(../myicons/therapie.gif);  }   
     ul#nav li a#kontakt  {background-image:url(../myicons/kontakt.gif);  }
     ul#nav li a#impressum  {background-image:url(../myicons/impressum.gif);  }   
     ul#nav li a:hover  {background-position:0px 35px;  } 




     ul#navig { margin-left:0px; margin-top:142px;  }
     ul#navig li {  list-style-type:none; height:10px; width:220px; margin-bottom:20px; }
     ul#navig li a { height:28px; width:180px; display:block; text-indent:-5000px; }
     ul#navig li a#wasistID  { background-image:url(../myicons/wasist.gif);  } 
     ul#navig li a#wiewirdID  {background-image:url(../myicons/wiewird.gif);  }   
     ul#navig li a:hover  {background-position:0px 25px;  } 





  #fixiert {
    position: absolute;
    top: 60px; left: 0px; right:0px;
    width: 270px;
    border: 0px solid silver;
    height: 100%;
   
  }
#fixiert2 {
    position: absolute;
    top: 150px; left: 270px;
    width: 220px;
    border: 0px solid silver;
    height: 100%;
    margin-left: -10px;
    
  }
  html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
  }

  html>body #fixiert2 {  /* nur fuer moderne Browser! */
    position: fixed;
  }
 /* html>body #h1 {  
    position: fixed;
  } */
  #fixiert img {
     float: right;
  }

  
  #Inhalt {
    margin-left: 480px;  width: 530px;
     border:1px solid red;
  }
  * #Inhalt {  /* versteckt vor Netscape 4 */
   /* background-color: #ffffe0;*/
  }

  #Inhalt h2 {
    margin: 203px 35px 15px;
    color: white;
    font-size:20px;  
    font-weight:bold;
  
   }
   #Inhalt h4 {
   margin: -10px 0px 10px
   }
   
   #Inhalt h3 {
    margin: 20px 35px 15px;
    color: white;
    font-size:20px;  
    font-weight:bold;
  
   }
  
  #Inhalt p {
    font-size: 15px;

    color: #333366;
   
    margin-left: 35px;
    margin-right: 30px;
  }
  

  h1 {
    border: 1px ridge gray;
    position: absolute;
    float:left;
  
    
  }
.liste {list-style-type:none; margin-left:40px; margin-top:10px; margin-bottom:10px;}
.liste li {font-size:15px; color: #333366;} 

Könnte das natürlich mit Javascript ausgleichen, aber vielleicht kennt einer von euch ja ne reine CSS Lösung....

[Kropff]

bevor du weiter machst. der ie 6 kann kein position: fixed! zur frage: da wirst du um javascript wohl nicht herumkommen.

gruß
peter

[mcmurphy]

Ich weiß, korrigiere auch die Seite nur für einen Bekannten von mir. Er wollte erst mit Frames arbeiten, ich habe ihn dann auf SelfHtml hingewiesen....
Außerdem besteht das Anker Problem ja auch mit FF, Opera und IE 7

[Kropff]

such mal nach pageYOffset / document.body.scrollTop / document.documentElement.scrollTop und scrollTo

gruß
peter

[mcmurphy]

THX, reines CSS kann ich also wohl vergessen?!?

[wahsaga]

http://molily.de/css-position-fixed

[mcmurphy]

THX, werde ich mich mal durcharbeiten....