Cadre qui reste les uns sous les autres .. ?

santini · janvier 2020

Bonjour à toutes et à tous,

J'ai un petit souci de css, j'ai réduit la taille des cadre a 40% pour les avoir sur deux colonnes (uniquement sur la home), sauf qu'il reste les uns sous les autres ?

Une idée ?

Code de la page home:

<?php include(dirname(__FILE__).'/header.php'); ?>


<div class="mw960p center pad2" role="main">


		<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>


			<article class="art-home pad5" role="article">


<h1 class="txtcenter pad3"><?php $plxShow->artTitle('link'); ?></h1>
<?php $plxShow->artChapo('',false) ?>


<ul class="pad2 mar-top">
<li class="w33 left"><?php $plxShow->artDate('#num_day #month #num_year(4)'); ?></li>
<li class="w33 left"><?php $plxShow->artCat(); ?></li>
<li class="w33 left"><?php $plxShow->artNbCom(); ?></li>
</ul>
					
			</article>


			<?php endwhile; ?>


			<div id="pagination">
				<?php $plxShow->pagination(); ?>
			</div>




</div>


	
<?php include(dirname(__FILE__).'/footer.php'); ?>

Voici le bout de code css:

.art-home {
margin-bottom: 5%;
border-top: 10px #F29155;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #FFF;
float: left;
overflow: hidden;
width: 40%;
height: 250px;
}

En vous remerciant 😀

Gzyg · janvier 2020

Salut,

Tu devrais essayer avec flexbox.

Donne un nom plus spécifique à la div englobant tes articles (par ex : div class="articles")

Puis, en css :

.articles {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.art-home {
width: 49%;
}

Et c'est tout pour que tes cadres s'alignent correctement.

Bien sûr, il faudra penser à faire un css responsive, etc... mais c'est déjà un début.

Les meilleures ressources pour flexbox sont css-tricks et mdn (en anglais) et alsacreations (en français)

Note de @Kube17: Pense à utiliser la fonction "code" de l'éditeur. Voir ici.

santini · janvier 2020

Gzyg, merci beaucoup de ton aide, effectivement il ne manquer pas grand chose^^

Une fois le site terminer, je me pencherais sur le responsive :)

MERCI :)

Cadre qui reste les uns sous les autres .. ?

Réponses