Partage

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

noopy360

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

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

CyrilBuch

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.

noopy360

23 avril 2019 à 14:28:43

Montre nous ton code HTML et CSS pense à utiliser le bouton </>

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

CyrilBuch

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>

noopy360

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

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

CyrilBuch

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

NicolasMarafetti

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.

CyrilBuch

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%;
}

exen

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.

Compos sui.

CyrilBuch

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