Soucis de centrage de conteneur de div.

**§Gama§** · 20/03/2013, 22h12

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;
	}

**NoSmoking** · 20/03/2013, 22h35

Bonsoir,
pas bien compris le but à atteindre, je mettrais cela sur le compte de la fatigue, néanmoins...
- mettre des unités aux valeurs dans le CSS height:100px sinon elles ne sont pas prises en compte
- float:center ???? n'existe pas

**§Gama§** · 20/03/2013, 23h12

Envoyé par NoSmoking

Bonsoir,
- float:center ???? n'existe pas

Envoyé par rodolphebrd

Il ne peut faire aucun résultat puisque ça n'existe pas.

ahaha... merci déjà pour l'info

du coup j'avais le comportement comme ci le float n'était pas pris en contre... et ca centrait tout... d'où le fait que je croyais que ca influait!!
si vous voyez pour le reste, n'hésitez pas!

**NoSmoking** · 20/03/2013, 23h16

je les omets la plupart du temps... et ca marche

cela reste une mauvaise habitude, mets un DOCTYPE, ce qui très fortement recommandé, et tout foutra le camp.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="card00"	class="stylerobotcard" />

les balises DIV ne sont pas des balises auto fermantes.

**§Gama§** · 20/03/2013, 23h25

Excellent merci... c'était à cause de çà!
Et dire que j'ai toujours fait çà!!!
je vais suivre les conseils

**rodolphebrd** · 20/03/2013, 23h18

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="card04"	class="stylerobotcard" />

ça n'existe pas non plus.

Il faut fermer vos div correctement.

J'ai comme l'impression que vous vous êtes compliqué la vie en surconsommant des DIV.

Vous pouvez positionner vos blocs plus simplement en débroussaillant un peu.

edit: encore grillé, je vais me coucher!