Partage
  • Partager sur Facebook
  • Partager sur Twitter

Entête

    10 avril 2021 à 20:03:30

    Bonjour j'aimerais pouvoir déplacer le titre principal au milieu de l'entête mais je n'y arrive pas, aidez moi svp.
    Voici une image de l'entête et le code css contenant l'entête :
    /* Le corps du code */
    
    body
    {
    	background-color: #181818;
    }
    #bloc_page
    {
    	width: 900px;
    	margin: auto;
    }
    section
    {
    	display: flex;
    }
    aside
    {
    	background-color: #3B3E41;
    	border-radius: 5px;
    	margin: auto;
    }
    
    /* Les liens et police d'ecriture */
    
    @font-face {
    font-family: 'Cheque';
    src: url('path/filename.eot');
    src: url('path/filename.eot?#iefix') format('embedded-opentype'),
    url('path/filename.woff2') format('woff2'),
    url('path/filename.woff') format('woff'),
    url('path/filename.ttf') format('truetype');
    }
    h1,h2
    {
    	font-family: 'Cheque',Comic Sans MS, Courier New
    }
    .p_article
    {
    	font-family: 'Comic Sans MS', Courier New
    }
    .p_aside
    {
    	font-family: 'Cheque', Comic Sans MS
    }
    h1, h2
    {
    	color: #16B2E7;
    }
    p 
    {
    	color: white;
    }
    a
    {
    	text-decoration: none;
    	color: #16B2E7;
    }
    a:hover
    {
        color: #181818;
        border-bottom: 2px solid #181818;
    }
    
    /* En-Tête */
    
    header
    {
    	background-color: white;
    	display: flex;
        justify-content: space-between;
        
    	border-radius: 5px;
    	padding: 5px;
    }
    #titre_principal
    {
    	font-size: 2.5em;
    }
    
    /* Navigation */
    
    nav ul
    {
    	display: flex;
    	list-style-type: none;
    	font-size: 1.8em;
    	font-family: 'Cheque'
    }
    nav li
    {
    	margin-right: 15px;
    }
    
    /* Pied de Page */
    
    footer
    {
    	display: flex;
    	justify-content: center;
    	align-items: flex-end;
    } 
    • Partager sur Facebook
    • Partager sur Twitter
      10 avril 2021 à 20:16:59

      Bonjour, Merci de modifier le titre de votre sujet pour un titre explicite de votre problématique.

      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 : Entête)

      Liens conseillés


      Bonsoir, quel est le HTML correspondant?

      text-align: center; sur le parent de l'entête  pour un centrage de son contenu.

      • Partager sur Facebook
      • Partager sur Twitter
        10 avril 2021 à 20:35:37

        Voici le HTML : 
        <!DOCTYPE html>
        <html>
             <head>
        	      <link rel="stylesheet" type="text/css" href="chevall.css">
        	      <meta charset="utf-8">
        	      <title>Chevaux</title>
             </head>
          <body>
               <div id=" bloc_page">
               <header>
               	<h1 id="titre_principal">Les Chevaux</h1>
               	<nav>
               		<ul>
               			<li><a href="#">Vente</a></li>
               			<li><a href="#">Nourriture</a></li>
               			<li><a href="#">Catégories</a></li>
               		</ul>
               	</nav>
               </header>
                       <section>
                            <p><a href="cheval.html"><img src="article 2.jpg"></a></p>                    
                	           <article>
                	           	<p class="p_article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
                            <p class="p_article">Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>
                            <p class="p_article">Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                            <p class="p_article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
                         
        
                      	       </article>
                      	                <aside>
                      	                	   <h2>Nous Contacter</h2> <br/>
                      	                	   <p class="p_aside">Notre Adresse-Mail :<a href="#"> gmail.com</a></p>
                      	                	   <p class="p_aside">Notre Numéro de Téléphone :<a href="#"> 0000000000</a></p>
                      	                	   <p class="p_aside">Twitter :<a href="#"> J</a></p>
                      	                	   <p class="p_aside">Facebook :<a href="#"> J</a></p>
                      	                </aside>
                       </section>
              <footer>
                     <figure><img src="cheval.jpeg"></figure>
                     <figure><img src="cheval.jpeg"></figure>
                     <figure><img src="cheval.jpeg"></figure>
                     <figure><img src="cheval.jpeg"></figure>
              </footer>
              </div>
          </body>
        </html>
        • Partager sur Facebook
        • Partager sur Twitter

        Entête

        × 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