Besoin d'aide à la création de Menu Horizontal

[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

[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 jai 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 saffiche différement avec des morceaux du design un peu partout.

2/ Le second problème cest ceci : Comme je viens de dire ci-dessus il saffiche bien sur « INTERNET EXPLORER » lorsquil nest pas sur le net, mais dès que je mets mon site sur le net, il saffiche plus pareille, même sous « INTERNET EXPLORER » il saffiche mal et différement. Cest 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 maider à 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 :

É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.

Modifié 4 Avril 2008 par Alipp

[Zen-Spirit]

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

.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

.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 :

*
{
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 !

[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 !

ps : un autre lien, qui explique ton problème sur cette page

Modifié 4 Avril 2008 par Alipp

[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.