Partage
  • Partager sur Facebook
  • Partager sur Twitter

Display: inline-block / block

Sujet résolu
    23 avril 2019 à 12:41:27

    bonjour, 

    je suis actuellement Etudiant dans le développement et j’ai un petit soucis pour un exercice concernant un page d’un site web. 

    Mon container est de 1840px

    et je voudrais mettre <section> à gauche et <inside> à droite. Sachant que la partie section est de 70% et celle de inside a 30%. 

    Comment puis-je faire ? 

    Et comment intégrer des marges intérieur et extérieur tout en respectant les dimensions ? 

    Merci beaucoup, 

    Cyril 

    • Partager sur Facebook
    • Partager sur Twitter
      23 avril 2019 à 13:41:01

      Bonjour, tu as beaucoup de façon de faire ça :

      • Flexbox
      • Grid
      • Display:inline-block;
      • Le float
      • L'utilisation d'un framework

      Moi, personnellement j'utliserai l'outils flexbox...

      Voilà si tu as la réponse à ton problème pense à mettre en résolu, merci !!

      • Partager sur Facebook
      • Partager sur Twitter
        23 avril 2019 à 14:23:52

        noopy360 a écrit:

        Bonjour, tu as beaucoup de façon de faire ça :

        • Flexbox
        • Grid
        • Display:inline-block;
        • Le float
        • L'utilisation d'un framework

        Moi, personnellement j'utliserai l'outils flexbox...

        Voilà si tu as la réponse à ton problème pense à mettre en résolu, merci !!

        Oui, mais pour mon exercice j’ai pas le droit d’utiliser flexbox. Je dois utilise le display inline-block mais je comprends pas pourquoi ça ne fonctionne pas ... 

        merci de ta réponse. 

        • Partager sur Facebook
        • Partager sur Twitter
          23 avril 2019 à 16:08:13

          <section class="colonne-gauche">
          			<article class="article1">
          				<div class="forme">
          					<div class="logo"></div>
          				</div>
          				<div class="forme">
          					<h2>Globule globe</h2>
          				</div>
          				<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Vivamus a turpis urna. Donec risus orci, suscipit id metus vel, rhoncus dictum magna. Donec in arcu faucibus, vestibulum tortor a, molestie eros. Suspendisse aliquet accumsan arcu at molestie. Nam et lacinia dolor, id tincidunt felis. Quisque est mauris, vestibulum tempor nibh a, egestas rutrum tortor.</em></p>
          			</article>
          			<article class="article2">
          				<div class="forme">
          					<div class="logo"></div>
          				</div>
          				<div class="forme">
          					<h2>Globule pas globe</h2>
          				</div>
          				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate.</p><br>
          				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan.</p>
                                 </article>
          
          <section class="colonne-droite">
          			<aside class="article4">
          				<figure>
          					<img src="img/pasglobe.jpg" alt="pasglobe">
          				</figure>
          				<h3>Pas globe</h3>
          				<p>Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate.</p>
          			</aside>
          			<aside class="article5">
          				<figure>
          					<img src="img/pasblog.jpg" alt="pasblog">
          				</figure>
          				<h3>Pas blog</h3>
          				<p>Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          			</aside>
          		</section>
          • Partager sur Facebook
          • Partager sur Twitter
            23 avril 2019 à 17:57:25

            C'est extrêmement désagréable les personnes qui demandent de l'aide mais qui ne lise que la moitié des réponses...

            Je t'ai demandé de donner le html et le css merci

            • Partager sur Facebook
            • Partager sur Twitter
              23 avril 2019 à 18:41:43

              noopy360 a écrit:

              C'est extrêmement désagréable les personnes qui demandent de l'aide mais qui ne lise que la moitié des réponses...

              Je t'ai demandé de donner le html et le css merci


              Oui je suis désolé je suis nouveau. Je pensais pouvoir envoyer en 2 messages mais après le premier çà m'a bloqué.
              • Partager sur Facebook
              • Partager sur Twitter
                23 avril 2019 à 18:53:41

                Bonjour Cyril,

                Premièrement, dans le HTML que tu as envoyé, il y a une erreur : tu ne refermes pas la première section. Pour trouver cette erreur, en étant sur google chrome, j'ai utiliser l'inspecteur (touche F12).

                Ensuite, comme l'a dit noopy, je préfère aussi l'utilisation de flexbox (dont tu n'as pas le droit pour cet exercice).

                Pour cet exercice, je te propose ce code css :

                .colonne-gauche{
                    display: inline-block;
                    width: 69%;
                }
                
                .colonne-droite{
                    display: inline-block;
                    width: 30%;
                }

                Pourquoi 69% ? He bien quand on utilise le inline-block, en mettant 70% et 30% ça va à la ligne, il faut donc malheureusement faire cette petite erreur volontaire pour que ça fonctionne.

                Bon courage pour la suite.

                • Partager sur Facebook
                • Partager sur Twitter
                  23 avril 2019 à 18:53:52

                  noopy360 a écrit:

                  C'est extrêmement désagréable les personnes qui demandent de l'aide mais qui ne lise que la moitié des réponses...

                  Je t'ai demandé de donner le html et le css merci


                  <!DOCTYPE html>
                  <html lang="fr">
                  <head>
                  	<meta charset="utf-8">
                  	<link rel="stylesheet" type="text/css" href="styles.css">
                  	<title>Exercice 1</title>
                  </head>
                  <body class="degrade">
                  	<div id="wrapper">
                  		<div class="inlineblock">
                  		<section class="colonne-gauche">
                  			<article class="article1">
                  				<div class="forme">
                  					<div class="logo"></div>
                  				</div>
                  				<div class="forme">
                  					<h2>Globule globe</h2>
                  				</div>
                  				<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Vivamus a turpis urna. Donec risus orci, suscipit id metus vel, rhoncus dictum magna. Donec in arcu faucibus, vestibulum tortor a, molestie eros. Suspendisse aliquet accumsan arcu at molestie. Nam et lacinia dolor, id tincidunt felis. Quisque est mauris, vestibulum tempor nibh a, egestas rutrum tortor.</em></p>
                  			</article>
                  			<article class="article2">
                  				<div class="forme">
                  					<div class="logo"></div>
                  				</div>
                  				<div class="forme">
                  					<h2>Globule pas globe</h2>
                  				</div>
                  				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate.</p><br>
                  				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan.</p><br>
                  				<figure>
                  					<img src="img/globule.jpg" alt="globule">
                  					<figcaption>Gluon du Globule</figcaption>
                  				</figure>
                  				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate.</p>
                  			</article>
                  			<article class="article3">
                  				<div class="forme">
                  					<div class="logo"></div>
                  				</div>
                  				<div class="forme">
                  					<h2>Tip globule au top du blog</h2>
                  				</div>
                  				<div class="colonne">
                  					<div class="bloc">
                  						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                  					</div>
                  					<div class="bloc">
                  						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit neque sit amet diam sollicitudin, non luctus nibh rhoncus. Vestibulum faucibus gravida sapien non mattis. Integer nibh libero, tincidunt eu ullamcorper sit amet, faucibus id risus. Pellentesque fringilla odio ut libero sagittis, id suscipit lorem tempus. Morbi molestie bibendum odio et accumsan. Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  					</div>
                  				</div>
                  			</article>
                  		</section>
                  	
                  		<section class="colonne-droite">
                  			<aside class="article4">
                  				<figure>
                  					<img src="img/pasglobe.jpg" alt="pasglobe">
                  				</figure>
                  				<h3>Pas globe</h3>
                  				<p>Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate.</p>
                  			</aside>
                  			<aside class="article5">
                  				<figure>
                  					<img src="img/pasblog.jpg" alt="pasblog">
                  				</figure>
                  				<h3>Pas blog</h3>
                  				<p>Vestibulum arcu ipsum, ornare eu pulvinar non, efficitur sed velit. Suspendisse potenti. Nunc convallis semper elit quis cursus. Fusce laoreet ac est at vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  			</aside>
                  		</section>
                  	</div>
                  	
                  </div>
                  </body>
                  </html>
                  .inlineblock {
                  	display: inline-block;
                  }
                  
                  .colonne-gauche {
                  	width: 60%;
                  }
                  
                  .colonne-droite {
                  	width: 30%;
                  }



                  • Partager sur Facebook
                  • Partager sur Twitter
                    23 avril 2019 à 20:25:38

                    Bonjour alors ce que tu peut faire pour commencer c'est de coller sur tes body, .colonne-gauche, colonne-droite un

                     margin:0;
                     padding: 0;



                    (ca va te permettre de passer à 100% sinon tes marge et ton padding sur les élément t'en empêcheront.)

                    ton .inlineblock tu le passe en

                    display:block;

                    tu va appliquer sur chaque colonnes un 

                    display:inline-block;


                    et pour que ce sois sympa tu dit à la cellule de droite de flotter à droite avec un

                    float:right;

                    Et à mon avis ca devrais le faire.

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Compos sui.

                      23 avril 2019 à 21:53:09

                      NicolasMarafetti a écrit:

                      Bonjour Cyril,

                      Premièrement, dans le HTML que tu as envoyé, il y a une erreur : tu ne refermes pas la première section. Pour trouver cette erreur, en étant sur google chrome, j'ai utiliser l'inspecteur (touche F12).

                      Ensuite, comme l'a dit noopy, je préfère aussi l'utilisation de flexbox (dont tu n'as pas le droit pour cet exercice).

                      Pour cet exercice, je te propose ce code css :

                      .colonne-gauche{
                          display: inline-block;
                          width: 69%;
                      }
                      
                      .colonne-droite{
                          display: inline-block;
                          width: 30%;
                      }

                      Pourquoi 69% ? He bien quand on utilise le inline-block, en mettant 70% et 30% ça va à la ligne, il faut donc malheureusement faire cette petite erreur volontaire pour que ça fonctionne.

                      Bon courage pour la suite.

                      Top, j'ai réussi. Merci beaucoup pour votre aide.

                      en vous souhaitant une bonne soirée.

                      Cyril





                      • Partager sur Facebook
                      • Partager sur Twitter

                      Display: inline-block / block

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      • Editeur
                      • Markdown