Meer pagina's op een pagine

[musicscore]

Hoi allen,

Ik probeer al dagen een pagina te bouwen waarbij ik de inhoud van meerdere pagina wil opnemen en met een javascript en ankers wil scrollen naar de juiste inhoud. Ik gebruik hier de kennis van Rolf voor (http://www.cmscanbesimple.org/blog/smoo ... -an-anchor en de CGSimpleSmarty module http://www.cmscanbesimple.org/blog/mult ... query-tabs. Boven aan de pagina wil ik nu een menu zetten dat niet mee scrolled en daarom heb ik het menu opgenomen in de <div> en deze met css een position: fixed gegeven. werk allemaal heel goed maar ... Wanneer ik scroll verdwijnen de bovenste regels van de inhoud altijd achter het menu en zijn zodoende dus niet te zien. Weet iemand hoe ik dit kan oplossen? Heb al mijn kennis uit de kast getrokken maar blijkt gewoon niet genoeg. Wie zou mij een hint kunnen geven ?

Bedankt alvast

[Rolf]

Je moet dan zorgen dat er ruimte zit tussen de anchor link en de eerste regel van de content. Met .content_block { margin-top: 50px } of zoiets...

[musicscore]

Dat heb ik al geprobeerd maar bij het initieel openen van de website komt deze ruimte dan ook tussen het menu en de eerste regel van de eerste blok. Als ik dan op de eerste link klik dan schijft hij inderdaad op tot aan het anker.

Ik heb dus in de HTML template staan :

Code: Select all

<div id="topruimte"> </div>
<a id="anchor1"></a>
<

Als CSS heb ik dan

Code: Select all

#topruimte {
height: 1px;
margin-top: 150px;
}

Kijk maar eens op http://rs.dev-infowebs.nl

[erpee]

valt nu niet veel te zien op je site.

"site currently down for maintenance"

[musicscore]

Erpee, bedankt voor je reactie. Heb deze (ontwikkel) omgeving inderdaad standaard ingesteld voor alleen toegang voor ingelogde administrators. Gelukkig heb ik het probleem al weten op te lossen hoewel al, ben er toch bijna een week mee bezig geweest.
De oplossing was een kleine aanpassing aan het javascript en een correcte CSS. Hieronder het jquery script :

Code: Select all

<__script__ type="text/javascript">
  jQuery(document).ready(function($) {
    $(".scroll").click(function(event) {
    event.preventDefault();
    $('html,body').animate( { scrollTop:$(this.hash).offset().top - 50 } , 1000);
    } );
  } );

De truc zit 'm in scrollTop:$(this.hash).offset().top - 50

De CSS ziet er als volgt uit :

Code: Select all

#content {
    width: 80%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 30px;
    position: absolute;
    color: #424242;
    line-height: 1.6em;
    font-size: 14px;
}

Hier zit 'm de truc in position: absolute en top: 30px;

Eigenlijk niet eens zo lastig (als je het eenmaal weet)

Nogmals bedankt voor jullie reacties.