un methode smiliaire de clear: both ?

**{F-I}** · 26/03/2008, 19h22

Bonsoir à tous,

Vaut mieux une image plutôt qu'un long explication mal formulé (surtout de ma part)...

Voici l'aperçu en question :

Ne faites pas attention aux présentation (couleur etc...), je souhaite que le cadre blanc se ferme bien et je connais une solution qui n'est pas forcement agréable c'est d'ajouter un div vierge avec la propriété clear: both...

Voici le code source :

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
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Prog Créatif</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link href="design.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
<div id="wrapper">
	<div id="header">
    		<div id="zone_idef">
			S'inscrire | Se connecter
		</div>
		<h1>blabla</h1>
		<h2>tititatatoto</h2>
		<ul>
			<li class="first"><a href="xx.php" accesskey="1" title="">xx</a></li>
			<li><a href="xx.php" accesskey="2" title="">xx</a></li>
			<li><a href="xx.php" accesskey="3" title="">xx</a></li>
		</ul>
	</div>
</div>
<div id="content">
	<div id="colOne">
		<h2>xxxxxxt</h2>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<br />
        <h3><a href="http://www.handy-mobil.fr" title="Visiter le site www.handy-mobil.fr">www.handy-mobil.fr</a></h3>
        <div class="contenu_article">
        	<img src="images/ico_handymobil.jpg" alt="" width="102" height="102" class="image" />
			<p class="indent"><strong>Handy Mobil</strong> est une association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie.</p>
        </div>
  </div>
	<div id="col_gauche">
		<h3>Accessibilit&eacute;</h3>
		<ul>
			<li class="first"><a href="http://www.temesis.com/" title="Lien externe vers Temesis">Temesis</a></li>
			<li><a href="http://www.accessiweb.org/" title="Lien externe vers Accessiweb">Accessiweb</a></li>
		</ul>
</div>
</div>
<div id="footer">
	<p>Plan du site | Sitemap</p>
    <p>XHTML &amp; CSS</p>
</div>
</body>
</html>

Code CSS :

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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	padding: 0;
	margin: 0;
}
 
body {
	margin: 0;
	padding: 0;
	background: #311C00 url(images/background_corps.jpg);
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9B8767;
}
 
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #E8D6B4;
}
 
h2, h3 {
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	background: url(images/hr_corp_a.gif) repeat-x left bottom;
	text-transform: lowercase;
	letter-spacing: -1px;
}
 
h2 {
	font-size: 25px;
}
 
h3 {
	font-size: 17px;
	text-decoration: none;
}
 
h3 a {
	text-decoration: none;
}
 
h3 a:hover {
	text-decoration: none;
	color: #B6E13A;
}
 
p, ol, ul {
	line-height: 160%;
}
 
ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
 
ul li {
	padding: 2px 0 5px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
ul li.first {
	background: none;
}
 
a {
	color: #D9C09A;
}
 
a:hover {
	text-decoration: none;
	color: #FF0000;
}
 
strong {
	color: #D9C09A;
}
 
#wrapper {
	background: url(images/background_header.jpg) repeat-x;
}
 
/* Header */
 
#zone_idef {
	float: right;
	margin-top: 10px;
}
 
#header {
	width: 730px;
	height: 250px;
	margin: 0 auto;
}
 
#header * {
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	padding: 30px 0 0 0;
	letter-spacing: -2px;
	font-size: 36px;
}
 
#header h2 {
	float: left;
	padding: 50px 0 0 6px;
	background: none;
	font-size: 12px;
	font-weight: normal;
}
 
#header h2 a {
	text-decoration: none;
}
 
#header ul {
	float: right;
	margin: 0;
	padding: 90px 0 0 0;
	list-style: none;
}
 
#header li {
	display: inline;
}
 
#header li a {
	display: block;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #7DD2FA;
}
 
#header li.first a {
	border: none;
}
 
/* Content */
 
#content {
	width: 730px;
	margin: 0 auto;
}
 
#colOne {
	float: right;
	width: 500px;
}
 
#col_gauche {
	float: left;
	width: 184px;
}
 
#col_gauche h3 {
	margin-top: 10px;
	text-align: left;
}
 
/* Footer */
 
#footer {
	clear: both;
	width: 730px;
	margin: 20px auto;
	padding: 20px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
#footer p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
}
 
.contenu_article {
	background-color: #fff;
	padding-top: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90%;
}
 
.indent {
	margin-top: 0;
	margin-left: 130px;
}
 
.image {
	float: left;
	margin-right: 23px;
	border: solid 2px #663300;
}

je vous remercie beaucoup d'avance

**Erwan31** · 26/03/2008, 20h31

Bonjour,
oui le div vide est une des plus mauvaises solutions en effet.
Créer ce qu'on appelle un contexte de formatage bloc via la déclaration overflow:hidden ou overflow:auto appliquée au bloc conteneur.
C'est aussi possible en attribuant un float:left/right au conteneur mais autant éviter ce type de comportement...

Ne pas oublier de conserver l'état de layout (conféré ici au bloc conteneur avec width:90%) pour que ça fonctionne sous IE6.

**{F-I}** · 26/03/2008, 21h00

Merci de ta réponse.

Pour le moment j'ai pris la solution overflow:hidden, je lirai demain ton lien (parce que là je suis crevé).

J'ai un autre petit détail à te demander, comment obtenir un "groupe" de texte de façon plus propre au codage.

Tu vois qu'il y a 2 encardé, l'un en rouge et l'autre en bleu.

Je souhaite que les 2 différents textes seront placé à ces places (l'un texte dans la partie rouge et l'autre dans la partie bleu).

