Avoir scroll au div uniquement avec le navigateur HELP

Question

briseur

4 Jul 2008 à 23:06

Bonjour je suis en en train de monter mon portfolio en html, mais j'avou c pas trop mon truc, et là c la galère grave, c pour celà que je fait appel à vous, je voudrai que mon écran reste fixe et que mon texte défile uniquement dans mon div "cv" avec la barre de navigation exploreur comme sur le site de zen garden sur cette exemple;

http://www.csszengarden.com/?cssfile=202/202.css

J'ai cru comprendre qu'il fallai que je mette des z-index, mais g beau essayer, rien à faire, j'espère franchement que vous pourrez m'aidez car je galère grave, merci d'avance.
je ne suis pas sur de m'expliquez correctement donc voici mon code html et css afin que l'on me comprenne mieu.



<body>
  <div id="contenu">
    <div id="page">
      <div id="titregraf" ><img src="images/titre_03.png" alt="" /"></div>
      <div id="fancymenu" >
      <ul>
       <li class="current" id="menu_lien1"><a href="formation.html">En Formation</a></li>
        <li id="menu_lien2"><a href="agence.html">En Agence</a></li>
        <li id="menu_lien3"><a href="tp.html">Travaux personnel</a></li>
        <li id="menu_lien4"><a>CV</a></li>
        <li id="menu_lien5"><a href="contact.html">Contact</a></li>
       </ul>
      </div>
      <div id="espacehoriz">      </div>
      <div id="cv">
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
          gfjhgkhkhvb,gc,bc,nvbb,bn;,n;,:;,:fgngchedfxvcgvsdwgvdsvgbxc
</div>
    </div>
</div>
</body>


Le CSS:

body, html  {
   margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
   background-color: #000000;
}
#contenu {
   text-align: left;
   width: 1140px;
   height: 696px;
   background-image: url(images/fond.jpg);
   background-repeat: no-repeat;
   text-align:left;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   padding-top: 0px;
   padding-right: 0;
   padding-bottom: 0px;
   padding-left: 0;
}
#page {
   height: 600px;
   width: 560px;
   padding: 0px;
   margin-left: 280px;
   margin-top: 65px;
   margin-right: 0px;
   margin-bottom: 0px;
   float: left;
}
#titregraf {
   margin: 0px;
   padding: 0px;
   float: left;
   height: 89px;
   width: 559px;
}
#espacehoriz {
   margin: 0px;
   padding: 0px;
   float: left;
   height: 10px;
   width: 560px;
}
#cv {
   background-color: #FFFFFF;
   position:relative;
   width:560px;
   height:430px;
   float: left;

}

Merci d'avance pour votre aide, je sais plus quoi faire
Modifié par briseur (05 Jul 2008 - 01:56)

briseur

4 Jul 2008 à 23:07

dans le titre c scroll externe au div, désolé

Heyoan

5 Jul 2008 à 01:04

Hello briseur Smiley smile

,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne

briseur

5 Jul 2008 à 01:57

aucun souci, désolé, je ne le savai pas, c fait, voulou!!

personne pour m'aider?

fvsch

5 Jul 2008 à 13:59

Bonjour,

Ce type de mise en page peut être assez complexe à réaliser, et demande une certaine expertise. Dans tous les cas, si tu n'as pas bien assimilé les bases de HTML et CSS (et notamment du positionnement CSS), tu n'iras pas bien loin. Si tu lis l'article Comment débuter avec XHTML et les CSS ? Que sont les standards web ?, est-ce que tout cela te semble simple, limpide et déjà assimilé? Si ce n'est pas le cas, au boulot. Smiley cligne

Si tu as déjà assimilé ces bases, je pense que tu peux nous proposer, via une page en ligne, un essai de mise en page pour que nous puissions en discuter, t'aider à corriger certaines erreurs, etc.

Tu peux aussi te contenter d'une mise en page plus classique et pas moins efficace. Il faut parfois savoir conjuguer ses ambitions et ses moyens. Smiley cligne

PS: merci de ne pas utiliser d'abréviations de type «chat» ou «SMS» sur ce forum. Les «c» pour «c'est» ou «g» pour «j'ai» seront compris par beaucoup, mais tu prends le risque que certains ne te comprennent pas, que les synthèses vocales ne soient pas capable de lire tes phrases (ce qui empêcherait un aveugle ou malvoyant de lire ton sujet), etc. Plus tu es proche du français correct, mieux tu es compris, et plus tu as de chances de recevoir de l'aide.
Modifié par Florent V. (05 Jul 2008 - 15:11)

briseur

6 Jul 2008 à 06:03

merci pourtout ces conseils, mais même si mon niveau en integration n'est pas des meilleurs, je pense en connaitre quand même un minimum en html et en css car j'ai déjà fait des sites, mais comme tu le dit toi même celui ci est assez complexe, et justement j'aimerai comprendre sa construction, car j'aimerai partir sur les mêmes bases pour mon portfolio, et puis ça ne peu être qu'enrichissant de savoir ça, on en apprend tout les jours mêmes après plusieurs années d'expériences dans certains domaines.

J'ai encore passé la journée dessus à tenté plein de choses, à faire des tests, j'ai en réussi a faire à peu près la main chose mais en trichant sur le code, ce qui ne va pas du tout, car selon la résolution, ça me changerai tout de place, donc pas bon!!!
Par contre en me basant sur la structure de css-zen-garden toujours rien à faire, là je cale grave de grave.

Si quelqu'un avait quelques instants pour m'expliquez ce serai génial, ça va faire 4 jours que je galère à chercher des solutions et faire pleins de test et j'avoue que je pête un plomb Smiley biggol

Merci d'avance à toute aide

fvsch

6 Jul 2008 à 10:00

Eh bien il faut apprendre à se servir du positionnement fixe:
http://www.openwebgroup.eu.org/articles/initiation_absolue/

Et l'utiliser à bon escient en sachant que ce ne sera pas compatible IE6, et qu'il faut envisager un basculement vers une mise en page plus classique pour ce navigateur, via un commentaire conditionnel appelant des correctifs CSS qui vont bien (cf. la FAQ).

Sujet clos

CSS et mise en forme, CSS3

Avoir scroll au div uniquement avec le navigateur HELP