centrer un bloc avec image et son texte à droite

Version imprimable

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

merci

Code:

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>

16/08/2009, 16h38
CCyrillus

bonjour,

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

GC
16/08/2009, 16h49
ml1234

re

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
16/08/2009, 16h55
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 .)

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:

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>

16/08/2009, 17h36
ml1234

re

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
16/08/2009, 19h46
Macmillenium

[Mode chieur constructif on]

Citation:

Envoyé par CCyrillus

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 :

Citation:

regle : display:table-cell;

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

[/Mode chieur constructif off]
16/08/2009, 22h40
CCyrillus

re :)

Citation:

Envoyé par macmillenium

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.

Citation:

Envoyé par ml1234

'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
16/08/2009, 23h11
ml1234

re

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

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:

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:

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

17/08/2009, 08h14
ml1234

re

merci pour tes efforts, ccyrillus.

pour info :
mon image fait w:145, h:215
il faut ajouter <div id="maincontent"> pour que les marges et cadre rouge de l'image soient actifs
j'ai ajouté un top margin de 10px à l'image pour voir plus clair
j'ai enlevé pad2 qui parait inutile à présent

ça marche, merci beaucoup mais quelques petites différences entre mozilla, ie7 pour la marge bottom 10px sous l'image pas respectée dans ie.
si on ajoute *{padding:0;margin:0}, dans dreamweaver le rose s'arrête à cheval sur image alors que dans mozilla ça marche

j'ai aussi dû lancer 10 fois ie avant que quelque chose n'apparaisse à l'écran

peux-tu svp expliquer tes astuces :
overflow hidden dans frame
haslayout autour du texte uniquement
apparemment tu n'as plus besoin de pad2 car il est là mais pas son css

merci
Marc
17/08/2009, 22h46
CCyrillus
bonsoir,

Citation:

ça marche, merci beaucoup mais quelques petites différences entre mozilla, ie7 pour la marge bottom 10px sous l'image pas respectée dans ie.
si on ajoute *{padding:0;margin:0}, dans dreamweaver le rose s'arrête à cheval sur image alors que dans mozilla ça marche

Je n'utilise pas dreamweaver pour la mise en forme car son rendu n'est justement pas une reference :) . Ce que tu peut faire , c'est ouvrir la page que tu edites avec les navigateurs firefox, google/safari et IE par exemple (pour verifiez le comportement de la page en cours d'edition.

Pour le haslayout ou contexte de formatage , j'avais regroupé sur une page les differentes façon de le modifier :
contexte de formatage (inclue IE7->8): display(certain), float , position et overflow

le haslayout IE<8 : display(inline-block) ,float, height,width , position, zoom ,writing-mode et en plus pour IE7 :min-height,min-width,height,width, max-width et max-height

voir la page de test utilisant un element flottant pour mettre ou non en evidence l'effet de la regle appliquée au conteneur : http://yidille.free.fr/plux/valign/?...e-de-formatage
( a tester avec IE7 et FF par exemple)
DISCLAIMER : Ce n'est pas parcequ'une premiere regle choisie donne l'effet voulu , qu'il faut en faire usage systématiquement ... mais il n'est pas mauvais de savoir que l'usage de l'une de ces regle peut modifier votre mise en forme dans un ou plusieurs navigateurs et que ce n'est pas forcement un "bug" :) .

Cette page en lien montre un exemple avec un flottant dans le conteneur (cela correspond a ton frame aec son image flottante) , il y a d'autre cas de figure et autre façon de faire bien sur (clear, ... ) .

Ensuite , cette image est externes et adjacente au conteneurs de textes . En modifiant le contexte de formatage (et en conferant le layout dans IE ) l'element adjacent va s'afficher a coté du flottant et ne plus glisser dessous .
Pour en remarquer l'effet je te proppose de retester l'exemple precedent en remplaçant cette portion de CSS :
Code:

1 2 3 4 .haslayout { overflow:hidden; zoom:1; }
par (has layout et contexte de formatage modifié:
Code:

1 2 3 4 5 .haslayout { overflow:hidden; zoom:1; background:yellow; }
puis par (on laisse faire le navigateur)
Code:

1 2 3 .haslayout { background:yellow; }
Dans le deuxieme cas , si tu veut que le conteneur haslayout ne s'affiche pas sous l'image , il te faudra lui donner une marge a gauche (du coup une marge au p et le div.haslayout ne sert plus a grand chose.

Le truc qui semble parfois incomprehensible , c'est la marge necessaire dans FF et pas IE (ou vice-versa) ... Connaitre ces particularités , permet de produire un code cohérent pour l'ensemble des navigateur . Ce n'est peut-etre pas logique , mais voila , chaque famille de navigateur a ses particularités :).

Un width + overflow:hidden est souvent un bon compromis .

Citation:

.pad2 {
display:block;
height:50px;
}

Pour pad2 , non il n'est plus necessaire , mais pour le rendre vraiment efficace et te passer de l'overflow:hidden; tu aurais du lui appliqué un : clear:both; .

Si tu as d'autres questions :) , ...
GC
17/08/2009, 22h58
ml1234

re

merci beaucoup

Marc