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 :

tableau en div


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    137
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2009
    Messages : 137
    Par défaut tableau en div
    Hello,

    jai fait un tableau en div parceque juste trop galère les background-images dans des balises tr enfin bref voici mon 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
     
    <div class="panier">
     
     
    				<div class="panier_header">
    				<caption class="panier_entete">Votre panier</caption>
    				</div>
    				<div class="panier_body">
    				<div class="cell_1">	<b>Vos produits</b>	</div>
    				<div class="cell_2">	<b>Prix</b>			</div>
     
    				<div class="cell_3">	<b>Qty</b>			</div>
    				<div class="cell_4">	<b>Total</b>		</div>	
    				</div>		
    							<div class="panier_body">
    								<div class="cell_1">ghz		</div>
    								<div class="cell_2">4 	</div>  	
    								<div class="cell_3"> 3x 					</div> 
    								<div class="cell_4">12	</div>
     
    							</div>		
    							<div class="panier_body">
    								<div class="cell_1">xxx		</div>
    								<div class="cell_2">3.90 	</div>  	
    								<div class="cell_3"> 8x 					</div> 
    								<div class="cell_4">31.2	</div>
    							</div>		
    							<div class="panier_body">
    								<div class="cell_1">yyy		</div>
    								<div class="cell_2">4 	</div>  	
    								<div class="cell_3"> 8x 					</div> 
    								<div class="cell_4">32	</div>
    							</div>		
    							<div class="panier_body">
    								<div class="cell_1">	<b>Prix total :</b> 												</div>
    								<div class="cell_4">	75.2 								</div>
    							</div>
    							<div class="panier_foot">
    								<div class="cell_1">	<a href="http://localhost/test/accueil_membre.php?panier">s</a>		</div>
    								<div class="cell_4">	<a href="http://localhost/test/accueil_membre.php?commander">s</a>	</div>
    							</div>		
    			</div>
    et le 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
    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
     
    .panier 
    {
    	color: black;
    	float: right;
    	margin-right: 5%;
    	position:relative;
    	width: 307px;
    }
    .panier_header
    {
    	padding-top: 5px;
    	padding-left: 5px;
    	margin: 0px;
    	background: url(image/panier/entete.jpg) no-repeat;
    	height: 26px;
    }
    .panier_body_total
    {
    	width: 307px;
    	height: 30px;
    	background: url(image/panier/centre.jpg) no-repeat;
    	float: right;
    }
    .panier_body
    {
    	width: 307px;
    	height: 30px;
    	background: url(image/panier/centre.jpg) no-repeat;
    	float: left;
    }
    .panier_foot
    {
    	width: 307px;
    	height: 30px;
    	background: url(image/panier/piedpage.jpg) no-repeat;
    	float: left;
    }
    .cell_1
    {
    	padding-left: 5px;
    	float: left;
    	width: 127px;
    	height: 30px;
    }
    .cell_2
    {
    	float: left;
    	width: 50px;
    	height: 30px;
    }
    .cell_3
    {
    	float: left;
    	width: 50px;
    	height: 30px;
    }
    .cell_4
    {
    	float: left;
    	width: 75px;
    	height: 30px;
    }
    en attachment le résultat, cependant je voudrais avoir "prix total" aligné avec la colonne "qty" et le "75.2" total aligné avec les "prix" comment dois-je ?procéder ?
    Images attachées Images attachées  

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2009
    Messages : 186
    Par défaut
    Ce n'est peut être pas la section appropriée
    Un tableau en div, je suis pas accro

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="panier_body">
       <div class="cell_1">/</div>
       <div class="cell_2">/</div>
       <div class="cell_3"><b>Prix total :</b></div>
       <div class="cell_4">75.2</div>
    </div>
    Cela devrait faire l'affaire.
    Tu l'aurais fait avec une table et des tr td, ça aurait été plus simple

    Bien cordialement.

  3. #3
    Membre éprouvé
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations forums :
    Inscription : Mars 2010
    Messages : 82
    Par défaut
    Bonjour, à mon avis le plus simple est de faire comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    .cell_1_total
    {
    	padding-left: 5px;
    	float:right;
    	height: 30px;
    }
     .cell_4_total
    {
    	float: right;
    	width: 75px;
    	height: 30px;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <div class="panier_body">
       <div class="cell_4_total">75.2</div>						   
       <div class="cell_1_total"><b>Prix total :</b></div>
    </div>
    Evidemment je l'ai mis en class, vous pouvez le mettre en id si ils sont seuls.
    Vous pouvez aussi mettre cell_1 vide, cell_2 vide, cell_3 prix total et cell_4 75.2

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    137
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2009
    Messages : 137
    Par défaut merci
    merci à vous,

    j'avais effectivement oublié le float right sur les cell_1 / cell_4 je l avais juste mis sur le conteneur.

    @ptilemare effectivement c'est beaucoup plus simple mais la gestion des background-image en <table> sincèrement c est vraiment trop trop galère... Avant j étais en <table> amias je suis devenu fou du coup je suis passé en div et j ai réussi à faire ce que je voulais en 1h.

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

Discussions similaires

  1. tableau contre div
    Par loan33 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 20/11/2006, 22h55
  2. tableau ou div?
    Par brotelle dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 11/04/2006, 16h58
  3. conseil : tableau ou div?
    Par clairette dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 24/01/2006, 20h19
  4. Tableau ou div?
    Par krfa1 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 22/09/2005, 08h56
  5. [XHTML 1.0] Transformer mon tableau en div
    Par stailer dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/05/2005, 18h50

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