Cadre qui reste les uns sous les autres .. ?

santinisantini Membre
12 janv. modifié dans Entraide

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 😀

Réponses

  • GzygGzyg Membre
    14 janv. modifié

    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.

  • santinisantini Membre
    12 janv. modifié

    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 :)

Connectez-vous ou Inscrivez-vous pour répondre.