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 :

Faire un tableau avec des divs


Sujet :

Tableau en CSS

  1. #1
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut Faire un tableau avec des divs
    Bonjour à tous,

    Je voudrais afficher un ensemble de div de manière ordonnée. Les divs doivent être placés l'un à côté de l'autre et les uns au dessus des autres. Enfin bref, ils doivent former un tableau (j'espère que je suis assez clair).

    Voici où j'en suis. Mon souci actuel est que les div sont décalés. Cet exemple doit afficher un "tableau" de 3 lignes et 2 colonnes.

    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
     
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Je dbute en jQuery</title>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
    	<style type="text/css">
    		#parking{
    			background: #FAD7A3;
    			border: 2px solid #FFFF00;
    			height: 500px;
    			position: relative;
    			overflow-y: scroll;
    		}
     
    		.voiture{
    			position: relative;
    			top:10px;
    			left:10px;
    			width: 80px;
    			height: 80px;
    			background:#33CCFF;
    			margin-bottom:20px;
    		}
     
    		.voiture2{
    			position: relative;
    			top:10px;		
    			left:150px;
    			width: 80px;
    			height: 80px;
    			background:#33FFCC;
    			margin-bottom:20px;
    		}	
    	</style>
    	<script type="text/javascript">
    	jQuery(document).ready(function($){
    		$( ".voiture" ).draggable({ containment: 'parent' });
    		$( ".voiture2" ).draggable({ containment: 'parent' });
    	});
    	</script>
    </head>
    <body>
    	<div id="parking">
    		<div class="voiture">1</div> 
    		<div class="voiture">2</div> 
     
    		<div class="voiture2">3</div> 
    		<div class="voiture2">4</div> 							
    	</div>
    </body>
    </html>

    Il me manque les propriétés CSS qui vont bien à appliquer sur chaque div. Je voudrais pouvoir les rendre draggable dans un autre plus grand div par la suite.

    Merci beaucoup.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    tu fais quoi de l'autre post, http://www.developpez.net/forums/d12...e-tableau-div/, on le passe en perte et profit ?

  3. #3
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Salut NoSmoking,

    Il me semblait qu'à une époque il y avait un bouton "ABANDONNER" ou un truc comme ça. Je ne voulais pas le mettre à résolu car ta solution ne résolvait pas tout à fait mon problème. Du coup, je sais pas trop quoi en faire ... Peut-être le passer à résolu tout de même. :S

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    1/ je pense que ce que veux aussi dire Nosmoking, c'est qu'il a passé du temps à te fournir une réponse (sur l'autre post), à laquelle tu n'as même pas daigné répondre.

    2/ Poser deux fois la même question ne permet pas d'avoir une réponse deux fois plus rapide. La preuve.

    3/ Il se trouve aussi que Nosmoking est "modérateur".
    Ce qui signifie qu'il te suffisait de LUI DEMANDER de DEPLACER ton message dans le bon forum (au lieu d'en créer, sournoisement, un nouveau) !
    Tu y penseras la prochaine fois.

  5. #5
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Oo

    Non mais jreaux62, pas la peine de continuer à troller, j'ai très bien compris ce que voulais dire NoSmoking. Mea culpa, je suis un vilain garçon. Et je posais donc la question : Comment faire pour abandonner un post ? Il aurait été plus intelligent de fournir une réponse à cette question de sorte que cet incident ne se reproduise plus ...

  6. #6
    Invité
    Invité(e)
    Par défaut
    No problemo. Troll y soit qui mal y pense !

    Bonne Année à toi, et à tous !

Discussions similaires

  1. Réponses: 9
    Dernier message: 08/07/2014, 17h41
  2. Faire un tableau avec des boutons et du texte
    Par Avatar36 dans le forum Qt Creator
    Réponses: 5
    Dernier message: 13/05/2014, 09h22
  3. Faire un tableau avec des div
    Par identifiant_bidon dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 29/12/2012, 11h31
  4. Faire une présentation avec des div
    Par patheo2 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/12/2012, 16h07
  5. Réponses: 5
    Dernier message: 26/08/2006, 12h14

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