28173 sujets

CSS et mise en forme, CSS3

[Résolu] pb sur margin-top entre FF2.0 et IE7

Bonjour bonjour =)

je suis tout nouveau sur ce forum et je viens vous embettez un peu car je m'arrache les cheveux sur un problèmes depuis quelques jours en CSS .. nif nif

Je ne suis pas un expert en la matière, donc je tatonne petit à petit (avec certaines infos justement glanées ici Smiley smile ) mais bon je patoge quand même.


Voici donc le code de ma page html 


<HTML>
<title>navBox</title>
<head>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>

<div class="yonavbox">
  <span class="yotitle">Onglet de test</span>
  <div class="yolabelimg">
    <img class="yoimg" src="arrowleftdark.gif"/>
  </div>
</div>


</body>
</html>


et voici la css qui lui est lié 


div.yonavbox {
	
	width:200px;
	position:absolute;
	background-color:blue;
	padding:0px 40px 0px 2px;
	left:200px;
	top:200px

}

div.yonavbox span.yotitle {
	color:#FFFFFF;
}

div.yonavbox div.yolabelimg{

	position:absolute;
	right:2px;
	top:50%;
	
}

div.yonavbox div.yolabelimg img.yoimg {

	cursor:pointer;
	display:block;
	margin-top:-50%;
	
}


et voici l'image qui doit s'afficher :

upload/11216-arrowleftd.gif



Mon soucis : pourquoi le margin-top:-50% sur l'image ne marche pas sous FF comme sous IE 7 (en sachant que le comportement que j'attends c'est celui qui se passe sous FF). le pourcentage est complétement démesuré sur IE7 (ça part n'importe où) alors que sur FF, le pourcentage se fait par rapport au div qui contient l'image, juste comme je le veux =)

Pour expliciter ce que j'essaye de faire, c'est de caler l'image à droite de mon rectangle bleu d'une part, et d'autre part de le centrer verticalement. Pour cela j'utilise un top:50% que je lie justement à mon margin-top:-50%.


Quelqu'un aurait-il une idée pour m'aider s'il vous plait, car je sèche complétement et je deviens tout fou !! nif nif nif

merci d'avance en tout cas Smiley biggrin
Modifié par nozostan (06 Mar 2007 - 10:22)
Ne pas utiliser de marge négative, mais plutôt la propriété CSS vertical-align, qui est faite pour ça. Il faut appliquer la propriété sur l'image, pas sur son conteneur.

Et attention à ne pas abuser du positionnement absolu. Smiley cligne

Deux remarques en passant :
- As-tu un Doctype pour ta page ? Si non, il t'en faut un. Se renseigner sur les moyens d'en acquérir un chez le plus proche grossiste en Doctype (Alsacréations, Openweb, le W3C...).
- Ton image sert-elle simplement de décoration ? Si ça n'est pas le cas, il lui faudrait peut-être une alternative textuelle pertinente ? Se renseigner sur l'attribut alt de la balise <img>.
j'ai justement essayé d'utiliser vertical-align, mais pas moyen de comprendre comment le faire marcher correctement en gardant cette structure de div/span/img.
La seule fois ou je suis arrivé à faire que le vertical-align fasse quelque chose, c'était en mettant mon image dans un tableau, et j'utilisais le vertical-align avec la balise <td>. Le truc super crade quoi.

Mais en tout cas, avec ma page html comme cela, je bloque complétement avec le vertical-align.
Qu'est ce que cela donnerai si je devais utiliser vertical-align dans mon code ?

Sinon pour le doctype, non effectivement je n'en utilise aucun, tout simplement parce que je ne sais pas ce que c'est Smiley cligne
tu aurais un pti lien sympa sous le coude (en attendant, je vais voir aussi un peu avec mon ami google ^^)