J'ai pensé d'ajouter 2 div mais je ne suis pas sur que ce soit une bonne idée (parce qu'il y a peut-être une autre solution).

Juste à savoir que la partie rouge doit être au milieu du hauteur par rapport au hauteur de l'image à côté

Encore merci à toi

**Erwan31** · 26/03/2008, 21h08

Je n'ai pas le temps de te répondre précisément maintenant mais penses
avant tout à soigner un minimum ton français, tu fais de grosses erreurs!
Tu n'es pas d'origine française non?

**Erwan31** · 27/03/2008, 18h28

J'ai pas bien saisi ce que tu voulais faire. Tu veux réduire la surface qu'occupe
tes 2 paragraphes pour qu'ils puissent contenir dans les 2 encadrés?

**{F-I}** · 27/03/2008, 18h42

Pas souci, je vais t'expliquer.

Remarquons qu'il y a 2 textes différents, l'un plus clair et l'autre plus foncé.

Je souhaite que la partie clair commence toujours à droite de l'image (même si les lignes se trouvant au dessous de l'image, faut commencer à droite, c'est à dire avec margin-right à 23px) et que l'image se trouve toujours au milieu du hauteur par rapport au texte clair et inversement si le texte est trop court, alors le texte sera centré au hauteur par rapport à l'image.

La partie foncé commence toujours au dessous de l'image même s'il y a que quelques mots avec le texte clair. Et la partie foncé commence à gauche (comme que tu peux voir dans l'image)

Est-ce que tu comprends de ce que j'essaie de t'expliquer ?
J'ai vraiment essayé de clarifier au plus possible.

**Erwan31** · 27/03/2008, 19h13

Ok la solution le plus robuste consiste à utiliser un tableau de mise en forme
qui ne posera ici aucune problème d'accessibilité.
L'absence d'implémentation de certaines propriétés CSS actuelle dans les navigateurs (display:table-cell/inline-block) forcent encore à utiliser les tableaux de mise en
forme quand il n'y a pas d'autres alternatives envisageables ou suffisamment robustes.

Donc tu supprimes le float:left de ton image et tu intègres ce code
(transférer les style en-ligne dans la CSS)

Code :

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

1
2
3
4
5
6
 <table style="width: 90%; border: none">
  <tr>
    <td style="vertical-align:middle"><img src="" alt="" width="" height="" class="image" /></td>
    <td style="vertical-align:middle"><p><strong>Handy Mobil</strong> est une association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie. </p></td>
  </tr>
</table>

**{F-I}** · 27/03/2008, 20h05

Donc on doit utiliser la méthode tableau puisqu'il n'y a pas d'autre solution alternative en se basant avec la CSS par exemple...

Bon voici ce que j'obtiens maintenant, ça rapproche à ce que je voulais avoir

Elle a pour le code source suivant :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
  <div class="contenu_article">
        	<table style="width: 90%; border: none">
  				<tr>
    				<td style="vertical-align:middle"><img src="images/ico_handymobil.jpg" alt="" width="102" height="102" class="image" /></td>
    				<td style="vertical-align:middle"><p><strong>Handy Mobil</strong> est une association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie. </p></td>
  				</tr>
                <tr>
                	<td><p><strong>Handy Mobil</strong> est unfdskgùsmldf kgksdfgkùsdfk lmsdkfùglmk sdflgkslmdfglsdkfgmù lkfdlsmgklmùgk ùlmùsdflmg sdflmg ùmsdfgl sdfmlù sdlmfgk mùlsdfkg lmùsdfùmlgsdkflmgkslmgk fsdlmg sdlùfgk mùlsdùgklmsdmgl sdflmg sdfùmlgk slmdfgk mlùsdk gùmlsd e association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie. </p></td>
                </tr>
			</table>
		</div>

Sachant que la première paragraphe est mal affichée, elle est du au deuxième paragraphe, je pense qu'en réglant le problème avec ce dernier, la première sera automatiquement résolue.

Merci par avance

**Erwan31** · 27/03/2008, 20h17

Enlève le 2ième paragraphe du tableau et ne conserve qu'un seul ligne (tr) comme sur mon code, sinon il faudra ajouter colspan...

**{F-I}** · 27/03/2008, 20h20

C'est vrai qu'en enlevant le deuxième paragraphe, l'affichage est ok.

Mais comme que je t'ai montré avec les images précédents, je désire avoir 2 parties de paragraphes, l'un avec à côté image (avec ton code c'est OK), manque que le paragraphe inférieur.

Peux-tu me montrer le code colspan ? Je n'ai jamais touché les tableaux ^^ :p

Edit : collapse : les bordures seront collées entre elles or ce n'est pas le bon pour moi car je veux juste avoir 2 partie séparé. Me trompes-je peut-être

**Erwan31** · 27/03/2008, 21h23

Pour la deuxième ligne donc:

Code :

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

1
2
3
  <tr>
    <td colspan="2">texte</td>
   </tr>

**{F-I}** · 27/03/2008, 21h50

Excellent mon ami

Peut-t-on appliquer une classe ?

Comme :

Code :

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

<td colspan="2" class="nom_classe">

Ou bien il y a quelque chose qui peut remplacer colspan mais dans CSS ?

Et... ce sera tout :p

**Erwan31** · 27/03/2008, 22h08

Envoyé par {F-I}

Peut-t-on appliquer une classe ?

Oui

Envoyé par {F-I}

Ou bien il y a quelque chose qui peut remplacer colspan mais dans CSS ?

Non

Bonne soirée

**{F-I}** · 28/03/2008, 04h08

Super.

Merci pour tout

Bien merci encore :p

Bonne journée

un methode smiliaire de clear: both ?

HTML

Discussions similaires

Partager

Partager