aide pour faire une Div

**nebil** · 30/07/2006, 10h30

Bonjour a tous ,
voila quelqu'un pourrais t-il m'aider a avoir ce resultat

une div de 220 px de large et 220 px de haut
avec dedans comme vous le voyer a gauche du text
bien aligner avec la checkbox qui elle se trouve a droite bien en face
bien evidement valable sous IE et Firefox

**avogadro** · 30/07/2006, 10h50

tien mais ya la gruge du siecle dedans

HTML:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Test</title>
 
<link href="./style2.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<div id="boom">
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="test" value="1"></div>
</div>
 
</body>
</html>

CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div.menu {
	width: 220px;
	display: block;	
}
 
div#boom {
    height: 220px;
    width: 220px; 
    position: absolute; 
    border: 1px solid #FFFFFF; 
    background-color:#FFCC00;   
}

**avogadro** · 30/07/2006, 10h57

bon voila, cest tout propre ^^ (NB: appel ton css : style2.css)
mais sous IE ya une couille, faut plutot mettre : margin-left:65px;
Enfin l'idée est la, cest bon?

HTML:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Test</title>
 
<link href="./style2.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<div id="boom">
 
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
 
</div>
 
</body>
</html>

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
div.menu {
	width: 220px;
	display: block;	
}
 
div#boom {
    height: 220px;
    width: 220px; 
    position: absolute; 
    border: 1px solid #FFFFFF; 
    background-color:#FFCC00;   
}
 
input
{
	margin-left:75px;
}

**nebil** · 30/07/2006, 11h05

justement c'est parceque mon probleme initial viens de la , du fait que l'espace
ou la taille des check n'est pas la meme sur IE que sur firefox

sa a pas l'air de grand chose mais c'est une galére

**avogadro** · 30/07/2006, 11h16

sinon tu met un div avec le texte et un div avec toutes les checkbox collé justé a coté qui se redimensionne tout seul, bref ya plein de possibilité je pense !

met la, taper du code me fait mal lol je me suis défoncé le poigné hier soir ^^
mais bonne chance :]

**nebil** · 30/07/2006, 11h18

oui mais c'est pareil aussi je pense pas que se soit une solution d'avoir
40 div pour les check et 40 pour les textes , il doit y avoir une solution simple !!!
de plus c'est pas tres pilotable en couleur espacement position etc.....

en tout cas merci pour vos reponses !!!

**nebil** · 30/07/2006, 11h33

alors la question c'est pourquoi quand on ajoute un float:right sur les input
il ne prennent pas comme padding ou margin top le haut de la div mais le bas du texte se qui fait le decalage ici

HTML

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Test</title>
 
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
 
<div id="boom">
 
<div class="menu">Climatisation Naturel  
  <input type="checkbox" name="test2" value="1">
</div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
<div class="menu">Climatisation Naturel<input type="checkbox" name="test" value="1"></div>
 
</div>
 
</body>
</html>

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
div.menu {
	width: 220px;
	display: block;	
}
 
div#boom {
    height: 220px;
    width: 220px; 
    position: absolute; 
    border: 1px solid #FFFFFF; 
    background-color:#FFCC00;   
}
 
input
{
float:right;
}

**nebil** · 30/07/2006, 12h18

bon comme personne ma apporté la solution , et comme je suis persuadé qu'elle existe voila le defi

faire sa avec 1 et une seul div de 220px de large autant valable sous IE que firefox

**Candygirl** · 30/07/2006, 12h39

C'est quoi le but de ces checkbox ? Est-ce une liste de carcatéristiques, ... ? (pour choisir la balise la plus appropriée). perso je ferais comme ça je pense:

html:

Code :

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

1
2
3
4
5
6
<ul>
  <li><input type="checkbox" name="checkbox" value="checkbox" />sdggd</li>
  <li><input type="checkbox" name="checkbox" value="checkbox" />sdgyvcvxcyvgd</li>
  <li><input type="checkbox" name="checkbox" value="checkbox" />sdyxvccggd</li>
  <li><input type="checkbox" name="checkbox" value="checkbox" />sdggd</li>
</ul>

css:

Code :

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

