Mise en page dynamique avec ou sans image

Salut!! une partie du code permettant l'affichage ne serait pas de refu bien à toi.

Merci cattleyas10
Voici :

<article>
          <p>Ici sont réunies toutes les informations liées à l'activité de notre association.<br />
            Vous y trouverez, par dates décroissantes, toutes nos actions également.
          </p>
          <?php
          while ($donnees=$req->fetch()) {?>
            <div class="media">
              <div class="media-image">
                <?php if($donnees['photo']<>''){?>
                  <img src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" style="width: 300px;"/>
                <?php } ?>
              </div>
              <div class="media-body">
                <h2 class="media-heading"><? echo $donnees['titre'];?></h2>
                <div class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></div>
                <p style="text-align:justify;"><? echo $donnees['descriptif'];?></p>
              </div>              
            </div><?php
          } ?>
        </article>

Et le CSS correspondant :

.media {
    margin: 50px auto 0px;
}

.media-image img{
    width: 325px;
    float: left;
    margin: 0px 19px 0px 26px;
    box-shadow: 5px 5px 5px #AAA;
}

.media-object{

}
.media-body{
    font-family: "light",sans-serif;
}

.media-body p{
    padding: 0px 26px;
}
.media-heading{
    position: relative;
    top: -9px;
    padding: 0px 26px;
    height: 39px;
    width: 878px;
    font-family: "light",sans-serif;
    background-color: transparent;
    color: #C3AEAE;
    text-shadow: 1px 1px #FFF, -1px -1px #444;
}

La page en question :
http://www.microsoluces.com/marveyrand/actualites.php

ton media-body ne comporte pas de dimension du coup il s'adapte à son contenu et du coup ton container "media" en fait de même se qui fait que quand tu repasse dans ta boucle le nouveau container prend la place qu'il reste et le comble

essai de mettre un width:100%; à ta classe "media"

ou un display:block; sa forcera le retour à la ligne à chaque fois que tu boucle

.media {
    display:block;
    width: 100%;
    margin: 50px auto 0px;
}

Etrangement cela ne change rien !

etrange car en plus l'élément div par defaut est en block donc tu devrais avoir un retour à la ligne automatiquement je vais regarder de près ton css

sinon temporairement le temps de resoudre ce probleme mais un br après la fermeture de ta balise media

ou width: 980px; à ta class media

Non, le 'br' dans la boucle en fin de media ne règle pas le problème, il décale légèrement
le titre mais pas suffisamment...

J'ai essayé ça :

<div class="media-espace"></div>

.media-espace{
    display: block;
    height: 100px;
}

Idem, ne fonctionne pas

Domage que je ne puisse pas utiliser un min-height

essai sa et fait moi un retour :)

<article>
          <p>Ici sont réunies toutes les informations liées à l'activité de notre association.<br />
            Vous y trouverez, par dates décroissantes, toutes nos actions également.
          </p>
          <?php
          while ($donnees=$req->fetch()) {?>
            <p>
                <?php if($donnees['photo']<>''){?>
                  <img src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" style="width:300px; float:left;"/>
                <?php } ?>
                <h2 class="media-heading"><? echo $donnees['titre'];?></h2>
                <span class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></span>
                <? echo $donnees['descriptif'];?>          
            </p><?php
          } ?>
        </article>

Le .media-espace n'était pas dans la boucle... Une fois remis au bon endroit cela fait bien un saut de ligne
pour la nouvelle actualité, mais trop grand si le texte qui accompagne l'image est long !

J'ai mis ton code en ligne, va voir, c'est la cata ! ;-)
http://www.microsoluces.com/marveyrand/actualites.php

c'est le resultat du code que je t'ai envoyé sa ?

Voui : copié collé !

Je remets le mien, c'est un peu mieux, (à peine) !

Je peux peut être mettre ma balise .media-espace dans une condition php qui teste ou non la
présence d'une image ! ! !

Edit :
Non, c'est usine à gaz comme solution !
Je ne comprends pas pourquoi mes balises .media ne génèrent pas des retours à la ligne, y compris quand
on les déclare comme un block ! ! !

je me pose la même question je te rassure
sauf si le probleme viens du positionnement de ton titre en relative

Je viens de l'enlever, ainsi que le top:-9px; car on ne doit pas placer des parties de sites avec des signes
négatifs je crois, en plus il n'apportait rien... Malheureusement, cela ne change toujours rien !

essai sa :

html/php :

<article style="margin:0 auto;width:980px;">
    <p>Ici sont réunies toutes les informations liées à l'activité de notre association.<br />
        Vous y trouverez, par dates décroissantes, toutes nos actions également.
    </p>
    <?php while ($donnees=$req->fetch()) { ?>
        <p>
            <?php if($donnees['photo']<>''){?>
                <img class="image" src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" />
            <?php } ?>
            <span class="titre"><? echo $donnees['titre'];?></span>
            <span class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></span>
            <? echo "<p>".$donnees['descriptif']."</p>";?>          
        </p>
    <?php } ?>
</article>

css :

.image{
    float:left;
     width: 325px;
}
.titre{
        font-size: 1.5em;
        display:block;
}
.green{
        color:green;
        display:block;
}

