28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai parcouru une bonne dizaine de forums, j'ai tenté un peu tout...et surtout n'importe quoi, mais je n'arrive toujours pas à aligner trois images sur ma page html...

Le but serait d'arriver au résultat suivant : http://imageshack.com/a/img907/6489/LVEliL.png


J'ai le code html suivant :
<section>
			<article>
				<!-- Nouveautés - 3 photos avec lien vers son article --> 
				<div id="lesnews">					
					<div id="left"><a href="articlesandroxreebok.html"><img id="imgleft" src="sandroxreebok.jpg" alt="Image tirée de la collaboration Sandro et Reebok" title="Collection A/W 2015 : Sandro x Reebok">
					</a>
					<p>Une collaboration réussie pour une collection capsule qui nous propose de revisiter le streetwear chic et sporty. On retrouve dans cette collab' toute l'intelligence de la marque qui amorce son virage au meilleur moment afin de ....<a href="articlesandroxreebok.html">Lire la suite...</a>
					</p></div>
					<div id="mid"><a href="articlestylehiver.html"><img id="imgmid" src="sswinter.jpg" alt="Image tirée du lookbok A/W 2015 Scotch and Soda" title="Scotch and Soda A/W 2015 : La superposition à l'honneur">
					</a>
					<p>
						Comme toujours, Scotch and Soda nous habitue à une avalanche de looks au travers de sa collection bien fournie. Pour s'y retrouver parmis tous les articles et ne pas louper les meilleurs, c'est par ici...<a href="articlestylehiver.html">Lire la suite...</a>
					</p></div>					
					<div id="right"><a href="articleparfum.html"><img id="imgright" src="parfum.jpg" alt="Bâtonnets d'encens incandescents" title="Senteurs">
					</a>
					<p>
						Car un homme sent bon, ne négligez pas le choix de votre parfum...Cet hiver, ne sentez pas le sapin ! <a href="articleparfum">Lire la suite...</a>
					</p></div>	
				</div>				
			</article>
</section>


Et niveau CSS, je n'arrive pas à "display : inline"
#lesnews p {
	width:300px;
}

#imgleft, #imgmid, #imgright {
	width:300px;
	height:300px;
}

#left, #mid, #right {
	display:inline;
}


Sachant que le code que j'ai linké est ce qu'il reste après plusieurs heures d'essais...c'était plus fourni au début ! J'ai également un soucis quant à l'affichage des images, j'ai du le fixer en "px" car en % le comportement de l'image au niveau de la hauteur est étrange.

D'avance merci
Modifié par Flurry (16 Nov 2015 - 20:16)
Administrateur
Je dirais... avec un petit display:inline-block plutôt ?

Démo et code complet par ici : http://codepen.io/anon/pen/dYadXE

Au passage, il faut éviter de coller trop d'id partout tant que ce n'est pas nécessaire. Cela facilitera l'adaptabilité du code (un id n'est applicable qu'une fois).
Merci dew pour ta réponse, et rapide !

Exact j'ai des id en trop, et je vais passer sur des classes, je vais corriger ça, merci ! A force de farfouiller j'avais des restes !^^

Donc effectivement ça fonctionne quand je suis en full screen, j'étais d'ailleurs parvenu à un résultat similaire, mais il subsiste un soucis :

- je n'arrive pas à donner une dimension relative à mon image (en %), je pensais que la manœuvre serait simple et qu'il suffirait de mettre 32% pour chaque boîte avec un padding à 1% entre chaque image, mais non.

Du coup, j'ai un peu de mal à comprendre le mécanisme et si je réduis la taille de la fenêtre de mon navigateur (ou que je passe sur smartphone), le résultat est immonde.

Sans me donner la réponse, aurais-tu une piste à me donner..?
Modifié par Flurry (16 Nov 2015 - 21:20)
Administrateur
Flurry a écrit :

- je n'arrive pas à donner une dimension relative à mon image (en %), je pensais que la manœuvre serait simple et qu'il suffirait de mettre 32% pour chaque boîte avec un padding à 1% entre chaque image, mais non.

Bonjour,

Oui, c'est parce que les éléments de type inline-block génèrent des espaces indésirables :
http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Bonne chance Smiley cligne