1
2
3
4
* 		{padding:0; margin:0;}
ul 		{width:220px; list-style:none; list-style-type:none; background-color: #FFCC00;}
input {float:right;}
li 		{clear:right;}

**nebil** · 30/07/2006, 12h48

oui c'est une liste de carcatéristiques

l'alignement text / chekbox n'est pas bon sous firefox sans compté sur la marge droite des checkbox qui n'est pas aussi le meme sous IE et firefox

**Candygirl** · 30/07/2006, 13h08

Code :

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

1
2
3
4
5
6
<div>
  <input type="checkbox" name="checkbox" value="checkbox" />sdggd<br />
  <input type="checkbox" name="checkbox" value="checkbox" />sdgyvcvxcyvgd<br />
  <input type="checkbox" name="checkbox" value="checkbox" />sdyxvccggd<br />
  <input type="checkbox" name="checkbox" value="checkbox" />sdggd<br />
</div>

avec le même css sauf que tu remplaces le li par br et le ul par div. Mais bon...

**nebil** · 30/07/2006, 13h14

Désolé mais c pas sa , sa donne pas l'effet demander !!!
il faut que le texte soit a gauche que la div est une largeur de 220 px
et que les check soit en face tu texte a droite , il faut aussi le meme rendu sur IE et Firefox

**Candygirl** · 30/07/2006, 23h35

Envoyé par nebil

l'alignement text / chekbox n'est pas bon sous firefox sans compté sur la marge droite des checkbox qui n'est pas aussi le meme sous IE et firefox

IE mettant à la checkbox une bordure qui semble insupprimable (enfin je n'ai pas cherché très loin), perso, si je devais vraiment avoir le même rendu, je crois que j'appliquerais à firefox la même marge que la bordure par défaut d'IE.
En ajoutant par exemple quelque chose du genre:

Code :

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

input {margin:4px 3px 3px 4px !important; margin:0;}

Il me semble que le code proposé par MasterOfChakhaL avec le double float peut poser problème en cas de label passant sur 2 lignes selon la longueur des mots (la checkbox se retrouvant repoussée au-dessous du label). Mais facilement réglé en attribuant un width au label (200px) et d'ailleurs plus esthétique que ma solution lorsque cela passe sur 2 lignes.

Par contre, tel quel, il me semble qu'elle présente le même problème de rendu IE/FF que ma solution. Comme tu as mis "résolu" je serais intéressée de savoir comment

**MasterOfChakhaL** · 31/07/2006, 09h42

je dois avouer que je n'avais pas pensé aux labels multilignes...

en imposant une taille de 180 px pour les labels, tu dois t'en sortir. Et pour être sur, autant indiquer explicitement 40px pour les checkbox (vu qu'avec le code fourni il n'y a ni marge ni padding, ca devrait passer sur tous le browsers)

**masu** · 31/07/2006, 11h25

Pour résoudre le probleme de libelle sur 2 ligne j'utilise une balise p dans les presentations de formulaires.
Je ferai ca comme ca personellement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
	margin:0;
	padding:0;
}
#chk_list {
	width:220px;
	background: yellow;
}
#chk_list input {
	float: right;
}
input[type=checkbox] {
	margin: 4px 3px 3px 4px;
}

Code :

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

1
2
3
4
5
<div id="chk_list">
	<p><input type="checkbox" id="chk1" /><label for="chk1">aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa</label></p>
	<p><input type="checkbox" id="chk2" /><label for="chk2">bbb</label></p>
	<p><input type="checkbox" id="chk3" /><label for="chk3">ccccc</label></p>
</div>

**fallais** · 31/07/2006, 16h39

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
<table width="220" height="220" style="background-color: #ff0000;" border="0">
<table width="220" style="background-color: none;" border="0">
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
<tr>
<td width="200">Climatisation Manuelle</td>
<td width="20"><input type="checkbox" name="a"</td>
</tr>
</table>
</table>

Voila, fait a l'arrache je sais pas si ca marche

**nebil** · 31/07/2006, 18h51

je prend ta solution Candygirl merci a vous .

au fait celui qui convertit le code de la facon la plus strict c'est lequel ?
IE / FF

aide pour faire une Div

CSS

Vue hybride

Discussions similaires

Partager

Partager