5568 sujets

Sémantique web et HTML

Difficulté avec la fonction ancre

Bonjour,
Voilà mon "petit" problème : je code actuellement un site en hmtl 4 et css 2.
Voilà le schéma:
http://img11.hostingpics.net/thumbs/mini_459758schema.jpg

Ma partie rouge (1) a une propriété : 
position:fixed
, elle me sert de bannière ainsi que de menu.

Comme il ne s'agit que d'un site "1 page" tout mon contenu se trouve dans ma partie grise (2). Je me sert donc de lien ancre dans mon menu.

Mon souci est que quand je clique sur une ancre le corp remonte jusqu’à l'id mais celui ci passe en dessous de mon élément rouge (1) (normal vous me direz Smiley cligne )...
Alors voilà ma question : Comment le faire apparaître en décalé par rapport a mon haut de page ?

Je sais pas si j'ai été très claire... Mais si la réponse est non je veux bien ré-expliquer Smiley lol

Merci
Modifié par bAr67 (02 Nov 2011 - 12:02)
Hello,

Jouer avec les marges internes et/ou externes (haute et/ou basse) de la balise body, ou du conteneur 1 ou du conteneur 2 ?
Faire des essais... Smiley cligne
Oui j'ai essayé margin-top et padding-top. Mais ca ne fonctionne pas avec les ancres j'ai l' impression Smiley ohwell . Ça fonctionne pour l'index.html mais pas pour les ancres (du moins chez moi... )

Même joueur joue encore ? Smiley lol
Modifié par bAr67 (02 Nov 2011 - 13:00)
bAr67 a écrit :
Oui j'ai essayé margin-top et padding-top. Mais ca ne fonctionne pas avec les ancres j'ai l' impression Smiley ohwell .

Si ton padding est sur un conteneur qui défile dans la page, normal. Le padding marche, il est bien là... mais quelque part en haut en dehors du viewport. Smiley cligne
Le padding-top doit être placé sur l'ancre elle-même (de préférence on utilisera un attribut id sur un conteneur tel qu'un DIV ou bien sur un titre).

Comme tu ne peux pas forcément avoir un padding-top de 100 ou 200px sur tous tes titres/blocs, une solution serait d'utiliser la pseudo-classe CSS3 :target. Par exemple si tes contenus auquel tu accèdes via une navigation locale sont tous des éléments qui portent la classe "section" (et chacun aura son attribut id qui va bien), ça peut donner:
.section {
  margin: 1em 0;
  padding: 0;
}
.section:target {
  padding-top: 200px; /* hauteur de l'en-tête fixe */
}

Le problème c'est que :target ne sera pas compris par IE7 et IE8 (ok dans IE9 et autres navigateurs).
Merci, je vais voir avec cette solution oui Smiley smile . Sinon j'ai entendu parler de faire un peu de javascript qui gère bien cela et en plus améliore le rendu visuel (genre mini timer).
Mais j'avoue, mon niveau en html et css est loin d’être bon mais mon niveau en javascript est .... néant...
Si quelqu'un pourrait me mettre sur la voie je suis preneur!
bAr67 a écrit :
Si quelqu'un pourrait me mettre sur la voie

Tu peux toujours acheter un bon bouquin pour apprendre les bases de JavaScript.
(Je déconseille l'usage de scripts copié-collés par des personnes qui n'ont pas de bases en JS.)
Sujet clos
Aller à