28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement avec des ancres nommées

Bonjour,

J'ai actuellement un site, développé à l'origine à l'aide de frames, que je suis en train de "moderniser" à l'aide de feuilles de style. J'ai pratiquement obtenu ce que je voulais mais je rencontre un dernier petit problème agaçant que je viens soumettre ici en espérant que quelqu'un pourra me donner LA solution.

Un exemple est visible ici : http://sg.mdabout.net/exemple_css.htm

Voici l'essentiel de la feuille de style que j'utilise :

@media screen {
   BODY {
	Background-Color: #CC9900;
   }
}

@media print {
    BODY { Background-Color: None; }
} 

@media all {
   BODY {
      font-family: Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
      font-size: 80%;
      padding: 0;
      margin-left: 5px;
      z-index: 1;	/* Arrière-plan */
   }

}

/* Début des sélecteurs destinés à éviter les frames */

#site {
   position :relative;
}

/* Image d'en tête */
#vignette {
   position: fixed;
   top: 0px;
   left: 0px;
   height: 195px;
   width: 160px;
   background-color: #CC9900;
   padding-left: 10px;
   padding-top: 10px;
   overflow: visible;
   z-index: 3; /* Premier plan */
}

/* En-tête de la page */
#header {
   position: fixed;
   width: auto;
   height: 70px;
   top: 0;
   right: 0;
   bottom: auto;
   left: 160px;
   text-align: center;
   padding-left: 10px;
   margin-bottom: 5px;
   background-color: #CC9900;
   z-index: 3; /* Premier plan */
}

/* Titre de la page dans le 'header' */
.titre_page {
   font-size: 140%;
   text-align: center;
   margin-top: 5px;
   margin-bottom: 5px;
   background-color: #B87A3D;
   z-index: 3; /* Premier plan */
}

/* Menu sur la partie gauche de la page */
#menu {
   position: fixed;
   width: 160px;
   height: auto;
   top: 190px;
   right: auto;
   bottom: 100px;
   left: 0;
   background-color: #CC9900;
   z-index: 3; /* Premier plan */
   font-size: 70%;
   font: menu;
}

.menugauche {
   list-style-type: square;
   margin-left: 30px;
   padding: 0;
}

/* Spécifités du menu */

li {
   margin-bottom: 5px;
}

/* Date de modification */
#date {
   position: fixed;
   left: 5px;
   width: 160px;
   text-align: center;
   bottom: 100px;
   font-size: 70%;
   z-index: 3; /* Premier plan */
}

/* Pied de page */
#footer {
   position: fixed;
   width: 100%;
   height: 100px;
   top: auto;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #CC9900;
   z-index: 3; /* Premier plan */
}

/* Contenu de la page */
#page {
   position: absolute;
   width: auto;
   height: auto;
   top: 80px;
   left: 0px;
   right: 0px;
   overflow: auto;
   padding-left: 10%;
   padding-right: 10%;
   padding-bottom: 100px;
   text-align: justify;
   margin-top: 0px;
   margin-left: 160px;
   z-index: 2; /* Plan intermédiaire */
}
/* Fin des sélecteurs destinés à éviter les frames */

avec ici l'aperçu de ce que j'obtiens à l'écran (les CLASS:ID des <DIV> sont indiqués en vert) :
[EDIT Laurie-Anne : Image trop grande] http://www.mdabout.net/divers/sg_decoupage.jpg
LE problème se produit lorsque je veux utiliser des ancres nommées <a ref>. Par exemple, lorsque je clique sur le lien "Nouveautés", je voudrais arriver ici :
[EDIT Laurie-Anne : Image trop grande] http://www.mdabout.net/divers/sg_mauvaise-ancre_voulu.jpg

alors que j'obtiens ceci :
[EDIT Laurie-Anne : Image trop grande] http://www.mdabout.net/divers/sg_mauvaise-ancre.jpg

Pour que cela fonctionne bien pour le lien sur les News :
[EDIT Laurie-Anne : Image trop grande] http://www.mdabout.net/divers/sg_bonne_news.jpg

il a fallu que je code cela :
<hr />
<caption class="titre_table">
<a name="news"></a>
<br /><br /><br /><br />
<a href="#top">
<img src="images/top.gif" width="25" height="30" border="0" alt="top" /></a>
&nbsp;Les news
</caption>

ce qui me donne dans le cours le la page ceci qui n'est pas bon :
http://www.mdabout.net/divers/sg_bonne-ancre_coulisses.jpg

Excusez-moi si j'ai été un peu long, mais je pense que vous avez tous les éléments.

Un immense merci d'avance à celui (ou celle) qui me fournira la solution.
Modifié par Laurie-Anne (10 Aug 2009 - 08:59)
Désolé de te donner une réponse incomplète,

Mais je pense que cela vient de la position de tes éléments, ici ton header qui est en position "fixe" et qui sort donc du flux (le haut de ton texte est donc caché derrière).


Si je peux me permettre de te faire une suggestion les positions fixes ont un effet vraiment perturbant et peu esthétique, les éléments positionnés ainsi "tremblent" lorsqu'on scroll la page ! Après c'est un avis perso Smiley cligne
Fabious a écrit :
Désolé de te donner une réponse incomplète,

Merci à toi : une réponse, même incomplète, peut toujours donner des idées Smiley smile
Fabious a écrit :
Mais je pense que cela vient de la position de tes éléments, ici ton header qui est en position "fixe" et qui sort donc du flux (le haut de ton texte est donc caché derrière).

Et là, justement, tu me donnes une idée : si je regroupe le header et la page dans un même bloc fixe et que positionne la page relativement au header, je pense que je pourrai obtenir ce que je veux. Je vais faire l'essai et voir ce que ça donne.
Fabious a écrit :
Si je peux me permettre de te faire une suggestion les positions fixes ont un effet vraiment perturbant et peu esthétique, les éléments positionnés ainsi "tremblent" lorsqu'on scroll la page ! Après c'est un avis perso Smiley cligne

Là, je ne vois pas trop cette histoire de tremblement. J'ai fais le test de la page que je propose au début de mon post sur trois navigateurs différents et tout défile... ou plutôt, reste immobile, Smiley cligne sans problème.
Est-ce qu'on obtient le même résultat, avec les mêmes inconvénients, avec une position "absolute" ?
Fabious a sûrement raison.
Il faut trouver la définition de <a href="#top">. Si le lien <a href="#top"> a pour effet d'afficher la page avec l'ancre en haut de l'écran, elle se retrouve fatalement cachée par le header.
Sur #page, tu as padding-bottom: 100px; mets la même chose en haut (ou plutôt 70px et quelque, la hauteur du header).
Du coup, ramène le top:80px à top:0px. Et ça marchera peut-être.
Chez moi (FF2.0), à l'agrandissement de la page, il y a des superpositions de textes à gauche et en haut et donc c'est illisible.
C'est écrit quelque part sur Alsacreations que les position:fixed sont à réserver à quelques cas très précis.
Bon courage
Modifié par Lolololo (08 Aug 2009 - 15:00)
Merci patrac : voila une solution élégante qui répond exactement à mon problème Smiley biggrin

Seul petit bémol : il faut que je mette cette caractéristique à toutes mes ancres nommées et je serai forcé d'aller les modifier à nouveau si, pour une raison ou pour une autre, je décide de changer de présentation. L'idéal aurait été de pouvoir mettre ça dans ma feuille de style de manière à ce que je puisse modifier la valeur numérique de manière globale.

M'enfin, c'est déjà une bonne solution. Merci encore.
Sujet clos
Aller à