27819 sujets

CSS et mise en forme, CSS3

Bonjour !

Je dois faire une page avec des catégories qui présentent les services d'une entreprise. La mise en forme est la suivante :
upload/55601-imgExplica.png

Sur la première catégorie, l'image est située à gauche du texte. Sur la seconde, à droite. La troisième à gauche et ainsi de suite.

Malheureusement, je n'arrive pas créer cette disposition. J'ai essayé de créer des div positionnées en inline-block, utiliser la propriété float mais rien n'y fait. Lorsque j'ajoute une seconde catégorie, toute la mise en page est perturbée. J'ai lu plusieurs articles sur le web mais ils ne m'ont pas aidés. Je ne vois pas ce qui me pose problème.

Pouvez-vous m'aider ? Merci d'avance.


<div class="div-categoryContainer">
	<img src="https://cdn.tutsplus.com/vector/uploads/2014/03/gem-PW-diamond.jpg" class="picture1">

	<h2>Titre du paragraphe</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>

<div class="clearfix"></div>

	<div class="div-categoryContainer">
		<img src="https://cdn.tutsplus.com/vector/uploads/2014/03/gem-PW-diamond.jpg" class="picture2">

		<h2>Titre du paragraphe</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>


body{
	background-color: #DDD;
}
.div-categoryContainer{
	box-sizing: border-box;
	margin: 10px auto 10px;
	padding: 10px;
	width: 80%; min-height: 300px;

	font-family: sans-serif;
	font-size: 1em;
	color: #333;

	background-color: #EEE;
}

.picture2{
	border: none;
	float: right;
	margin-right: 40px;
}

.clearfix{
	margin: 0, padding 0;
	width: 0; height: 0;
}

Modifié par SilverFox (13 Apr 2015 - 12:40)
Modérateur
Bonjour,

Mmmmm j'ai eu beau regarder j'ai pas vu ce qui ne fonctionnait pas... a part qu'il manque la classe picutre1...
J'ai viré le clearfix et j'ai changé les nom de picture 1 et 2 en picture Left et right mais sinon c'est ce que t'avais et ça à l'air de marcher comme tu souhaite non ?

http://jsfiddle.net/Undless/2xfoaa1n/1/
Bonjour @SilverFox,

Lorsque tu fais flotter ton image à côté du texte, par défaut le texte qui "dépasse" va se mettre sous l'image.

L'erreur serait de faire flotter le bloc de texte à côté de ton image alors que ce n'est pas nécessaire.
Fait flotter l'image uniquement et donne une marge à gauche ou à droite à ton bloc de texte (de la largeur de l'élément flottant + la gouttière souhaitée) pour que le texte ne repasse pas sous l'image flottante s'il est long.

test réalisé ici : http://jsfiddle.net/eviouchka/rgb2x4d5/15/

J'ai donné une largeur à l'image uniquement pour que le résultat soit plus évident mais ce n'est pas nécessaire pour que cela fonctionne.
Bonne continuation ! Smiley cligne
Merci de vos réponses. Grâce à vous j'ai résolu mon problème. J'avoue rencontrer beaucoup de difficultés avec le positionnement et donner un nom aux classes pour rester propre (et compréhensible).

Globalement, il arrive très souvent que mon HTML contienne trop de classe et que mon CSS devienne "bordélique". Mais c'est probablement parce-que je suis encore un débutant. Avec de l'expérience ça devrait aller mieux.

Encore merci Smiley cligne