Discussion :

[ml1234]

bonjour,
comment centrer le bloc suivant constitué d'une image et d'un texte à sa droite ?

merci

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
 
#maincontent img.tt {
	padding: 0px;
	border:1px solid #ff0000;
	margin:10px;
}
 
 
<h1 align="center">Votre Tour de Thaï</h1>
 
		<p>
			<br>
			<img class="tt" border="0" SRC="images/thailandaise1.jpg" align="left">
            <b>Saviez-vous que la cuisine thaïe est considérée par le peuple thaïlandais<br>
				comme l'un des plus importants héritages culturels du pays<br>
				et un art aussi noble que délicat et varié ?</b>
		</p>
 
		<p>
			Les ingrédients de cette délicieuse cuisine sont depuis des siècles,<br>
			soigneusement choisis, affinés, dosés sans aucun ajout de quelque agent<br>
			artificiel ou conservateur que ce soit et ce, <b>par des cuisiniers thaïs 
			expérimentés</b> ... 
    </p>
 
		<p>
			<i>Ce qui en fait une cuisine légère, raffinée et de par sa nature même, distincte de toutes les autres.</i>
        </p>

[CCyrillus]

bonjour,

ceux-ci et ses explications repondent-ils a ta questions ? http://yidille.free.fr/plux/valign/?...vertical-align

GC

[ml1234]

merci mais je ne suis pas sûr que cela m'aide.
pourquoi valign ?

ici, l'image est collée à gauche du wrapper (960px) avec le texte à droite et je souhaiterais déplacer tout vers la droite pour le centrer horizontalement

je voulais entourer d'un <div id="frame"> et mettre celui là en left et right margin auto mais pas sûr que cela soit bien. et ce qui m'ennuie avec cela c'est que je dois préciser le width du div que je ne connais pas sinon auto ne marche pas

Marc

[CCyrillus]

peut tu me faire un screen ou schema de l'endroit ou tu veut ton h1 , l'image et les paragraphe ?

