css [TUTO] Box côte à côte

le 17 novembre 2017

Hello,

"Comment mettre 2 box côte à côte?"

Si je vous fais ce tutoriel c'est parce que je me suis moi-même déjà posé cette question et j'ai vu qu'il y avait plusieurs manières et que certaines étaient déconseiller et tout le tralala…

C'est pourquoi j'ai voulu en parler aujourd'hui pour améliorer l'efficacité de vos futurs design ou peut-être répondre à certains questionnements. Commençons!

ÉTAPE 1 - La base HTML

Je vais vous poser la structure de base d'une page HTML (non relié à une page CSS) afin que vous puissiez mieux suivre ce tutoriel avec moi.

Citation


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Titre que vous voulez (pour ma part: "Side by Side")</title>
</head>

<style type="text/css">



</style>

<body>



</body>
</html>

Je vous épargne les explications, parce que je suppose que si vous suivez un tutoriel CSS c'est que vous connaissez déjà les bases en HTML.

On a fini avec la base HTML on va mettre en place le contenu de la page qu'on veux voir s'afficher, le contenu s'écrit toujours dans les balises <body></body>. Voici celui que j'ai fait pour le tutoriel:

Citation


<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div>
	<div class="droite">
		Contenu de droite
	</div>

</div>
</body>

La div avec la classe "contenu" = Les limites, c'est-à-dire que les informations (textes, images, liens, etc…) se trouveront entre ces limites.

La div avec la classe "gauche" = Les informations qui s'afficheront à gauche dans la box de contenu.

La div avec la classe "droite" = Les informations qui s'afficheront à droite dans la box de contenu.

ÉTAPE 2 - La (ma) base CSS

Vous vous demandez sûrement pourquoi j'ai mis "(ma)" pour l'étape 2. Et bien c'est parce que on a tous notre propre base CSS, certaines peuvent se ressembler et je ne sais pas si il y vraiment une base générale. dans la balise <style type="text/css"></style> vous mettrez donc:

Citation


<style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Roboto');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	vertical-align: top;
}
body {
	font-family: 'Roboto', sans-serif;
}
</style>

L'étoile représente toutes les balises, ce qui signifie que le style accorder à * s'affectera à toutes les balises. Si j'ai mis le font-family dans le body {}, c'est parce que * a des critères absolus, c'est-à-dire qu'on ne peut pas lui changer sa valeur en la modifiant sur une autre balise. Pour le font-family, je vous invite à choisir celle que vous voulez en allant sur

Pour avoir accès à ce lien, merci de vous connecter.

ou un autre site si vous en avez de meilleurs.

Il est important que vous mettiez le box-sizing: border-box; car il évitera que les box soient déformer par un padding ou autre.

Il est important que vous mettiez le vertical-align: top; car il évitera qu'il y ai un décalage vertical entre 2 box, elles resteront alignées.

Les styles 0 et none c'est une question d’esthétique.

On a fini avec les bases on va donc poser le style pour notre contenu. Ce qu'on veut c'est pouvoir mettre 2 box côte à côte et afficher du contenu sur la gauche et sur la droite. Dans ce cas, en dessous de notre style pour le body {} on va ajouter:

Citation


div {
	border-style: solid;
	border-width: 1px;
}

.contenu {
	width: 1000px;
	margin: auto;
	margin-top: 10px;
	border-color: black;
	padding: 5px;
}

.contenu .gauche,
.contenu .droite {
	width: 50%;
	display: inline-block;
}

.contenu .gauche {
	border-color: blue;
}
.contenu .droite {
	border-color: red;
}

Le style de la div nous affichera les différentes box qu'on aura créer, on les accordera des couleurs différentes (noir pour le contenu, bleu pour la box de gauche et rouge pour la box de droite).

Le style du contenu fera donc 1000px de large et sera centrer sur notre page grâce au margin: auto;.

le padding nous servira à mieux afficher les couleurs des box que le contient notre div.contenu.

On donne à notre div.gauche et notre div.droite une largeur de 50%; afin qu'elles prennent toutes les deux la moitié de notre div.contenu et de faire un affichage équilibrer.

On donne à notre div.gauche et notre div.droite un display: inline-block; pour qu'elles se posent l'une à côté de l'autre.