correction pour que le texte passe en dessous de l'image une fois dépassé:

<article style="margin:0 auto;width:980px;">
    <p>Ici sont réunies toutes les informations liées à l'activité de notre association.<br />
        Vous y trouverez, par dates décroissantes, toutes nos actions également.
    </p>
    <?php while ($donnees=$req->fetch()) { ?>
        <p>
            <?php if($donnees['photo']<>''){?>
                <img class="image" src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" />
            <?php } ?>
            <span class="titre"><? echo $donnees['titre'];?></span>
            <span class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></span>
            <? echo $donnees['descriptif'];?>          
        </p>
    <?php } ?>
</article>

Ne fonctionne pas :
http://www.microsoluces.com/marveyrand/actualites.php

.media-image img{
    /*width: 325px;
    float: left;
    margin: 0px 19px 0px 26px;
    box-shadow: 5px 5px 5px #AAA;*/
    float:left;
     width: 325px;
}

.media-heading{ 

    /*padding: 0px 26px;
    height: 39px;
    width: 878px;
    font-family: "light",sans-serif;
    background-color: transparent;
    color: #C3AEAE;
    text-shadow: 1px 1px #FFF, -1px -1px #444;*/
    font-size: 1.5em;
    display:block;
}

.green{
    /*padding: 0px 26px;
    color: #5A9400;*/
    color:green;
    display:block;
}

Les images sont uploadées par l'utilisateur et ne font pas toutes la même taille.
Je n'ai fait aucun traitement à l'upload pour redimensionner les images avant de
les stocker sur mon serveur (car je ne sais pas faire cette partie de code).
J'ai donc affecté aux images un simple : width: 325px;
Je ne comprends pas pourquoi maintenant elles occupent la totalité de l'écran !

alors la à ne plus rien y comprendre car je l'ai testé avant de te l'envoyé et sa fonctionne très bien !! ^^

tu as bien remplacé tout le code par celui que je t'ai envoyé et le css idem ?

il peut arriver que l'image ne prenne pas le width d'une class donc au cas ou remet style="width:325px;" dans les attributs de l'image

Je te remercie de tout le mal que tu te donnes pour moi...
J'ai bien copié ton code pour la page (correction pour que le texte passe en dessous
de l'image une fois dépassé:) et celui du css... J'ai seulement mis le mien en commentaires pour
ne pas le perdre... Le résultat est actuellement en ligne, tu peux aller voir... Cela s'affiche mal !

:-(

pas de souci du coup tu peux m'envoyer l'integralité du code de la page ? le probleme doit venir d'ailleur

J'ai bien vérifié que l'image est en width:325 px
J'en ai profité pour mettre ma balise img dans une balise p comme il se doit...

Le code de la page avec TA correction :

<?php
require ('gestion/connexion.php');
$sql = 'SELECT * FROM actualites ORDER BY quand DESC';
$req = $bdd->query($sql);
?>

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>LE MARVEYRAND</title>
  <link rel="icon" href="favicon.ico " type="image/x-icon" />
  <link rel="shortcut icon" href="favicon.ico " type="image/x-icon" />
  <meta name="description" content="165c. uniques">
  <link rel="stylesheet" href="css/style.css">  
</head>

  <body>
    <div class="main">
      <header>
        <div class="logo">
          <p>
            <a href="index.php"><img src="images/logo.png" alt="Logo de l'association" title="Logo de l'association"></a>
          </p>
        </div><!--logo-->
        <div class="marveyrand">
          <p>
            <a href="index.php"><img src="images/marveyrand.png"></a>
          </p>
        </div><!--marveyrand-->
        <div class="slogan">
        </div><!--slogan-->
        <nav>
          <ul>
            <a href="accueil.php"><li>Qui sommes nous ?</li></a>
            <a href="bureau.php"><li>Le Bureau</li></a>
            <a href="comptesrendus.php"><li>Comptes rendus</li></a>
            <a href="actualites.php" id="active"><li>Actualités</li></a>
            <a href="liens.php"><li>Liens utiles</li></a>
            <a href="contact.php"><li>Contacts</li></a>
          </ul>
        </nav>
      </header>

      <section>
        <header>
          <p class="rainbow"><img src="images/rainbow.png"></p>
          <h2>Actualités</h2>
          <h3>Les derniers événements marquants...</h3>         
        </header>
        <article style="margin:0 auto;width:980px;">
    <p>Ici sont réunies toutes les informations liées à l'activité de notre association.<br />
        Vous y trouverez, par dates décroissantes, toutes nos actions également.
    </p>
    <?php while ($donnees=$req->fetch()) { ?>
        <p>
            <?php if($donnees['photo']<>''){?>
                <img class="image" src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" />
            <?php } ?>
            <span class="titre"><? echo $donnees['titre'];?></span>
            <span class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></span>
            <? echo $donnees['descriptif'];?>          
        </p>
    <?php } ?>
</article>

      </section>

      <footer>
        <p>
          © 2015 - Tous droits réservés, site Internet créé par <a href="http://www.microsoluces.com" target="_blank">Microsoluces</a>.
        </p>
      </footer>
    </div><!--main-->
  </body>
</html>

Pour le CSS, ça va être chaud : 960 lignes !

pas de souci tkt pas je regarde deja sa et je demandrais au fure et à mesure si besoin ou j'inspecterais les elements sur le navigateur^^

Quand tu as supprimé mes div media, mes réglages les concernant dans le CSS n'ont plus été
reportés sur la page. Je viens donc de faire un copié collé de ton code css pour avoir tes réglages
le temps du test. Je ne pourrai pas les garder ainsi car cela affecterait d'autres pages (exemple
balise img !)

