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 :

Comment arranger les résultat d'une base des données dans un cadre bien arrangé ?


Sujet :

CSS

  1. #1
    Débutant Avatar de razily
    Inscrit en
    Février 2009
    Messages
    376
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 376
    Points : 154
    Points
    154
    Par défaut Comment arranger les résultat d'une base des données dans un cadre bien arrangé ?
    Bonjour à tous ,
    je bosse sur un projet sur les chaussures , je souhaiterai savoir comment on procède t - on pour présenter nos chaussures dans un cadre comme çà !

    http://www.zalando.fr/boots-bottines-femme/

    je sais qu'il y a des systèmes , nous permettant de le faire , je pensais à grid system 960 mais moi ce que je souhaite c'est une chaussure par ligne avec l'image et détails (voir image ) car ici il faudrait que çà soit 4 paire pour chaque ligne , j'arrive à afficher les chaussures bon il me reste le système de pagination .
    mais je souhaite savoir comment on doit procéder pour organiser comme suit , merci !!
    vos idées seront les bienvenues

    bon faut pas faire attention à l'image , je sais que Adidas ni Nike fabriquent des chaussures de ce genre

    voici le code :

    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
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
     
     
    <div class="container_12">
     
     
    <div class="content">
     
        <table border="1">
     
     
     
            <thead>
                <tr>
                    <th>Chaussure</th>
                    <th>Homme</th>
                </tr>
            </thead>
     
     
     
     
     
     
     
     
            <tbody>
     
                <?php  if ($rows != null):
              foreach ($rows as $r):?>
                <tr>
                    <td>Reference</td>
                    <td>
                        <?php echo $r->id; ?>
                    </td>
                </tr>
                <tr>
                    <td>Nom</td>
                    <td>
                        <?php echo $r->nom; ?>
                    </td>
                </tr>
                <tr>
                    <td>Prix</td>
                    <td>
                        <?php echo $r->prix; ?>
                    </td>
                </tr>
                <tr>
                    <td>Marques</td>
                    <td>
                        <?php echo $r->nom_marques; ?>
                    </td>
                </tr>
     
                <tr>
                    <td>Details</td>
                    <td>
                        <p>ici detail</p>
                    </td>
                </tr>
     
    			<tr>
    					<td>Images</td>
    					<td>
    						 <div class="jqzoom"><img src="<?php echo base_url(); ?>image/thumbs/<?php echo $r->nom_path;?>"  alt="shoe"  jqimg="<?php echo base_url(); ?>image/<?php echo $r->nom_path; ?>"></div>
    					</td>
     
    			</tr>
            </tbody>
     
     
     
     
     
     
     
     
     
             <?php endforeach;
            endif; ?> 
        </table>
     
     
     
     
     
        <?php echo $this->pagination->create_links();?>
     
     
    <!--    fin affichage chaussure homme -->
     
        </div>
     
        </div>
    </body>
    plus exactement un peu de ce genre

    http://www.leboncoin.fr/annonces/off...pagne_ardenne/

    merci
    Images attachées Images attachées  

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    le site zalando propose un affichage :
    - à base de <ul><li> (liste ordonnée) ;
    - et une mise en page à base de <div> et CSS.
    Ce qui est très bien ! Sans difficulté majeure.

    Ca ressemble à ca :
    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
    <ul class="productsGridList bestSeller border">
    <li class="gItem" data-s="..">
    	<div class="cOverlay">
    	<div class="left">
    	<a class="productBox" name="katalog.topseller.0.PI911C01E-702" href="pier-one-bottines-marron-pi911c01e-702.html">
    	<span class="imageBox">
    	<span></span>
    	<img alt="Bottines - marron" title="Bottines - marron" longdesc="http://i1.ztat.net/catalog/P/I/PI911C01E-702@1.jpg" src="http://i1.ztat.net/catalog/P/I/PI911C01E-702@1.jpg">
    	<noscript>&lt;img src="http://i1.ztat.net/catalog/P/I/PI911C01E-702@1.jpg" alt="Bottines - marron" /&gt;</noscript>
    	</span>
    	<b>Pier One</b>
    	<em>Bottines - marron</em>
    	<span class="priceBox">
    	<span class="freeShipping">Livraison gratuite!</span>
    	</a>
    	</div>
    	</div>
    </li>
    <li class="gItem" data-s="...">...</li>
    <li class="gItem" data-s="...">...</li>
    <li class="gItem" data-s="...">...</li>
    </ul>

    Une autre méthode pour l'affichage de données tabulaires : Affichage de données dans un tableau HTML
    Pour la pagination : Créer un système de pagination automatique en PHP

  3. #3
    Débutant Avatar de razily
    Inscrit en
    Février 2009
    Messages
    376
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 376
    Points : 154
    Points
    154
    Par défaut
    Merci beaucoup pour ces liens utiles !!!

    Svp , aidez moi comment afficher correctement la table $rows contenant les données de la base des données 'ai pris ici le code , et je souhaite afficher les id par exemple en ligne

    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
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     
        <link rel="stylesheet" media="screen" type="text/css" href="<?php   echo base_url();?>css/960.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="<?php   echo base_url();?>css/reset.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="<?php   echo base_url();?>css/text.css" />
     
     
     
     
     <link rel="stylesheet" media="screen" type="text/css" href="<?php   echo base_url();?>css/style/jqzoom.css" />
    <script type="text/javascript" src="<?php echo base_url(); ?>js/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>js/js/jquery.jqzoom.js"></script>
     
     
     
    <script type="text/javascript">
     
    $(document).ready(function(){
     
    			      $(".jqzoom").jqueryzoom({
     
     
     
    						xzoom: 300,		//zooming div default width(default width value is 200)
     
    						yzoom: 300,		//zooming div default width(default height value is 200)
     
    						offset: 40,		//zooming div default offset(default offset value is 10)
     
    						position: "right",  //zooming div position(default position value is "right")
     
                                                    preload: 1    , // preload of images :1 by default
     
    						lens:1  // lens over the image   1 by default
     
    					});
     
    				});
     
     
     
     
     
     
    </script>
     
     
     
     
     
     
     
     
    <title>Bienvenu Messieurs</title>
    </head>
     
    <body>
     
     
     
     
    <?php
        $nombreCol = 4;
     
    	if($ligne!=null){
    	    $nombreData = $ligne;
     
    	    if(round($nombreData/$nombreCol)!=($nombreData/$nombreCol)){
    		$nombreLigne = round(($nombreData/$nombreCol)+0.5);
    	    }
    	    else{
     
    		$nombreLigne = $nombreData/$nombreCol;
     
    	    }
     
    	    $k = 0; // indice du tableau
     
    ?>
    	    <table border="1">
     
    		<tbody>
     
    		    <?php for($i=1;$i<=$nombreLigne;$i++){
     
    			//ligne si 
    		    }
    		    ?>
     
    			<tr>
    				<?php
    				for($j=1;$j<=$nombreCol;$j++){
     
    				    if($k<$nombreData){
     
    					?>
     
    					<td>
     
    				       <?php
     
    					    if($rows!=null){
     
    						foreach($rows as $r){
     
    						    echo $r->id ;
    						}
    					    }
    					    else{
     
    						// pas de donnee
    						// redirect accueil
    					    }
     
     
     
     
    				       ?>
     
     
     
    					</td>
     
    			        <?php
    					$k++;
    				    }
    				    else{ // cellule vide
    				     ?>
     
    					<td>$nbsp</td>
    				<?php
    				    }
     
    				}//colonne $j				
    				?>			    
     
     
     
     
    			</tr>
     
     
     
     
     
    		</tbody>
     
     
     
     
     
     
     
     
     
     
     
     
    	    </table>
     
     
     
    <?php 	    
     
    	}
     
    	else {
    	    // y a pas de ligne retour accueil
    	}
     
     
    ?>
     
     
     
     
     
     
     
     
     
    </body>
     
     
     
     
    </html>
    mon problème c'est qu'où faut il mettre ce bout du code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
     
     
    foreach($rows as $r){
     
    						    echo $r->id ;
    						}
    					    }
    					    else{
     
    						// pas de donnee
    						// redirect accueil
    					    }

Discussions similaires

  1. comment maintenir les indexes d'une base de donnée
    Par moi.moi dans le forum Administration
    Réponses: 1
    Dernier message: 14/08/2012, 15h36
  2. comment editer les donnee d'une base de donnees dans une application xbap?
    Par sanaaafkir dans le forum Windows Presentation Foundation
    Réponses: 6
    Dernier message: 19/05/2008, 16h26

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