Position:relative propriété top

Bonjour,

voila mon probleme,

j'ai une image a gauche, et un texte a droite. Je veux que celui-ci soit centrer verticalement par rapport à l'image.

Pour lui indiquer la hauteur j'utilise ceci :

#d_petitsarbres
{
	position:relative;
	left:93px;
	top:-80px;
	font-size: 10px;
	font-family: verdana;
	width:285px;
	height:77px;
	vertical-align:middle;
}

hors, dans internet explorer et mozilla, il y a une difference de hauteur de 10 pixel environ. de plus, j'aurais aimer savoir comment regler ce probleme.

Vous pouvez voir tout ca par vous meme a l'url : --http://iteckwebx.infoteck.qc.ca/psn3.com/test.html

et le code du css complet
--http://iteckwebx.infoteck.qc.ca/psn3.com/stylesheet.css

merci

Salut,

Je vais peut être te paraître un peu sec, mais je pense qu'il serait fort utile que tu fasses un tour dans les cours et tutoriaux de ce site afin de te familliariser avec les techniques css plutot que de te lancer tete baissé dans une réalisation.
Permièrement, comme tu le verras de nombreuses fois dans le site et le forum, les tableaux sont proscrits pour la mise en page. Tu trouveras plus d'informations à cette adresse.

Ensuite il te faudrait apprendre le modèle de boite ainsi que le positionnement CSS.

Pour en venir à ta question, l'alignement vertical en CSS est un problème tès compliquer à résoudre. Je pense que tu devrais tout d'abord positionner ton image en float afin que le texte se positionne automatiquement à droite. Ensuite tu peux jouer avec les marges du texte afin de le positionner comme tu le veux.

J'ai juste une question aussi. Pourquoi il y a t-il une différence entre le code CSS que tu fournies ici et celui présent dans ta feuille de style.

#d_petitsarbres
{
	position:relative;
	left:93px;
	top:-80px;

	font-size: 10px;
	font-family: verdana;

	width:285px;
	height:77px;
	display:block;
}

Rmq : Les paragraphes sont de type block. Il est donc inutile d'utiliser la propriété display: block;.

Bonne continuation et j'éspère que tu ne prendras pas mal ce que je viens de te dire.

Salut,

Bien sur que non, je prend pas mal, en fait, le graphiste que mon client à embaucher ma remis sont travail avec plein de tableau, bref quelques 400 ligne de code pour la page principale.

En effet, ce que je veux faire, c'est quelques chose de pas tres simple, et je galere un peu je l'avoue, entre les détails de l'affichage selon les différent navigateur comme Firefox et explorer.

Merci bien d'avoir répondu, ca me donne une idee en tout cas

Salut,

sylvain5090 a écrit :

Bien sur que non, je prend pas mal, en fait, le graphiste que mon client à embaucher ma remis sont travail avec plein de tableau, bref quelques 400 ligne de code pour la page principale.

Ok, je comprend mieux . J'éspère que tu vas réussir à t'en sortir avec tout ces tableaux.

Pour ton, problème, tu peux aussi essayer la propriété vertical-align: middle; sur le bloc qui contient ton texte. Si cela ne fonctionne pas tu peux egalement utiliser la propriété display: table-cell; + vertical-align.

Bonne continuation