Et enfin, ouip bonne remarque pour l'aspect décoratif ou non de l'image. Je n'ai pas encore mis le alt car je teste surtout les attributs CSS, et je me focalise là dessus. Mais vouip j'y viendrai ensuite Smiley langue à espérer que je trouve ou qu'on puisse m'aider à avoir une solution qui marche pour mon pb , nif nif .
nozostan a écrit :
Mais en tout cas, avec ma page html comme cela, je bloque complétement avec le vertical-align.

Tu l'as bien appliqué à l'image ?

nozostan a écrit :
Qu'est ce que cela donnerai si je devais utiliser vertical-align dans mon code ?

Aucune idée. À vrai dire, je ne sais pas du tout ce que tu essayes de faire, je n'arrive pas à visualiser. Une petite image montrant ce que tu aimerais obtenir, et une page en ligne montrant ce que tu obtiens pour l'instant ?

Chez Alsacréations on est exigeants, on ne file pas de coup de main de qualité à moins que ça. Smiley cligne
non non mais tu as raison =)

alors ce que je voudrais en image ça va être tendu car faudra que je fasse presque un petit gif animé.

Par contre le rendu ça doit donner cela :

upload/11216-example.GIF

la petite image (la flèche dans le carré) doit tout le temps rester à droite du rectangle bleu quoique qu'il arrive.
C'est à dire que quoique je mette comme width pour le div bleu dans le css, la petite flèche doit tout le temps rester à 2px du bord droit du rectangle bleu.
Et en plus d'être tout le temps collé à droite du rectangle bleu, je voudrais que l'image soit centrer verticalement pour n'importe quelle height de mon div bleu. C'est à dire que si je précise un height pour mon div bleu, ça se centre, ou si j'agrandi la taille de ma police de caractère, ça se centre aussi.

Voilou voilou =)
Donc tout cela, j'arrive gentiment à le faire sous FF, seul soucis, ben c'est que IE 7 ne gère pas les block pareil il y a l'air, donc mon margin-top:-50% il ne fait pas du tout la même chose.

Donc effectivement un vetical-align:middle m'arrangerai complétement la vie je crois bien, sauf que je ne sais pas du tout comment le mettre Smiley cligne
Sinon ouip je l'ai bien mis sur mon image le vertical-align, mais rien qui se passe, nif nif.

Voilou voilou =)
besoin de quelques autres précisions ? j'ai tendance à pas tjs expliquer les choses correctement ou clairement, alors j'espère que cela ne sera pas trop dur à comprendre Smiley smile

(merci d'essayer de m'aider en tt cas et pour les infos précédentes)
Modifié par nozostan (06 Mar 2007 - 01:09)
Salut,

Regarde ce bout de code, ça devrait t'aider un peu
<style type="text/css">	

#conteneur{
width: 200px;
height: 100px;
position: relative;
margin: auto;
background: yellow;
}


img{
position: absolute;
width: 10px;
height: 10px;
right: 2px;
top: 50%;
margin-top: -5px; /* la moitié du height de ton image: 10/2=5*/
}

</style>
</head>

<body>

<div id="conteneur">
	<img src="ton_image.jpg" />	
</div>

</body>
bon ghost, je crois qu'il ne me reste plus qu'une chose à faire :

te faire des gros bisous !

effectivement, en m'en inspirant, et en enlevant donc un div (celui qui était le père de la balise img), je me retrouve dans le même cas que ton exemple, et donc ça a l'air de marcher nickel.

Ben si je ne me suis pas trop vite emballé à pas avoir assez testé, à pas avoir trop couru partout dans ma maison en criant,
béh je vous remercie tous les deux Smiley cligne
Ma foi, pour les bisous, suis pas un garçon facile ... Une bonne bière, ça sans problème !!

Bon courage
Salut,
nozostan a écrit :
bon ghost, je crois qu'il ne me reste plus qu'une chose à faire :

te faire des gros bisous !
Je suppose qu'on peut considérer le sujet comme [Résolu], si vous en êtes aux bisous Smiley lol
Sujet clos
Aller à