5568 sujets

Sémantique web et HTML

Création de colones

Bonjour à tous

Je suis en train de créer des colones grâce à ce code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#wrapper {
	height:600px;
}
#cl1,#cl2,#cl3,#cl4 {
	float:left;
	width:25%;
}
#cl1 {
	background-color:#F0F;
	height:inherit !important;
}
#cl2 {
	background-color:#0FF;
	height:inherit !important;
}
#cl3 {
	background-color:#FF0;
	height:inherit !important;
}
#cl4 {
	background-color:#00F;
	height:inherit !important;
}
</style>
</head>

<body><div id="wrapper">
<div id="cl1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="cl2"></div>
<div id="cl3"></div>
<div id="cl4"></div></div>
</body>
</html>


Et je voudrais insérer les mêmes colones juste en dessous avec le texte en justifié mais je n'y arrive pas du tout (mais alors vraiment pas du tout)

Savez vous comment créer un espace entre les colones ?


http://fredoutillage.com, voilà le lien vers mon site, ce sera peut-être plus clair...

Merci d'avance,

bonne journée !
Modifié par eleanaa (23 May 2016 - 14:02)
Bonjour,

La couleur sur les colonnes, c'est bien pour les tests ? Mais dans la vraie vie cela ne vous est pas nécessaire ?

Donc, en partant de ce postulat, remplacez ce code :
#cl1,#cl2,#cl3,#cl4 {
	float:left;
	width:25%;
}
#cl1 {
	background-color:#F0F;
	height:inherit !important;
}
#cl2 {
	background-color:#0FF;
	height:inherit !important;
}
#cl3 {
	background-color:#FF0;
	height:inherit !important;
}
#cl4 {
	background-color:#00F;
	height:inherit !important;
}

Par celui-ci :
.columns > * { /* cible les items directement enfants de .columns */
	float:left;
	width:25%;
	margin-bottom:1rem; /* pour un espace en dessous */
}

Et dans votre html ajoutez la classe .columns à votre #wrapper, et supprimez tous les ID devenus inutiles. C'est tout.
Modifié par Olivier C (24 May 2016 - 07:36)
Merci beaucoup
Est ce que cela me permet d'insérer des lignes en dessous ou pas ?
Parce que je ne voulais pas utiliser de tableau ça ne rend vraiment pas bien...
Ca ne marche pas Smiley biggol Smiley sweatdrop

C'est comme ça ? 


<style type="text/css">
#wrapper {
	height:800px;

}
.columns > * { /* cible les items directement enfants de .columns */
	float:left;
	width:25%;
	margin-bottom:1rem; /* pour un espace en dessous */
}
</style>
</head>

<body><div id="wrapper">
<div class="columns"><p style="text-align:center"><a href="http://fredoutillage.com/fixation/">Fixation</a></p> 
<p style="text-align:justify">Retrouvez tout les outils nécessaires à la fixation pour une utilisation adaptée à vos besoin. Une large gamme de produits est à votre disposition pour répondre au mieux à vos attentes.</p></div>
Non. La classe doit être sur l'élément comportant l'ID #wrapper :
<div id="wrapper" class="columns">
Sujet clos
Aller à