Edit :
Ta correction est en ligne actuellement, elle rejoint mes premiers essais au niveau des articles actualités
en cascade !

Je me demande quand même si je ne vais pas passer par une table !

as tu esseyé sur un autre navigateur ? question con ^^

colle sa ds le head pour les test :

<style type="text/css">
            .image{
            float:left;
             width: 325px;
        }
        .titre{
        font-size: 1.5em;
        display:block;
        }
        .green{
        color:green;
        display:block;
        }

        </style>

Je suis sous Linux Mint. Je fais mes essais avec Firefox et Chromium...
Les deux me donnent le même affichage.
Je fais aussis des contôles sur un portable 15 pouces car mon ecran PC
27 pouces ne me donne pas des résultats probants...(Je n'utilise plus
de css fixed par exemple ! ;-) )...

en retirant le margin :0 auto de l'article sa donne quoi ?

Je suis désolé, pas mieux (cf résultat en ligne...)

en retirant le margin :0 auto de l'article sa donne : IDEM

Un truc de dingue !
Je suis dessus depuis le début de l'après midi !
Je vais laisser tomber et essayer une table si ça continue !

:-(

je suis désolé je dois retourner travailler , on peut reprendre sa demain sans aucun souci

Merci pour ton aide en tout cas !

Salut,
essais en rajoutant

article p > img {
    margin-left: -330px;
}
article p {
    min-height: 220px;
    margin-left: 330px;
}

bon, c'est un peu du bricolage ;)

si le texte sort, c'est la faute à article corriger en

article{
width:100%;
}

coucou , je voulais savoir comment était enregistrer ton texte dans ta bdd

le css est bon sur cette partie du coup je me demande si c'est pas le formatage de ton texte dans la bdd qui fait que sa fasse comme sa ou si tu peux link le css de ton main et de ta section aussi stp au passage

@agentcobra
Un leger mieux avec ta proposition...
Le problème est que si l'article ne contient pas d'image, le titre, la date et le texte restent
placés au beau millieu de la page...pourtant la présence d'une image est testée par une
condition PHP !
De plus, en supprimant le float, je n'ai plus le texte qui entoure l'image dans le cas ou celui
ci serait suffisamment long pour le faire !

A quoi sert le > dans article p > img { ?

article p > img {

Ton CSS est appliqué sur la boucle corrigée par cattleyas10 :

<?php while ($donnees=$req->fetch()) { ?>
        <p>
            <?php if($donnees['photo']<>''){?>
                <img class="image" src="gestion/photos/<? echo $donnees['photo'];?>" alt="" title="" />
            <?php } ?>
            <span class="titre"><? echo $donnees['titre'];?></span>
            <span class="green">Article du <? $sDateFr = date("d/m/Y", strtotime($donnees['quand']));echo $sDateFr;?></span>
            <? echo $donnees['descriptif'];?>          
        </p>
    <?php } ?>

@cattleyas10
Mon texte est saisi par l'utilisateur au moyen d'un simple formulaire dans la partie back-office.
Après vérification du format et taille de l'image une insertion (ou UPDATE selon le cas) est envoyée
à la BDD :

$titre = $_POST['titre'];
          $quand = $_POST['quand']; 
          $quand = str_replace ('/', '-', $quand);  
          $quand = date("Y-m-d", strtotime($quand));
          $descriptif = $_POST['descriptif'];
          // 6 - Requête préparée pour l'ajout :               
          $requete = $bdd->prepare('INSERT INTO actualites(titre, descriptif, quand, photo) VALUES(:titre, :descriptif, :quand, :photo)');
          // 7 - Exécution de la requête :
          $requete->execute(array(
            'titre' => $titre,
            'descriptif' => $descriptif,
            'quand' => $quand,                    
            'photo' => $photo
          ));
          // 8 - Information de l'utilisateur de fin de procédure d'ajout : 
          $message='Votre nouvel article "actualité" a bien été ajouté à la base de données !';
          $erreur=0;

@cattleyas10

/* ---------------------------------------------------------------------- */
/*  04. Main
/* ---------------------------------------------------------------------- */
.main {
    margin: 35px auto 0px;
    width: 980px;
    box-shadow: 1px 2px 9px #8A7777;
}

merci beaucoup, par securité je te conseil de mettre un teste pour savoir si le bouton d'envoi a été cliqué avant de faire les traitements avec ta bdd quelque chose du genre

if(isset($_POST['nom_de_ton_boutton'])
{
    //faire le traitement des données reçu ici.........
}