Version complète: sur le forum Webmaster Hub : Besoin d'aide à la création de Menu Horizontal
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Zen-Spirit
Bonjour à tous.
Voilà, j'ai besoin de votre aide à la création d'un Menu un peu simple ou un peu spécial.
Je souhaite créer un MENU HORIZONTAL à peu près comme ceci :
En fait voilà, je voudrai créer un MENU Horizontal avec lors du passage de la souris sur un onglet, une ligne horizontale contenant des liens apparaissent juste en dessous sur une ligne.
Un peu comme ceci mais en plus travailler : http://css.developpez.com/galerie/preview/...ntalderoulant3/
Mais la difficulté c'est que veux donner une autre apparence à mon Menu et donc de coupler çà ( Je vous laisse voir ) :
LIGNE du MENU PRINCIPALE : http://css.developpez.com/galerie/preview/...lets/page1.html
Et Les sous-Menus qui s'affichent sur une seule ligne en dessous lors du passage de la souris sur un des onglets doivent ressembler à çà :
http://css.developpez.com/tutoriels/menu-o...cssminitabs.htm
Merci de m'aider et de me diriger afin de réussir à coupler çà, car vous en conviendrez que c'est vraiment plus beau.
Merci encore.
sopo
Bonjour,

je ne vois pas où se trouve la difficulté ? Il suffit de reprendre le code du menu déroulant et d'y appliquer les styles CSS qui vont bien.

Évidemment, ça nécessite une connaissance minimale des feuilles de style ... si tu es débutants, tu trouveras les ressources nécessaires dans ce sujet.

Bon courage wink.gif
Zen-Spirit
Bonjour à tous.
Merci pour le lien sopo.
J'ai réussi à peu près à faire ce Menu, mais il est pas fini, et j'y travaille encore dessus.
Cependant, voilà, je suis entrain de coder mon site et j’ai trois soucis.
1/ Lorsque je clique deux fois rapide sur le fichier index dans « Mes Documents », il ‘saffiche très bien, exactement comme je veux dans « INTERNET EXPORER ».
Par contre (toujours dans mes documents) lorsque que je clique deux fois rapide sur le fichier index sous « FIREFOX MOZILLA », il s’affiche différement avec des morceaux du design un peu partout.
2/ Le second problème c’est ceci : Comme je viens de dire ci-dessus il s’affiche bien sur « INTERNET EXPLORER » lorsqu’il n’est pas sur le net, mais dès que je mets mon site sur le net, il s’affiche plus pareille, même sous « INTERNET EXPLORER » il s’affiche mal et différement. C’est tout de même bizarre.

3/ Je vous laisse le lien de mon site pour voir ce que çà donne sous les 2 navigateurs, en sacahnt que même sous "INTERNET EXPLORER", il s'affiche pas pareil lorsqu'il est sur le net ou pas et aussi m’aider à corriger çà.
Visiter mon site
Mon fichier CSS se nomme : designs.css

MERCI
Alipp
Bonjour,

Comme tu héberges ton site sur ifrance, le code généré pour l'affichage de ta page contient des éléments avant la déclaration de ton doctype, donc l'interprétation par ie est modifié car il passe en mode Quirks (voir ici)

De plus, ton doctype déclare du xhtml strict... commence par du transitionnal, plus souple sur le respect des normes.

Enfin, il est "normal" que le rendu sous ie et ff soit différent, les 2 navigateurs n'interprettant pas le code de la même façon (et le respect des standard non plus).
Je me permettrais de citer sopo :
CITATION(sopo @ mardi 1 avril 2008 à 16:50) *
Évidemment, ça nécessite une connaissance minimale des feuilles de style ... si tu es débutants, tu trouveras les ressources nécessaires dans ce sujet.


Bon courage à toi.
Zen-Spirit
CITATION(Alipp @ vendredi 4 avril 2008 à 10:42) *
Bonjour,

