Probleme de construction css

**orphen** · 04/08/2008, 18h36

Bonsoir à tous,

Voici un visuel d'un rendu que j 'ai obtenu.

J'aimerai que les cadres rouges soient à coté du petit cadre jaune.

Pour ce faire j'ai fais une liste (ul + li)
Chaque li contient deux balises (un div et un p)
Les deux ont un float left.
Le p peut être sur plusieurs lignes.

Pour le moment si mon p est sur une seule ligne tout va bien mais si il passe sur deux tout pete comme sur le visuel.

Voici mon html concerner

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
 
				<ul id="rubriques">
					<li>
						<div></div>
						<p>rubrique 1 rubrique 1 rubrique 1</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 2</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 3</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 4 rubrique 1 rubrique 1</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 5</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 6</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 7</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 8</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 9</p>
					</li>
				</ul>

Et mon 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
 
#rubriques{
	width:188px;
	margin:5px auto 0 auto;
	padding:0 0 5px 0;
	list-style:none;
}
 
#rubriques li{
	margin:0 0 6px 0;
	padding:0 0 0 5px;
	overflow:auto;
	height:2%;
}
 
#rubriques li div{
	width:18px;
	height:18px;
	border:1px solid gold;
	float:left
}
 
#rubriques li p{
	border:1px solid red;
	margin:0;
	padding:0 0 0 10px;
	float:left;
}

Comment puis-je corriger ce problème?

Merci par avance

**orphen** · 05/08/2008, 10h31

Si mon soucis n'est pas très clair n'hésitez pas à me le dire.

Merci

**pierre24** · 05/08/2008, 10h35

As tu essayé d'elargir le conteneur rubrique ou rubrique li? Car peu etre que c'est cela qui fait que ton float fonctionne mal !

**orphen** · 05/08/2008, 10h57

Merci pour ta réponse;

Je viens d'essayer en retirant les width, et en les élargissant.
Le problème reste le même

Une autre idée?

**c_s_s** · 05/08/2008, 11h24

Je viens d'essayer sous Firefox, IE7 et IE6, les cadres rouges ne passent pas à la ligne.

Le problème ne vient peut-être pas de la portion de code que tu as donné.

Tu as une page en ligne ?

Sinon, à quoi sert ton height:2%; sur #rubriques li ?

**orphen** · 05/08/2008, 11h57

Je vai donc poster mon code html et css en entier.

Mon code 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Agenda - Pastorale</title>
<link href="css/commun.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="page">
	<div id="calendrier">
 
		<div id="rubriques_agenda">
			<div id="corps_rubriques_agenda">
				<h5>
					Th&egrave;mes de l'Agenda
				</h5>
					<ul id="rubriques">
						<li>
							<div class="rubrique1"></div>
							<p>rubrique 1</p>
						</li>
						<li>
							<div class="rubrique2"></div>
							<p>rubrique 2</p>
						</li>
						<li>
							<div class="rubrique3"></div>
							<p>rubrique 3</p>
						</li>
						<li>
							<div class="rubrique4"></div>
							<p>rubrique 4</p>
						</li>
						<li>
							<div class="rubrique5"></div>
							<p>rubrique 5</p>
						</li>
						<li>
							<div class="rubrique6"></div>
							<p>rubrique 6</p>
						</li>
						<li>
							<div class="rubrique7"></div>
							<p>rubrique 7</p>
						</li>
						<li>
							<div class="rubrique8"></div>
							<p>rubrique 8</p>
						</li>
						<li>
							<div class="rubrique9"></div>
							<p>rubrique 9</p>
						</li>
					</ul>
			</div>
 
				<div>
				<input type="submit" class="valider_rubrique" value="Ok !" />			
				</div>
		</div>
 
		<div id="corps_agenda">
			<div id="head_corps">Rubrique 1</div>
			<div id="agenda">
				<div id="head_tableau">
					<a href="#" class="lien_suiv_prec">&lt;&lt;</a>
					  <select style="margin:0 0 0 10px;">
						<option>Janvier</option>
						<option>F&eacute;vrier</option>
						<option>Mars</option>
						<option>Avril</option>
						<option>Mai</option>
						<option>Juin</option>
						<option>Juillet</option>
						<option>Ao&ucirc;t</option>
						<option>Septembre</option>
						<option>Octobre</option>
						<option>Novembre</option>
						<option>D&eacute;cembre</option>
					</select>
					<select style="margin:0 10px 0 0">
						<option>2008</option>
					</select>
					<a href="#" class="lien_suiv_prec">&gt;&gt;</a>
					<input type="submit" value="Voir..." class="bouton_voir" />
				</div>
				<table width="754"  cellpadding="0" cellspacing="0"  id="tableau_agenda">
				  <tr>
					<td>Lundi</td>
					<td>Mardi</td>
					<td>Mercredi</td>
					<td>Jeudi</td>
					<td>Vendredi</td>
					<td>Samedi</td>
					<td>Dimanche</td>
				  </tr>
				  <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				  </tr>
				  <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				  </tr>
				  <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				  </tr>
				  <tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				  </tr>
			  </table>
 
			</div>
		</div>
 
	</div>
