18073 sujets

Questions générales et questions de débutants

[resolu] Opera et centrage vertical

Bonjour,

Je rencontre un problème avec Opera, et je ne trouve pas de solution.
Je veux faire une barre d'icones (à partir d'images), alignées horizontalzement, et toutes centrées verticalement dans un div.

Pour mieux comprendre : cette page fonctionne comme je veux avec Firefox, et avec IE6 (hormis le :hover). Le problème dans Opéra, c'est que les "icones" dans la barre du bas (blanche) ne sont pas centrées.

Le code en question:
(xhtml)
<div id="nav">
	<form action="loop.php" method="post">
		<div>

		<input class="mini_photo" type="image" src="photos/Image0009.535x800.png" name="sub" />
		<input type="hidden" name="index" value="2" />
		</div>
	</form>
	<form action="loop.php" method="post">
		<div>
		<input class="mini_photo" type="image" src="photos/Image0022.png" name="sub" />
		<input type="hidden" name="index" value="3" />
		</div>
(etc ...)
</div>


Et le CSS correspondant:
#nav{
margin:0;
padding:0;
height:75px;
background-color:white;
}

#nav form{
float:left;
width:106px;
height:70px;
}

.mini_photo {
height:60px;
margin:5px auto;
display:block;
border: 2px solid #5173b7;
}

.mini_photo:hover {
border-style:none;
margin-top:0;
height:70px;
}


Le fichier CSS complet peut être trouvé ici

Merci !
Modifié par Orlondow (31 Aug 2005 - 10:49)
Non, ça ne fonctionne pas, parce que ce n'est pas du texte que j'ai à centrer (si j'ai bien compris les exlpications).

Mais la bonne nouvelle, c'est que j'ai trouvé mon erreur: j'avais oublié d'indiquer margin:0; dans #nav form

code CSS modifié:
#nav form{
float:left;
margin:0;
width:106px;
height:70px;
}


merci !
connecté
Administrateur
Orlondow a écrit :
Non, ça ne fonctionne pas, parce que ce n'est pas du texte que j'ai à centrer (si j'ai bien compris les exlpications).

Théoriquement, "line-height" s'applique pour tous les éléments en-ligne :
http://www.yoyodesign.org/doc/w3c/css2/visudet.html#line-height

Specs a écrit :
Quand on applique cette propriété à un élément de type bloc dont le contenu est composé d'éléments de type en-ligne, celle-ci spécifie la hauteur minimale de chacune des boîtes en-ligne générées. Cette hauteur minimale se décompose en une hauteur minimale au-dessus de la ligne de base de l'élément de type bloc et en une profondeur minimale au-dessous de celui-ci, exactement comme si chacune des boîtes de ligne commençait par une boîte en-ligne de largeur nulle, celle-ci ayant les valeurs des propriétés de police et de hauteur de ligne de l'élément de type bloc

Modifié par Raphael (31 Aug 2005 - 11:31)
Ton explication me perturbe: <form> est bien un élément de type "block", non ? Et de plus, dans mon <form>, il y a un <div> (block aussi), donc je ne me retrouve pas dans ce cas:
a écrit :
un élément de type bloc dont le contenu est composé d'éléments de type en-ligne


ou bien je rate quelque chose.
Sujet clos
Aller à