bonjour,
je souhaitais aligner des Div et centrer le conteneur au milieu de ma page, mais ca ne marche pas correctement.
au debut j'avais tenté:

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
<body>
<div id="containercard" class="stylecontainer">
	<div id="card00"	class="stylerobotcard" />	
	<input type=text id="nb00" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
    	<div id="card01"	class="stylerobotcard" />
	<input type=text id="nb01" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
    	<div id="card02"	class="stylerobotcard" />		  
	<input type=text id="nb02" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
    	<div id="card03"	class="stylerobotcard" />		  
	<input type=text id="nb03" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
    	<div id="card04"	class="stylerobotcard" />		  
    	<input type=text id="nb04" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
</div>
<div>
	<div>
		<div id="board"	class="styleboard" />		  	
	</div>
</div>
</body>

le probleme etait que les cartes se superposaient... donc du coup, j'ai mis les divs dans des sous-divs, comme ceci: (et là j'ai bien le résultat escompté, des cartes qui se suivent avec des input box au bon endroit...
voici le code:

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
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<HEAD>
	<title>Robots Aspirateurs</title>
<link rel="stylesheet" type="text/css" href="robotsaspi.css">
<script type="text/JavaScript" src="robotsaspi.js"></script>
</HEAD>
<body>
<div id="containercard" class="stylecontainer">
	<div>
		<div id="card00"	class="stylerobotcard" />	
		<input type=text id="nb00" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
	</div>
	<div>	  
    		<div id="card01"	class="stylerobotcard" />
		<input type=text id="nb01" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
	</div>
	<div>		  
    		<div id="card02"	class="stylerobotcard" />		  
		<input type=text id="nb02" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
	</div>
	<div>
    		<div id="card03"	class="stylerobotcard" />		  
		<input type=text id="nb03" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
	</div>
	<div>
    		<div id="card04"	class="stylerobotcard" />		  
    		<input type=text id="nb04" class="styleInput" size=1 maxlength=3 onkeyup="TestEtAnnonce()" value="0">
	</div>	
		<!-- On utilise ci dessous la class styleInput>	
		-->	
	</div>
</div>
<div>
	<div>
		<div id="board"	class="styleboard" />		  	
	</div>
</div>
</body>
</HTML>
les images font 100 largeur x 150 hauteur
Le soucis , est que je n'arrive pas à centrer correctement les div dans le conteneur! (qui est un peu plus grand) j'ai un décalage dû certainement au float: left... mais le float: center ne fait pas le résultat escompté, j'ai les div qui se mettent en colonne.....

donc j'ai deux questions:
1) est ce que j'ai déjà un moyen d'eviter l'imbrication dans l'imbrication des div pour les aligner et les centrer?
2) sinon comment puis je les centrer correctement dans mon container qui est volontairement plus grand de 50 pixels? (mais ca pourrait être autrechose en plus)

voici 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
body{
        background: #000;
        margin: 10;
        padding: 0;
}
 
 
.stylecontainer
	{
		position: relative;
		width:550;
		margin:auto;
	}
 
.stylerobotcard
	{
		background: url('robotsaspi.png') no-repeat;	
		position: relative;
		width:100;
		height:150;
		float:left;
		margin:auto;
	}
 
 
 
.styleInput
	{
     		position: relative;
     		top: 10px;
     		left: 20px;
     		z-index: 1;
     		text-align: center;
	}
 
 
.styleboard
	{
		background: url('DallageMini.jpg') no-repeat;	
		position: relative;
		width: 660;
		height: 495;
		float: left;
		margin:auto;
	}