Comme tu héberges ton site sur ifrance, le code généré pour l'affichage de ta page contient des éléments avant la déclaration de ton doctype, donc l'interprétation par ie est modifié car il passe en mode Quirks (voir ici)

De plus, ton doctype déclare du xhtml strict... commence par du transitionnal, plus souple sur le respect des normes.

Enfin, il est "normal" que le rendu sous ie et ff soit différent, les 2 navigateurs n'interprettant pas le code de la même façon (et le respect des standard non plus).
Je me permettrais de citer sopo :


Bon courage à toi.

Bonjour et merci d'avoir répondu.
Merci de vouloir m'aider.
Sur tes conseilles, je suis passé du mode "STRIC" au mode "TRANSITIONNAL", mais çà n'a rien changé à mon problème.
Du coup, je recode tout et je suis entrain de tout recommencer à zéro.
J'ai cependant quelques petites questions.
1/ est qu'une balise "class" peut contenir une balise "id" ?


2/ Et je ne comprends pas comment résoudre le problème suivant :
Regarder mon site : Par ici sous INTERNET EXPLORER et sous FIREFOX
dans le cadre pour photo qui se trouve dans la partie "corps", il y a un décalage. Et je n'arrive pas à résoudre ce problème. Quelqu'un pourrait'il m'aider à résoudre ce problème ?
Le décalage se fait entre
CODE
.cadre-photo-haut-blanc
{
   width: 350px;
   height: 44px;
   margin-left: 23px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 0px;
   background-image: url("images/corps/box-photo-blanc-haut.jpg");
   background-repeat: no-repeat;
}

et
CODE
.cadre-photo-centre-blanc
  {
   width: 350px;
   height: 340px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 23px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 0px;
   background-image: url("images/corps/box-photo-blanc-centre.jpg");
   background-repeat: repeat-y;
}

Merci
Zen-Spirit
Merci c'est bon, pour l'expacement, j'ai réusi, il fallait juste mettre tout à plat :
CODE
*
{
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Arial, serif, sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: justify;
}

l'espace n'y est plus.
Merci.
Alipp
Il est normal que tu ne comprennes pas comment résoudre ton problème... Il te manque certaines notions de base.

Vas voir cette page, tu y trouveras plein de choses interressantes, simples, et bien expliquées.

Bonne lecture et bon courage ! smile.gif
Zen-Spirit
Merci de ton lien Alipp !
Je ne sais combien de fois on m'a donné ce lien, et l'avoir feuilleté et lu, je ne sais combien de fois j'ai été confronté à ce problème de décalage. Surtout que ce n'est pas par paresse, car dans mon navigateur, j'ai pleins de liens d'ouverts pour trouver cette solution sur internet.
Je ne trouve pas cette solution de décalage vers la droite.
Est ce que tu pourrais au moins me dire d'où vient le problème avec ce décalage ci, qui est un autre problème après avoir résolu le décalage du post au dessus.
Il s'agit du décalage du cadre noir, qui s'affiche correctement sous FIREFOX mais pas sous IEXPLORER. Sous ce dernier il déborde.
Je te laisse voir : Ici
Merci.
Alipp
Tu n'as pas dû approfondir ta lecture, car la notion de flottant n'est visiblement pas maîtrisée au vu de ton css...
Ton problème vient de tes margin et padding.

A toi de creuser ! wink.gif

ps : un autre lien, qui explique ton problème sur cette page
Zen-Spirit
Alipp, là je coince vraiment, je comprends qu'avec IEXPLORER, il faut prendre en compte 30px en plus ou en moins, mais je ne vois pas comment modifier mon code.
Et aussi, par rapport ton lien, je suis même passé au transitionnal, mais rien n'y fait.
Là, j'ai vraiment besoin d'aide car j'ai l'impression que même si je vais passer la nuit sur problème, je ne vais jamais trouvé la solution. nonono.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.