ÉTAPE 3 - Étude

Rassurez-vous, quand je dis étude je ne parle pas d'apprendre des choses marquer dans un cahier ou quoi que ce sois. Non je veux plutôt parler de l'étude de notre page, voir ce qu'il se passe avec tout ce qu'on a fait.

Pour avoir accès à ce lien, merci de vous connecter.

Premièrement on constate que les box s'affichent bien

Le problème c'est que les box droite et gauche ne sont pas côte à côte, pourquoi?

Si on diminue la largueur de ces box, on remplace donc width: 50%; par width: 100px; -

Pour avoir accès à ce lien, merci de vous connecter.

On constate que nos box sont bien côte à côte mais que celles-ci sont espacées, ajoutons encore une div.gauche pour voir. Ce qui vous donnera:

Citation


<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div>
	<div class="droite">
		Contenu de droite
	</div>
	<div class="gauche">
		Contenu de gauche
	</div>

</div>
</body>

Pour avoir accès à ce lien, merci de vous connecter.

On constate donc que les box mettent automatique un espace, alors comment les supprimés ces espaces?

Pour se faire on va juste retirer l'espace entre la fin de la div.gauche et le début de la div.droite, comme ceci:

Citation


<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div><div class="droite">
		Contenu de droite
	</div>

</div>
</body>

Pour avoir accès à ce lien, merci de vous connecter.

Bingo! plus d'espaces indésirables, ils nous restent plus qu'à remettre un widht: 50%; et hop. -

Pour avoir accès à ce lien, merci de vous connecter.

On a donc 2 box côte à côte où on pourra afficher différentes informations, on peut aussi disproportionner les largeurs des box, en retirant la largeur générale des div.gauche et div.droite et en attribuant la valeur de la largeur individuellement, comme ceci:

Pour avoir accès à ce lien, merci de vous connecter.

Citation


.contenu .gauche,
.contenu .droite {
	display: inline-block;
}

.contenu .gauche {
	width: 30%;
	border-color: blue;
}
.contenu .droite {
	width: 70%;
	border-color: red;
}

ÉTAPE 4 - Alternatives

Pour supprimer les espaces indésirables entre 2 box en display: inline-block; tout en gardant la structure de votre code HTML afin qu'il soi plus facile à lire il y a d'autre méthode mais celle-ci est la plus simple.

Vous pouvez aussi ne pas utiliser les display: inline-block; et créer le même effet avec des float: left; mais cette méthode est fortement déconseiller, voyer par vous-même:

Pour avoir accès à ce lien, merci de vous connecter.

Si vous voulez essayer:

Citation


.contenu .gauche,
.contenu .droite {
	float: left;
	width: 50%;
}

.contenu .gauche {
	border-color: blue;
}
.contenu .droite {
	border-color: red;
}

On pourrais essayer avec des floats de par et d'autre mais cela ne changera toujours rien:

Pour avoir accès à ce lien, merci de vous connecter.

Si vous voulez essayer:

Citation


.contenu .gauche,
.contenu .droite {
	width: 50%;
}

.contenu .gauche {
	float: left;
	border-color: blue;
}
.contenu .droite {
	float: right;
	border-color: red;
}

Voilà la méthode du display: inline-block; avec la suppression entre la div supérieur et la div inférieur reste la plus efficace à mes yeux, libre à vous de faire ce que vous voulez.

C'est tout pour ce tutoriel, j'espère qu'il vous aura plu et que sa aidera pour répondre à certaines questions.

Peace.

le 17 novembre 2017

Thank you

le 17 novembre 2017

@Calypso De nada c:

le 16 juillet 2019

Salut Kamobbah ,
Ton sujet a été déplacé pour une des deux raisons suivantes :

- Ta demande a été résolue.

- Ton sujet se trouvait dans la mauvaise catégorie.

Ceci est un message automatique.

Connexion

css [TUTO] Box côte à côte

Messages recommandés

Kamobbah 35

Lien à poster

Partager sur d’autres sites

Nagasaki 117

Lien à poster

Partager sur d’autres sites

Kamobbah 35

Lien à poster

Partager sur d’autres sites

Narzo 759

Lien à poster

Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Créer un compte

Se connecter

Forum

Activité

Abonnements

Divers

Support