Bonjour, j'ai utiliser un code déjà existant pour crée mon menu déroulant que j'ai un peut mit a ma sauce.

se menu me convient parfaitement le seul problème c'est qu'il est horizontal et je l'aimerait vertical.

mon html suivi de mon css

-
Edité par LisaFollaco 19 janvier 2021 à 16:55:56

Bonjour,

désolé je vais être un peu direct, mais ton menu est truffé d'erreur.

Peux-tu nous mettre plutôt le résultat visuel final que tu souhaites obtenir ?

Ça sera plus simple pour te guider plutôt que de bricoler un code complètement erroné.

Merci de votre réponse.

Voila mon menu ressemble a ça, j’aimerai juste qui sois vertical et a gauche mais je ne trouve pas comment faire...

(quand je met ma souri sur un des onglet l'onglet s’agrandit (50% de l’écran) et les autre diminue (25% de l'écran) de bases ils sont a 33%)

Ok, et ça t'embête de le recoder de zéro ?

Il n'y a pas beaucoup de ligne de code à écrire et ça t'aidera pour ta compréhension.

Pour commencer, il faut que ton HTML soit cohérent en utilisant le balisage adapté.

En l’occurrence, on est sur un menu donc les balises ul li sont adaptées à ton besoin.

Tu peux déjà commencer par corriger ton HTML, on verra le CSS ensuite.

edit: tu utilises des images dans ton code html, tu comptes utiliser de vrais images ou c'est juste pour mettre un fond uni ?

-
Edité par -RR- 19 janvier 2021 à 15:20:31

Du coup je dois enlever les <div class> ou je peut les mettre dans mes <li> ?

Je laisse un fond uni.

Oublie ton code actuel et repart de zéro.

Il faut faire un menu avec les balises ul, li et a.

Voici un exemple de menu: https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul

Il manque les balises a, à toi de les ajouter au bon endroit.

Ok pour le fond, donc ce que je t'indique sera suffisant en html.

-
Edité par -RR- 19 janvier 2021 à 15:40:56

On y es presque.

Pas besoin de ta div au départ, ton ul suffira.

Par contre tu peux renseigner ta class="nav" sur ton ul si tu veux. Ça sera plus simple à cibler en CSS ensuite.

Pour tes balises a il y a 2 erreurs:

- les attributs doivent être séparé du nom de la balise, donc on écrit a href="###" et non ahref="###"

- tu fermes ta balise a trop tôt. Si tu veux que ton titre soit cliquable, dans ce cas ton a doit l'englober.

Je te laisse corriger et ensuite on peut passer au CSS.

Bonjour, Merci de modifier le titre de votre sujet en fonction de votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : HTML-CSS)

Liens conseillés

• Règles générales du forum

Bonjour, pour un menu déroulant va voir http://www.frogweb.fr/

    <ul class="nav">
        <li><a href="###">Accueil</a></li>
        <li><a href="###">Présentation</a></li>
        <li><a href="###">Contenu</a></li>
    </ul>

Et bien voila.

Par contre, penses à changer le titre comme te l'indique AbcAbc6.

Tu peux donc repartir de zéro dans ton CSS en suivant les étapes suivantes:

- supprimer les margins et padding inutiles (sur .nav)

- supprimer les points de tes listes (sur .nav)

- supprimer le soulignement de tes liens et appliquer une couleur à tes textes

- définir une dimension pour tes balise a pour qu'elles ressemblent à des rectangles comme ton illustration

- centrer chaque texte verticalement et horizontalement (tu auras sûrement besoin d'une balise span en plus pour appliquer un centrage vertical sur tes a)

- définir une couleur de fond sur chaque a

Voila en gros les étapes, à réaliser.

-
Edité par -RR- 19 janvier 2021 à 16:31:14

C'est noté ici:

AbcAbc6 a écrit:

Pour modifier votre titre, éditez le premier message de votre sujet.

- définir une dimension pour tes balise a pour qu'elles ressemblent à des rectangles comme ton illustration

je comprend pas vraiment comment faire

{ width:25%; }
{ width: 50%; }

ca se n'est pas bon ?

Et bien il faut cibler tes éléments pour appliquer la propriété width. Donc en l’occurrence, il faut cibler le a.

Je te conseille de reprendre cette partie du cours sur openclassrooms avant de poursuivre l'écriture de ton CSS.

Parce que le fait de copier / coller du code ne t'aidera pas à le comprendre tant qu'il te manquera certaines bases.

Bon courage. Et n'hésite pas à poster le résultat.

-
Edité par -RR- 19 janvier 2021 à 17:05:38