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 :

Affichage bloc avec balise <DIV>


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2010
    Messages : 13
    Par défaut Affichage bloc avec balise <DIV>
    Bonjour à tous,

    Je vous remercie d'avance pour votre aide.

    Je ne parviens pas à aligner côte à côte des blocs <DIV> contenant des données lue dans une DB....

    Mes blocs sont l'un en dessous de l'autre.....

    Voici mon code CSS

    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
    .body{	
    	margin:0;
    	padding:0;}
     
    #bloc{
    	float:left;
    	width:471px;
    	height:313px;
            align-items: flex-start;
    }
     
    #twitchContent
    {
         display: flex;
     
    }
     
    img {
      width: 150px;
      height: 100px;
    }
     
    .contain {
      object-fit: contain;
    }
    Voici mon fichier php

    Code php : 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
    <html>
        <link rel="stylesheet" href="cssdiv.css">
    <?php
    try
    {
    	$bdd = new PDO(';;charset=utf8','','',array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
    }
    catch (Exception $e)
    {
    	    // En cas d'erreur, on affiche un message et on arrête tout
            die('Erreur : ' . $e->getMessage());
    }
     
    // On récupère tout le contenu de la table Materiel
     
    $reponse = $bdd->query('SELECT * FROM Materiel');	
     
    ?>       
        <body>
            <div id="twitchContent">
               <div id= "bloc">
     <?php while($row = $reponse->fetch(PDO::FETCH_ASSOC)) : ?> 
        <?php $rFile = 'images/'.$row['Code_article'].'.png'; ?>
        <?php $check = @fopen($rFile, 'r'); ?> 
        <?php if ($check): ?>
     <div><?php echo '<img class="contain" src="images/'.$row['Code_article'].'.png" onMouseOver="bigImg(this)" onMouseOut="normalImg(this)"/>';?></div>
     <div><?php echo htmlspecialchars($row['Denomination']); ?></div> 
     <div><?php echo htmlspecialchars($row['Benaming']); ?></div>    
     <?php endif; ?>
     <?php endwhile; ?> 
               </div>
            </div>    
        </body> 
    </html>


    Voici le résultat :

    Nom : alignement1.png
Affichages : 105
Taille : 89,7 Ko

    Voici ce que je souhaite

    Nom : alignement2.png
Affichages : 96
Taille : 97,2 Ko


    Merci d'avance,

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    le HTML généré, et c'est celui-ci que tu dois nous fournir pas le code serveur, est bancal

    Cela donne en gros :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="twitchContent">
      <div id="bloc">
        <div><img class="contain" src="images/Code_article.png"></div>
        <div>Denomination</div>
        <div>Benaming</div>
        <!-- autre article -->
        <div><img class="contain" src="images/Code_article.png"></div>
        <div>Denomination</div>
        <div>Benaming</div>
      </div>
    </div>
    alors qu'il faudrait, à minima, que tu ais
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="twitchContent">
      <div class="bloc">
        <div><img class="contain" src="images/Code_article.png"></div>
        <div>Denomination</div>
        <div>Benaming</div>
      </div>
      <!-- autre article -->
      <div class="bloc">
        <div><img class="contain" src="images/Code_article.png"></div>
        <div>Denomination</div>
        <div>Benaming</div>
      </div>
    </div>
    Après ton CSS est bien sûr à adapter.

    Tu pourrais également tirer avantage à utiliser les balises <figure> par exemple.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2010
    Messages : 13
    Par défaut
    Bonjour "No smoking"

    Merci d'avoir pris le temps de réponde et de trouver une solution.

    je test de suite ce que vous me proposez

    bien à vous,

Discussions similaires

  1. Affichage SQL avec balise HTML
    Par hellden dans le forum ASP.NET MVC
    Réponses: 1
    Dernier message: 21/06/2016, 10h06
  2. XML brut (avec balises) dans div HTML
    Par mcfive dans le forum Langage
    Réponses: 4
    Dernier message: 05/07/2012, 17h07
  3. Pb affichage formulaire dans balise div
    Par zut94 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 26/07/2006, 10h19
  4. centrer un bloc avec des div+css
    Par fabrisss dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 27/10/2005, 23h41
  5. Popup avec balise div
    Par Kerod dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 01/05/2005, 15h16

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