28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer texte et image dans un <div>

Bonsoir,

Je suis en train de faire des tests sur la réalisation d'un menu. Or, un problème se pose déjà :s

Je ne comprends pas l'erreur, c'est pourquoi je viens vous demander de bien vouloir m'éclaicir.

Voilà sans attendre le lien vers ma page en test :
http://etudiant.univ-mlv.fr/~ahuynh02/test.html
http://etudiant.univ-mlv.fr/~ahuynh02/style.css

En passant la souris sur les différents "boutons" du menu, seuls les boutons "Pratique" et "Connexion" 'collent' parfaitement (texte et image). Or, les autres boutons, en faisant un hover, le texte et l'image ne sont pas du tout 'synchro' comme les deux boutons cités précédemment.

J'espère m'être expliqué clairement Smiley sweatdrop

Merci de votre aide.
Bonjour,

Tu peux presque régler ton problème avec:
a {
	text-decoration: none;
	color: #000;
	display: block;
	width: 75px;
}

et un height défini pour ton div#header

En fait c'est un nombre pair ou impair de lettres dans ton texte qui ferait la différence.

Ou mieux et plus "proprement":
<style>
#conteneur  { /* dimensionner body est un peu "casse gueule" !!! */
	width: 820px;
	margin: auto;
	margin-top: 15px;
	border: 1px gray solid;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#topmenu {
	float: right; 
	list-style-type: none;
	}

div#header {
	border-bottom: 2px orange solid;
	padding-top: 10px;
	height: 80px;/* pour éviter l'allongement de 1px du header sur le hover à cause de la bordure en top*/
}

#topmenu li {
	float: left;
	width: 75px;
	text-align: center;

}

#topmenu li a {
	text-decoration: none;
	color: #000;
	display: block;
	width: 75px;
	
	
}

#topmenu li a:hover {
	border-top: 1px gray solid;
	border-left: 1px gray solid;
}

#topmenu li img {
	display: block;
	width: 30px;
	margin: auto;
	border: 0px;
}


hr.spacer {
	clear: both;
	visibility: hidden; /* afin d'étirer le bloc 'container' si le bloc 'menu' est plus long: non nécéssaire vu que le height est fixe */
}
</style>
</head>
<body>
<div id="conteneur">
	<div id="main">
		<div id="header">
			<img src="logo.png"  style="float:left;"  />
			<ul id="topmenu">
				<li><a href="#"><img src="accueil1.png" />test</a></li>
				<li><a href="#"><img src="accueil1.png" />Accueildsfs</a></li>
				<li><a href="#"><img src="accueil1.png" />Etudes</a></li>
				<li><a href="#"><img src="accueil1.png" />Trombi</a></li>
				<li><a href="#"><img src="accueil1.png" />Connexion</a></li>
			</ul>
			<hr class="spacer" />
		</div>
	</div>	
	<hr class="spacer" />
</div>
</body>


Bonne continuation !
Bonjour,

@ Heyoan & climax : veuillez m'excuser, j'ai effectivement oublié de signaler les navigateurs utilisés (Opera 9.21 et IE 6)

@ ghost : Merci beaucoup pour les corrections/modifications, ça fonctionne comme je voulais. Smiley ravi

Edit1 :

Je viens de m'apercevoir que sous IE6, ce n'est pas trop ça :s
En effet, le problème que j'ai exposé précédemment n'est plus. Mais un autre petit soucis apparaît : lorsqu'on fait un hover sur un bouton, les boutons à gauche de ce dernier subissent un décalage.

Pourtant sous opera 9.21, ça fonctionne à merveille Smiley decu


Edit2 :

J'ai réussi à résoudre le problème. Ohlalal, ce que je perds du temps sur un "rien du tou" Smiley lol

Voici les changements : 

ul#topmenu li {
	float: left;
	[#red]width: 75px;[/#] 
	text-align: center;
}


ul#topmenu li a {
	text-decoration: none;
	color: #000;
	display: block;
	[#red]width: 74px;[/#] 
}


Merci Smiley lol
Modifié par The-Doc (03 Jun 2007 - 16:00)
Sujet clos
Aller à