</div>
</body>
</html>

Mon code 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
/* global
********************************************************/
body{
	margin:0;
	padding:0;
}
 
img{
	border:none;
}
 
.img_block_droit{
	display:block;
	float:right;
}
 
/* Page
********************************************************/
 
 
/* Agenda
********************************************************/
#calendrier{
	width:960px;
	overflow:auto;
	height:2%;
}
 
#rubriques_agenda{
	width:190px;
	float:left;
	background-color:#c2d1db;
}
 
#corps_agenda{
	width:762px;
	float:left;
	margin:5px 0 0 8px;
}
 
#agenda{
	padding:10px 0 0 0;
	border-left:1px solid #e97738;
	border-right:1px solid #e97738;
	border-bottom:1px solid #e97738;
}
 
#head_tableau{
	width:754px;
	margin:0 auto;
	padding:5px 0;
	background-color:#e0eaf0;
	text-align:center;
}
 
#tableau_agenda{
	margin:0 auto;
	border:none;
}
 
#head_tableau select{
	font:12px Arial, Helvetica, sans-serif;
	color:#000;
	border:1px solid #fff;
	background-color:#FFF;
}
 
#corps_rubriques_agenda{
	width:188px;	
	margin:5px auto 0 auto;
	padding:2px 0 0 0;
	background-color:#FFF;
}
 
#corps_rubriques_agenda h5{
	width:184px;
	background-color:#e0eaf0;
	margin:0 auto;
	padding:0;
	text-align:center;
	color:#476666;
}
 
#head_corps{
	height:22px;
	background-image:url(../images/page/head.jpg);
	font:bold 16px Arial, Helvetica, sans-serif;
	padding:2px 0 2px 5px;
	color:#FFF;
}
 
 
/*rubriques*/
 
#rubriques{
	width:188px;
	margin:5px auto 0 auto;
	padding:0 0 5px 0;
	list-style:none;
}
 
#rubriques li{
	margin:0 0 6px 0;
	padding:0 0 0 5px;
	overflow:auto;
	height:2%;
}
 
#rubriques li div{
	width:18px;
	height:18px;
	border:1px solid gold;/*Couleur et taille contour*/
	float:left
}
 
#rubriques li p{
	margin:0;
	padding:0 0 0 10px;
	float:left;
}
 
/*Couleur rubriques*/
 
.rubrique1{
	background-color:#ffff00;
}
 
.rubrique2{
	background-color:#ffcc00;
}
 
.rubrique3{
	background-color:#cfc8a5;
}
 
.rubrique4{
	background-color:#bbe0e3;
}
 
.rubrique5{
	background-color:#ff9900;
}
 
.rubrique6{
	background-color:#ff33cc;
}
 
.rubrique7{
	background-color:#0099ff;
}
 
.rubrique8{
	background-color:#0000ff;
}
 
.rubrique9{
	background-color:#99cc00;
}
 
/*Liens*/
.lien_suiv_prec{
	font: bold 12px Arial, Helvetica, sans-serif;
	color:#476666;
	text-decoration:none;
}
 
.lien_suiv_prec:hover{
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#476666;
	text-decoration:underline;
}
 
/*Boutons*/
.bouton_voir{
background-color:#e97738;
color:#fff;
cursor:hand;
border:1px outset #e97738;
font:bold 11px Arial, Helvetica, sans-serif;
}

Le height 2% est un correctif pour ie6 qui ne prend pas en compte overflow auto.

Merci beaucoup de m'aider a trouver d'où vient le problème

**c_s_s** · 05/08/2008, 12h16

Avec le code complet je ne reproduis ton problème que dans 1 seul cas : lorsque le texte contenu dans le <p> est sans espace et plus large que le <p>.

Tu peux essayer d'utiliser un script pour tronquer le texte qui dépasse, ou tu peux ajouter un overflow: hidden; sur ton #rubriques li p pour masquer tout ce qui dépasse de ton paragraphe (cette solution est plus simple mais moins belle).
J'ajouterais aussi un largeur à ton paragraphe (150px à vue de nez).

Avec du texte assez court ou espacé, tout s'affiche bien sous différentes navigateurs.
Il faut quand même se méfier des personnes susceptibles d'agrandir la taille de la police avec la molette ou le clavier.