IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en page d'un liste d'annonces


Sujet :

CSS

  1. #1
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut Mise en page d'un liste d'annonces
    Bonjour j'essaye de mettre en page la sortie d'annonce mais elle ce chevauche ? je comprends pas pourquoi?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <html>
    <head>
    <style>
    .contenu_ano{
            margin:0 auto;
    }
    .image{
    width:160px;
    height:110px;
    margin-top:10px;
    background-color:#ff0000;
    }
    .annonce{
    width:100%;
    height:110px;
    margin-left:170px;
    margin-top:-110px;
    background-color:#00ff00;
    }
    </style>
    </head>
    <body>
    <div class="contenu_ano">
    <div class="image"> image</div>
    <div class="annonce">
    <table width="100%">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Si tu veux des réponses, il va vraiment falloir que tu fasses un EFFORT !

    Ton code n'est pas exploitable :
    • il n'y a pas de données (même fictives) qui permettent de le TESTER
    • il ne montre pas le problème, donc pas de solution à proposer


    DONC :
    • montre du code EXPLOITABLE = qu'on peut TESTER
    • donne suffisamment d'EXPLICATIONS CLAIRES ! (et pas juste "ça marche pas...")

    Merci.

    N.B. Quoi qu'il en soit il manque :

  3. #3
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    Mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2015
    Messages : 153
    Points : 244
    Points
    244
    Par défaut
    Bonjour,

    En outre, pour info : encoder-son-site-en-utf8
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  4. #4
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    Bonjour voilà le code complet et dans le header il encodé en utf8 et le css et dans le header

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    <?PHP
    require_once'header.php';
    ?>
    <ul id="nav">
    <li><a href="annonce.php?token=<?php echo $_SESSION['login']; ?>">Ajouté une annonce</a></li>
    <li><a href="voir_annonce.php?token=<?php echo $_SESSION['login']; ?>">Voir les annonces</a></li>
    <li><a href="contact.php?token=<?php echo $_SESSION['login']; ?>">Contact</a></li>
    </ul>
    <?PHP
    $connection->exec('DELETE FROM annonce WHERE timestamp< DATE_SUB(NOW(), INTERVAL jours DAY)');
    $connection->exec('DELETE FROM choix_annonce WHERE timestamp< DATE_SUB(NOW(), INTERVAL jours DAY)'); 		 
    /*}*/
    include'function_mini.php';		  
    $annonce_sortie  = $connection->prepare('SELECT `idA`,`pseudo`,`ID`,`sexe`,`jours`,`annonce` FROM annonce'); 
    $annonce_sortie->execute(array());
    while($result = $annonce_sortie->fetch(PDO::FETCH_OBJ)){
    	$profil  = $connection->prepare("SELECT * FROM photo_profil WHERE id_gal=:id_gal");
            $profil->execute(array(':id_gal'=>$result->ID)); 
    	while($results = $profil->fetch(PDO::FETCH_OBJ)){
           $results->gal;		
    	miniature('image_profil/'.$results->gal.'', 150, 100);
     
            if(!empty($results->gal) == TRUE){
    	echo'<img src="MINI11image_profil/'.$results->gal.'" border="0" />';
    			 }else{
        echo'<img src="imdesign/no_photo.png" width="150" height="100" border="0" />';				
    		} 
     
    		}
    $tab_choix = array();
    $annonce_sortie_choix  = $connection->prepare('SELECT * FROM choix_annonce WHERE ID=:ID AND jours=:jours');
    $annonce_sortie_choix->execute(array('ID'=>$result->ID,'jours'=>$result->jours));
    while($result_choix = $annonce_sortie_choix->fetch(PDO::FETCH_OBJ)){
    $tab_choix[] = $result_choix->choix;	
    $list_choix = (!empty($tab_choix))? implode(', ',$tab_choix) : '';
    }
    ?>
     
      </td>
      <td style="width:90%;text-align:left;">
        <table style="width:100%">
          <tr>
            <td style="text-align:left;"><b><u><span style="color:#660099">Pseudo</span></u>&nbsp;:&nbsp;</b>
    <?PHP 
    switch($result->sexe){
    case"Femme":
    echo '<img src="imdesign/f.png" width="20" height="20" title="Femme" /><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$_SESSION['anp_p'].'</a>';
    break;
    case"Couple":
    echo '<img src="imdesign/cpl.png" width="20" height="20" title="Homme"/><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$result->pseudo.'</a>';
    break;
    case"Homme":
    echo '<img src="imdesign/h.png" width="20" height="20" title="Homme"/><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$result->pseudo.'</a>';
    break;
    }
    ?>    
    </td>
     </tr>
          <tr>
            <td style="text-align:left;"><b><u><span style="color:#660099">Recherche</span></u>&nbsp;:&nbsp;</b><?PHP echo '<b>'.$list_choix.'</b>'; ?></td>
          </tr>
          <tr>
            <td style="text-align:left;"><b><u><span style="color:#660099">N°:&nbsp;<?PHP echo ''.$result->idA.''; ?>&nbsp;Annonce</span></u>&nbsp;:&nbsp;</b><?PHP echo ''.$result->annonce.''; ?></td>
          </tr>
          <tr>
            <td style="text-align:left;">    <input type="button" class="button_mauve" value="Répondre" id ="valider"  onclick="window.location.href='<?PHP echo'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/annonce_message.php?destin='.$result->pseudo.'&nume='.$result->idA.''; ?>'" /></td>
          </tr>
        </table>
       </td>
      </tr>
    </table>
    <?PHP
    }
    ?>
     
    </div>
    <div id="colonne-droite"></div>
    </div>
    </div>
    </body>
    </html>

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    ici, tu es dans le forum CSS.
    Donc, PAS de code PHP !

    -> Montre le code HTML généré ("Ctrl"+"U").



    N.B. Et remplace les <?PHP par des <?php en minuscules.

  6. #6
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    bonjour voilà j'ai le div annonce n'est pas a la même hauteur seriez vous m'aidez svp?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <meta charset="UTF-8"> 
    <html>
        <head>
           <title>CSS Test</title>
    <style>
    #container_ano
    {
        height:100%;
        width:70%;
        margin:auto;
    }
    #image
    {
        float:left;
        background-color:#00ff00;
        width:20%;
        height:100%;
        border:1px solid #9FC6FF;
        -moz-border-radius:10px 0;
        -webkit-border-radius:10px 0;
        border-radius:10px 0;
    }
    #annonce
    {
        float:left;
    	margin-left:21%;
    	top:-10PX;
        background-color:#0000ff;
        width:79%;
        height:100%;
        border:1px solid #9FC6FF;
        -moz-border-radius:10px 0;
        -webkit-border-radius:10px 0;
        border-radius:10px 0;	
    }
    </style>
     
        </head>
        <body>
            <div id = "container_ano">
                <div id="image">image</div>
                <div id="annonce"> text</div>
            </div>
        </body>
    </html>

  7. #7
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    margin-left:21%; ???

    Tu devrais t'intéresser de plus près à :
    • display:table / display:table-cell
    • display:flex


    Ca remplace avantageusement les float:(left/right).

  8. #8
    Membre régulier
    Homme Profil pro
    Inscrit en
    Octobre 2004
    Messages
    514
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2004
    Messages : 514
    Points : 107
    Points
    107
    Par défaut
    je suis pas un as en feuille de style

  9. #9
    Invité
    Invité(e)
    Par défaut

    • "css display"
    • "css display table"
    • "css display flex" / "mise en page flexbox"


    Tu trouveras de nombreux exemples d'utilisation.

    Entre autres :


+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mise en page d'une liste déroulante
    Par JujuPomme dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 17/06/2016, 16h55
  2. Mise en page d'une liste
    Par alex5956 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 26/10/2015, 15h15
  3. Mise en page d'un liste à puce
    Par L1011 dans le forum Mise en forme
    Réponses: 7
    Dernier message: 13/08/2008, 16h55
  4. mise en page (liste déroulante) select multiple
    Par jojo22222 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 18/05/2006, 19h23
  5. problème de mise en page d'une zone de liste
    Par audrey_desgres dans le forum Access
    Réponses: 26
    Dernier message: 24/06/2005, 09h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo