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

**MasterOfChakhaL** · 30/07/2006, 20h57

voilà quelque chose qui me semble correct:

HTML:

Code :

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

1
2
3
4
5
6
 
<div id="menu">
	<label for="chk1">aaaaaaa</label><input type="checkbox" id="chk1" />
	<label for="chk2">bbb</label><input type="checkbox" id="chk2" />
	<label for="chk3">ccccc</label><input type="checkbox" id="chk3" />
</div>

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
 
* {
	margin:0;
	padding:0;
}
#menu {
	width:220px;
}
 
#menu label {
	float:left;
	clear:left;
}
 
#menu input {
	float:right;
	clear:right;
}

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

Merci MasterOfChakhaL

**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)

**nebil** · 31/07/2006, 10h36

Oui effectivement , il y a bien un probleme ,
le premier le rendu des couleurs sur FF il neprend pas en compte les couleur de fond , sans compté comme la fait remarquer Candygirl il y a cette marge qu'attribut IE par defaut , qui apparement est difficile a corriger puisque si on l'ajoute a FF elle s'ajoute en plus a IE ?

du coup le post n'est plus resolu !!!

Code :

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

1
2
3
4
5
6
 
<div id="menu">
<label for="chk1">aaaaaaa</label><input type="checkbox" id="chk1" />
<label for="chk2">bbb</label><input type="checkbox" id="chk2" />
<label for="chk3">ccccc</label><input type="checkbox" id="chk3" />
</div>

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
* {
margin:15;
padding:0;
}
 
#menu 
{
background-color:#CCCCCC;
width:220px;
}
#menu label 
{
background-color:#CCCCCC;
float:left;
clear:left;
}
#menu input 
{
background-color:#CC6699;
float:right;
clear:right;
}

sous FF

Sous IE

**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>

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

pour le coup des couleurs il faut feinter par exemple si on veu que le fond soir jaune sous le labels et une colonne de couleur en dessous des checkbox:

Code :

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

1
2
3
4
#chk_list {
	width:220px;
	background: yellow url(img.png) repeat-y right;
}

img.png est une image de 1px de haut pour 20px de large d'une couleur unie.

**Candygirl** · 31/07/2006, 16h00

Envoyé par nebil

Oui effectivement , il y a bien un probleme ,
le premier le rendu des couleurs sur FF il neprend pas en compte les couleur de fond...

Si tu ajoutes un width de 200 au label, ta couleur ira jusqu'au checkbox, par contre, pas moyen d'en mettre une juste pour la checkbox vu que FF n'autorise l'ajout que de marges, pas de padding autour. Si tu ne dois avoir qu'une couleur (comme l'exemple demandé d'ailleurs), tu l'attribues à ton div, pour 2 couleurs, tu devras passer par une image de fond je pense. Maintenant pour que ta couleur de fond s'affiche, il faut que ton div ait du contenu dans le flux, ce qui n'est pas le cas actuellement vu qu'il ne contient que des flottant. Tu peux y remédier, par exemple, en ajoutant ceci dans ton css:

Code :

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

1
2
3
4
5
6
7
8
9
div#menu:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
 
* html #menu {height:1%} /* hack IE si nécessaire*/

Ou alors ajouter un div ou hr contenant un clear:both avant la fermeture de ton div.

Envoyé par nebil

il y a cette marge qu'attribut IE par defaut , qui apparement est difficile a corriger puisque si on l'ajoute a FF elle s'ajoute en plus a IE ?

Le code que je t'ai proposé ne l'ajoute justement qu'à FF, pas IE. IE ne comprend pas le !important donc il prend le margin:0 . De cette manière FF et IE ont des chexbox de la même taille (mais pas opera qui a une checkbox plus grande...)

Après il faudra positionner la checkbox par raport à la taille de ton texte en jouant avec les marges (et bien sûr en cas d'agrandissement de police l'alignement variera légérement...)

Bref, pas de solution idéale pour moi et beaucoup de travail pour pas grand chose...

J'en propose une autre juste pour le fun mais pas efficace du tout pour des labels multilignes

et fortement dépendante de la taille de checkbox du navigateur, par contre elle a l'avantage d'avoir la puce de toute manière centrée sur le texte:

html

Code :

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

1
2
3
4
5
<ul id="menu">
	<li><input type="checkbox" id="chk1" /><label for="chk1">aaaaaaa</label></li>
	<li><input type="checkbox" id="chk2" /><label for="chk2">bbb</label></li>
	<li><input type="checkbox" id="chk3" /><label for="chk3">ccccc</label></li>
</ul>

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
* {
margin:0;
padding:0;
}
 
#menu 
{
background-color:#CCCCCC;
width:220px;
list-style:none;
}
 
#menu label 
{
position:relative;
left:-20px;
padding:3px;
}
#menu input 
{
position:relative;
left:200px;
margin:4px 3px 3px 4px !important; margin:0;
vertical-align:middle;
}

aide pour faire une Div

CSS

Discussions similaires

Partager

Partager