Bonjour,

Sur mon site il y as des articles et a la fin c'est ecrit : Poster par ... , le ...

J'aimerais aligner cette phrase en bas a droite ! 

Screen :

(En bas a droite du background gris)

Mon codage :

 <div class="center">
         <div class="left">
             <div style="background-color: white; margin-right: 330px; margin-top: -555px; border-radius: 5px;">
             <br />
                 <?php
                $sql = $db->query("SELECT * FROM news WHERE sup = 0 AND valid = 1 ORDER BY id DESC LIMIT 0,9999");
                $row = $sql->rowCount();
                while($req = $sql->fetch(PDO::FETCH_OBJ)){
                ?>
                 <div style="background-color: #DDE1E0; margin: 20px; padding: 7px; height: 100px; border-radius: 5px;">
                     <span style="font-size: 1.3em; color: #4B4F4F;">
                          <center><a href="news.php?id=<?php echo $req->id;?>"><b><?php echo $req->titre;?></b></a></center>
                     </span>
                     <span>Posté le <b><?php echo $req->date;?></b> par <b><?php echo $req->auteur;?></b></span>
                 </div>
                <?php if($row > 0){ echo "<br />";} } ?>
             </div>
         </div>
     </div>

Cordialement !

-
Edité par Anonyme 18 juin 2017 à 13:51:16

Tout est à refaire mon ami, c'est n'importe quoi ce code,

En plus margin-top:-555px, on sort e la page et on ne voit rien ...

mettre toutes les déclarations CSS dans un fichier à part

<center> n'existe plus...  class="center" sort d'où ? les <br /> pour la mise en page : interdit

etc. etc

sinon principe pour placer quelque chose en bas à droite :

<div class="bloc">
	<h1>titre</h1>
	<p>bla bla bla</p>
	<div class="signature">
		Posté le nn/nn/nn par X.
	</div>
</div>

CSS:

.bloc {
	width:500px;
	height:300px;
	padding:5px;
	position:relative;
	background-color:#ddd;
}
.signature {
	position:absolute;
	bottom:10px;
	right:10px;
}

Bonjour,

maintenant avec flexbox, on peut aligner vers le bas très facilement

Principe :

* on donne "display: flex; flex-direction: column" au parent, et une hauteur
* on donne "margin-top: auto; margin-left: auto" à l'élément à repousser

(tous les autres points relevés par ChrisLebure sont parfaitement valables et à suivre : center est obsolète depuis 1999)

-
Edité par Lamecarlate 18 juin 2017 à 15:50:09

Salut Lamecarlate ! Merci pour tes infos, si tu as 5 min tu peux me montrer avec FlexBox ce que sa donne dans mon codage car je n'est jamais aprit FlexBox ! Cordialement.

Merci du conseil Lamecarlate, je n'ai pas encore assez le réflexe flexbox ...

XENUS : déjà, corrige tous les points cités par ChrisLebure ; ensuite, que n'as-tu pas compris dans les instructions que j'ai donné ? Tu as testé ?

(un peu de lecture : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox)

-
Edité par Lamecarlate 18 juin 2017 à 16:17:21

PProblème résolu merci à tous !