(le lien ne te donne pas seulement une solution pour mettre un element a coté d'un autre , mais aussi comment cela fonctionne , tu devrais y trouver quelques pistes en approfondissant .)

[ml1234]

voilà ma solution mais était-ce la meilleure ?
j'ai mis du rose pour voir mieux
j'ai bidouillé avec pad2, dû introduire 800px de width du div frame pour margin auto, enlever margin top de l'image (tt),...

merci
Marc

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
#maincontent img.tt {
	padding: 0px;
	border:1px solid #ff0000;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
 
#frame {
	background-color: #FF00CC;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
.clear {
  clear: both;
  margin: 0.00;
  padding: 0.00;
}
 
.pad2 {
	display:block;
	height:50px;
}
 
 
 
<h1 align="center">Votre Tour de Thaï</h1>
 
		<div id="frame">
		<p>
			<img class="tt" border="0" SRC="images/thailandaise1.jpg" align="left">
            <b>Saviez-vous que la cuisine thaïe est considérée par le peuple thaïlandais<br>
				comme l'un des plus importants héritages culturels du pays<br>
				et un art aussi noble que délicat et varié ?</b>
		</p>
 
		<p>
			Les ingrédients de cette délicieuse cuisine sont depuis des siècles,<br>
			soigneusement choisis, affinés, dosés sans aucun ajout de quelque agent<br>
			artificiel ou conservateur que ce soit et ce, <b>par des cuisiniers thaïs 
			expérimentés</b> ... 
    </p>
 
		<p>
			<i>Ce qui en fait une cuisine légère, raffinée et de par sa nature même, distincte de toutes les autres.</i>
        </p>
		<div class="pad2">&nbsp;</div>
        </div>

[ml1234]

je viens de constater que sur mozilla et ie, l'image était collée au haut du div
alors que dans dreamweaver il y a bien 5mm entre les deux. cela me ramène à un vieux post où je demandais où étaient cachés ces espaces par défaut de dreamweaver qui ne sont pas toujours ceux des browsers.
j'avais alors dit que * {margin:0 ; padding:0} était la solution à tous ces problèmes car on voit plus clair.
je viens donc de faire cela et j'ai le même résultat dans dreamweaver que dans mozilla et ie mais le reste de la page a souffert et la petite image sort du cadre rose. je vais donc devoir jouer avec les marges du cadre rose frame et la hauteur du pad2

pas simple...

Marc

[Macmillenium]

[Mode chieur constructif on]

ceux-ci et ses explications repondent-ils a ta questions ? http://yidille.free.fr/plux/valign/?...vertical-align

Dans ton tuto tu parles souvent de :

regle : display:table-cell;

Règle => sélecteur { propriété : valeur }
Déclaration => propriété : valeur ;

[/Mode chieur constructif off]

[CCyrillus]

Dans ton tuto tu parles souvent de :
Citation:
regle : display:table-cell;
Règle => sélecteur { propriété : valeur }
Déclaration => propriété : valeur ;

oki ,
d'un autre coté je perçois
regle = le(s) selecteur(s)
attribut = la propriété
et enfin valeur(s)
.. et sur ce je conçoit l'attribut + sa valeur , comme une règle a appliquer dans la règle (le selecteur) .... Bon oki , si c'est clair pour moi , ça prête a confusion . merci de la remarque et du rappel.

'avais alors dit que * {margin:0 ; padding:0} était la solution à tous ces problèmes car on voit plus clair.
je viens donc de faire cela et j'ai le même résultat dans dreamweaver que dans mozilla et ie mais le reste de la page a souffert et la petite image sort du cadre rose. je vais donc devoir jouer avec les marges du cadre rose frame et la hauteur du pad2

En faisant *{margin:0;padding:0} tu remet a zero toutes les marges internes et externes de tout tes element html .

Il te faut donc les redefinir la ou tu veut en voir apparaitre.

Par defaut , les balise de type block ont une marge et celles-ci fusionnent entre elles generalement . cependant il arrive que cette marge soit reporter a l'exterieur de leur element parent (par exemple la marge haute du premier <p> dans le div .. et la marge basse du dernier <p> ) Ton reset eleimine tout ça ainsi que les marges sur html et/ou body ... tout tes elements vont alors se coler les uns aux autres.

Ta façon de centrer ton block est la bonne width + margin:auto; ,
je n'avais pas compris la question et le libellé et je t'ai aiguillé sur un autre type de question tout autant récurante désolé .

GC

[ml1234]

ok,merci
mais c'est dur d'estimer la largeur surtout du texte, donc il faudra faire des br
pour limiter les longueurs pour tomber dans le width choisi et c'est dommage de devoir jouer au pixel près sur pad2.
là j'aurais préféré considérer que l'image avait une hauteur de 200px et définir le height de frame à 220 avec un padding top, bottom et left de 10px plutôt que de compléter le texte par des blancs pour qu'il arrive à la hauteur de l'image.
je ne comprendrai jamais pourquoi le div ne s'adapte pas à la plus haute partie, ici l'image

Marc

[CCyrillus]

okay , me semble que j'ai compris

essai ceci (ajout d'un div envelloppant les paragraphe) , attention j'ai donner des dimensions a l'image , n'ayant pas la tienne sous la souris):

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
<h1 align="center">Votre Tour de Thaï</h1>
 
		<div id="frame">
		<p>
			<img class="tt" border="0" SRC="images/thailandaise1.jpg" align="left" width="100" height="200">
<div class="haslayout">
            <b>Saviez-vous que la cuisine thaïe est considérée par le peuple thaïlandais<br>
				comme l'un des plus importants héritages culturels du pays<br>
				et un art aussi noble que délicat et varié ?</b>
		</p>
 
		<p>
			Les ingrédients de cette délicieuse cuisine sont depuis des siècles,<br>
			soigneusement choisis, affinés, dosés sans aucun ajout de quelque agent<br>
			artificiel ou conservateur que ce soit et ce, <b>par des cuisiniers thaïs 
			expérimentés</b> ... 
    </p>
 
		<p>
			<i>Ce qui en fait une cuisine légère, raffinée et de par sa nature même, distincte de toutes les autres.</i>
        </p>
</div>
		<div class="pad2">&nbsp;</div>
        </div>

et le css (activation du haslayout dans IE 6 et inf et contexte de formatage pour les autres )

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
#maincontent img.tt {
	padding: 0px;
	border:1px solid #ff0000;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
 
}
 
#frame {
	background-color: #FF00CC;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
overflow:hidden;
}
 
.clear {
  clear: both;
  margin: 0.00;
  padding: 0.00;
}
 
 
.haslayout {
overflow:hidden;
zoom:1;
}

On en revient au simple "haslayout" et "contexte de formatage" pour contenir ou se demarqué des flottants.

GC