Couleur de fond liste

isitien · 18/09/2011, 06h32

Bonjour,

Je fais une liste et je voudrais appliquer une couleur de fond avec un margin, le probleme se pose que je mets dans la meme liste 2 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
 
<ul>
<li>
<div> // 1ere div
<label for="username">Username</label>
<input type="text" name="username" value="" autocomplete="on" size="20" maxlength="30" class="classUsr" />
<span class="uMsg showImg"></span>
</div>
// 2eme div
<div class="ueMsg showError"></div>
</li>
 
<li> // 2eme liste
<div> // 1ere div
<label for="nom">name</label>
<input type="text" name="name" value="" autocomplete="on" size="20" maxlength="30" class="className" />
<span class="uMsg showImg"></span>
</div>
// 2eme div
<div class="ueMsg showError"></div>
</li>

alors je mets du texte en 2eme div, juste une petite phrase d'une seule ligne, cette derniere vient juste au dessus de la 2eme liste disant avec un label nom.

Comment effectuer un saut de ligne dans une liste et apres on aura la 2eme liste.

Merci

NoSmoking · 18/09/2011, 07h56

Bonjour,
modifies ton approche de conception et utilises les FIELDSET, par exemple

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<fieldset>
  <label for="username">Username</label>
  <input type="text" name="username" id="username" value="" autocomplete="on" size="20" maxlength="30" class="classUsr" />
  <span class="uMsg showImg"></span>
  <div class="ueMsg showError"></div>
</fieldset>
<br>
<fieldset>
  <label for="nom">name</label>
  <input type="text" name="name" id="name" value="" autocomplete="on" size="20" maxlength="30" class="className" />
  <span class="uMsg showImg"></span>
  <div class="ueMsg showError"></div>
</fieldset>

...je ne vois pas le rapport avec la couleur

au passage :
- le for des balises label fait référence à une id d'un contrôle.

- les commentaires en HTML se font de la façon suivante

Code html :

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

1
2
3
<!-- début de commentaire
texte en commentaire
fin de commentaire -->

jreaux62 · 18/09/2011, 07h58

Bonjour,

Code :

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

1
2
3
	<style type="text/css">
ul li { margin-bottom:20px; }
	</style>

+ ajouter </ul> à la fin.

Citation:

Envoyé par NoSmoking

je ne vois pas le rapport avec la couleur

Moi non plus. D'ailleurs, je n'ai pas tout compris aux "explications"...

isitien · 19/09/2011, 04h12

quand je mets la souris sur le champs input, un champs cache en css apparaissait sur la ligne suivante indiquand un message:

http://imageshack.us/photo/my-images/90/form1.png

http://imageshack.us/photo/my-images/716/form2c.png

http://imageshack.us/photo/my-images/51/form3x.png

image1: formulaire avec un margin 2px qui est la ligne blanche entre username et genre

image2: quand je mets la souris sur l'input de username, un message apparaissait entre la ligne de username et la ligne de genre, ce qui fait le margin n'est pas visible

image3: le resultat souhaitable, qui est:

username
message erreur
marigin 2 px
genre
message erreur
marigin 2 px

voila le code:

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
 
<head>
<style type="text/css">
ul {
    list-style: none;
}
 
li {
    font-weight: bold;
    background-color: #d6d6d6;
    margin: 2px;
    padding-right: 5px;    
}
</style>
</head>
 
<body>
<form ...>
<fieldset>
<ul>
<li>
<div>
<label for="username" style="float:right; width:130px">username</label>
<input type="text" name="username" value="" autocomplete="on" size="20" maxlength="30" class="classUsr" id="username" />
</div>
<div class="info">Message erreur ici</div>
</li>
<li>
<div>
<label for="gender" style="float:right; width:130px">Genre</label>
<img src="male.png" width="20" height="20" align="absmiddle">
<input type="radio" name="gender" value="1" class="classGender" />
<img src="female.png" width="20" height="20" align="absmiddle">
<input type="radio" name="gender" value="2" class="classGender" />
</div>
<div class="info">Message erreur ici</div>
</li>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email