Partage
  • Partager sur Facebook
  • Partager sur Twitter

problème css image et menu

menu css

Sujet résolu
    2 juillet 2018 à 7:20:50

    bonjour,j'ai passé toute la nuit sur un problème que je ne comprend pas.le menu style.css ne sont pas sur mes bouton je vous met mon code.
    body
    {
    background: url('images/image_de_fond.jpg');
    	background-size: cover;
    	background-repeat: no-repeat ;
    	font-family:arial;
    	font-size: 16px;
    	
    }
    
    #navigation li {
    width:100%;
    height:100%;
    list-style:none;
    padding:90px;
    background-image: url('images/menu.png');
    display: inline;
     
    
    }
    
    ul{
    	margin-top:10%;
    	
    }
    
    
    #bonjour{
    	margin-top:10%;
    	background-color:white;
    	margin-right:100px;
    	padding:90px;
    	 opacity: 0.5;
    	 border: 2px solid;
    	border-radius: 50px 20px;
    }
    
    
    
    
    #supleant
    {
    margin-top:10%;
    	background-color:white;
    	margin-right:10px;
    	padding:90px;
    	 opacity: 0.5;
    	 border: 2px solid;
    	border-radius: 50px 20px;
    }
    footer{
    	color:black;
    	font-color:white;
    	
    }
    

    voila pour l'html il y a sa

    <html>
    <head><title>romain</title>
    <meta charset=UTF-8>
    <link rel="stylesheet" media="screen" type="text/css" title="index" href="style.css" /></head>
     
    <body>
    
    <html>
    
    <nav>
        <ul id="navigation">
          <li><a href="#" title="acceuil">accuiel</a></li>
          <li><a href="#" title="3D">3D</a></li>
          <li><a href="#" title="html">HTML</a></li>
          <li><a href="#" title="dessin">dessin</a></li>
          <li><a href="#" title="contact">contact</a></li>
        </ul>
    </nav>
    <section>
    <div id="bonjour">
    
        <p>L’AUTONOMIE est une de mes principales qualités : j’aime beaucoup mener des projets d’un
        bout à l’autre sans passer par de nombreux intermédiaires. J’aime me former en continu
        aux nouvelles technologies du web ou aux nouveaux outils afin de garder cette autonomie.
        bon par court sur mon site web!!</p>
        </div>
       
      <footer>
    
                <p>Copyright Romain teulade- Tous droits réservés<br />
    </footer>
    
               
       
       
    <body>
    </html>





    -
    Edité par RomAin46 18 juillet 2018 à 19:40:52

    • Partager sur Facebook
    • Partager sur Twitter
      2 juillet 2018 à 8:02:50

      Bonjour,

      Merci d'utiliser la mise en forme de code Image

      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 Image 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: c;">Votre code ici</pre>.

      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 : css)

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        2 juillet 2018 à 9:48:09

        Bonjour,

        Quelle est ta question ?

        RomAin46 a écrit:

        le menu style.css ne sont pas sur mes bouton

        -
        Edité par RomAin46 il y a environ 1 heure

        Je comprends pas cette phrase... Peut-être pourrais-tu mettre une capture d'écran du résultat et une dessin de ce que tu voudrais faire ?

        • Partager sur Facebook
        • Partager sur Twitter
          2 juillet 2018 à 10:51:39

          Pas sûre d'avoir compris non plus, j'ai déduis que le style des liens de ta nav ne s'affichait pas, mais j'ai copié ton code, et, à part l'image que je n'ai pas, tout y est :$
          • Partager sur Facebook
          • Partager sur Twitter
          Google répond à tout, PHP Manual sait (presque) tout, StackOverflow envisage tout !
            2 juillet 2018 à 11:08:19

            Salut,

            Où est ton doctype ?

            ligne 8 : <html> en trop
            ligne 19 : <section> pas fermée
            ligne 30 : <p> pas fermé

            La bonne orthographe c'est : ACCUEIL

            Côté CSS :
            - quelle est l'idée de mettre les <li> en inline et leur donner un width:100% ?
            - Et un height:100%, 100% de quoi ? C'est d'autant plus inutile puisque tu les mets inline.
            - N'utilise pas des % sur les margins.
            - font-color ça n'existe pas.

            Pour ton problème, pareil que Caroline. En dehors de l'image de background, les styles s'appliquent.

            • Partager sur Facebook
            • Partager sur Twitter
            Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
              2 juillet 2018 à 12:31:25

              + <body> qui ne ferme pas (2x balise ouvrante)
              • Partager sur Facebook
              • Partager sur Twitter
              Google répond à tout, PHP Manual sait (presque) tout, StackOverflow envisage tout !
                18 juillet 2018 à 18:42:25

                bonjour je suis sur mon menu il se répète au point des texture. je cherche a centrée mon menu je vous redonne le code html est css

                <html>
                <head><title>romain</title>
                <meta charset=UTF-8>
                <link rel="stylesheet" media="screen" type="text/css" title="index" href="style.css" /></head>
                 
                <body>
                
                <html>
                
                	<ul id="navigation">
                	  <li><a href="accuiel" title="aller à la section 1">accuiel</a></li>
                	  <li><a href="3D" title="aller à la section 2">3D</a></li>
                	  <li><a href="plaquette web" title="aller à la section 3">HTML</a></li>
                	  <li><a href="dessin" title="aller à la section 4">dessin</a></li>
                	  <li><a href="photo" title="aller à la section 5">photo</a></li>
                	</ul>
                
                
                <div id="bonjour">
                
                	<p>L’AUTONOMIE est une de mes principales qualités : j’aime beaucoup mener des projets d’un
                	bout à l’autre sans passer par de nombreux intermédiaires. J’aime me former en continu 
                	aux nouvelles technologies du web ou aux nouveaux outils afin de garder cette autonomie.
                	bon par court sur mon site web!!</p>
                	</div>
                
                  <footer>
                
                            <p>Copyright Romain teulade- Tous droits réservés<br />
                </footer>
                <body>
                </html>
                        	
                	

                pour mon css je suis sur une image qui ne devrais pas se répété  avec un menu centrer est mon html au centre de l'image.ma question est comment met on l'image sans quelle se répète? merci d'avance .

                CSS

                body
                {
                background: url('images/image_de_fond.jpg');
                	background-size: cover;
                	background-repeat: no-repeat ;
                	font-family:arial;
                	font-size: 16px;
                	
                	
                }
                
                #navigation li {
                
                padding:150px;
                background-image: url('images/menu.png');
                display: inline;
                float:center;
                }
                
                
                ul{
                height:100px;
                margin-top:130px;
                text-decoration: none;
                
                }
                
                #bonjour{
                margin-top:130px;
                background-color:white;	
                padding:150px;
                opacity: 0.5;
                border-radius: 50px;
                
                }
                footer {
                position: relative;
                clear: both;
                font-size: 0.8em;
                padding : 10px 20px ;
                border-top: 1px solid gray;
                }
                
                a { color: black; /*par exemple, pour le comportement standart*/ 
                } a:hover 
                { color: red; /* pour le passage de la souris*/ 
                } 
                
                


                je vous donne l'image que j'ai fais

                http://www.image-heberg.fr/files/15319335131728000237.png

                -
                Edité par RomAin46 18 juillet 2018 à 19:07:57

                • Partager sur Facebook
                • Partager sur Twitter
                  18 juillet 2018 à 18:52:57

                  Bonjour, merci de modifier le titre de ce sujet comme demandé par Lamecarlate, dans le cas contraire je serais contrains de ferme ce sujet.

                  Un document html commence par un doctype soit

                  <!DOCTYPE HTML>
                  <html lang="fr">

                  Ensuite passer votre code aux validateur html et css pour voir et corriger vos erreurs

                  Si après validation du code vous avez encore des difficultés poster à nouveau votre code valide cette fois.

                  PS : avez vous suivi le cours HTML/CSS de ce site?

                  • Partager sur Facebook
                  • Partager sur Twitter
                    18 juillet 2018 à 20:48:38

                    effectivement il y avait des erreurs au niveaux de la norme W3C.mais cela ne change rien car j'ai toujour mon menu en dessous de mes image je vous est fais une archive pour voir ou sont les défaut de mon site web. merci de votre attention a ce qui me répondrons.
                    <a href="http://www.k-upload.fr/afficher-fichier-2018-07-18-15e6c594asiteweb.rar.html" target="_blank" title="K-Upload - Hébergeur de fichier gratuit"><img src="http://file.k-upload.com/k-upload_fr.png" border="0" alt="Hébergez vos fichiers sur K-upload" /></a>


                    -
                    Edité par RomAin46 18 juillet 2018 à 20:50:09

                    • Partager sur Facebook
                    • Partager sur Twitter
                      18 juillet 2018 à 22:24:24

                      Bien, ne pas hésiter à entourer les éléments d'une bordure de couleur pour voir l'espace qu'il occupe.

                      Vous devez jouer sur les positionnement des liens en absolut tout en indiquent les <li> en position relative.

                      J'ai donner une largeur aux <li>, un défaut visuel était que l'image était répétée dans la liste. Solution 1) donner une dimension aux block contenant l'image de fond, solution 2) ne pas répété l'image de fond;

                      Attention que vos visiteurs ne possède pas une largeur d'écran comme vous, il faudra prévoir le cas ou la dimension de l'écran et plus faible, ce qui placerait le menu sur deux lignes. Avec la hauteur de l'image de fond que vous avez choisis (245px) cela  fait une hauteur de  490px.

                      Voici votre code corrigé, et comment je le vois sur mon écran.

                      • Partager sur Facebook
                      • Partager sur Twitter
                        19 juillet 2018 à 7:20:52

                        merci je continue mon site il me reste a voir comment l'agencer dans une autre résolution.
                        • Partager sur Facebook
                        • Partager sur Twitter

                        problème css image et menu

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur
                        • Markdown