Centrer une image dans un menu à puces horizontal

Bonsoir,

J'ai épluché x posts en rapport avec le centrage d'image dans un div mais rien y fait... D'ailleurs j'en peux plus et je ronque dans 5 min..

Impossible donc de placer mes deux images verticalement ! Voici les deux bouts de codes :

CSS :

#band_sup {
	width: 1004px;
	margin: auto;
	height: 27px;
	color: #e9e4b0;
	background: url(../images/interface/gradient.png) repeat-x;	
}

#band_sup dl {
	list-style-type: none;
	margin: 0 3px 0 3px;
	padding:0;
	text-align: right;
}

#band_sup dt {
	display: inline;
}

#band_sup dt.active {
	border-bottom: 2px solid #f5b94b;
	font-weight: bold;
}

#band_sup a {
	font-size: 0.9em;
	color: #e9e4b0;
	text-decoration: none;
}

#band_sup a:hover {
	color: #a0b3b9;
}

HTML :

}

<div id="band_sup">
	<dl>
		<dt <? if ($url == "/refonte/index.php") { echo 'class="active"';}?>><a href="index.php">Accueil</a></dt>
		<dt>|</dt>
		<dt <? if ($url == "/refonte/acces.php") { echo 'class="active"';}?>><a href="acces.php">Accès</a></dt>
		<dt>|</dt>
		<dt <? if ($url == "/refonte/numeros.php") { echo 'class="active"';}?>><a href="numeros.php">Numéros utiles</a></dt>
		<dt>|</dt>
		<dt <? if ($url == "/refonte/divers.php") { echo 'class="active"';}?>><a href="divers.php">Formulaires</a></dt>
		<dt>|</dt>
		<dt><a href="forum/index.php">Forum</a></dt>
		<dt>|</dt>
		<dt <? if ($url == "/refonte/livre-d-or.php") { echo 'class="active"';}?>><a href="livre-d-or.php">Livre d'Or</a></dt>
		<dt>|</dt>
		<dt <? if ($url == "/refonte/a-propos.php") { echo 'class="active"';}?>><a href="a-propos.php">A propos</a></dt>
		<dt>|</dt>
		<dt><a href="mailto:aeroport-cl.dk@agglo-calaisis.fr" >Contact</a></dt>
		<dt><img src="images/interface/drapeau-fr.png" width="18px" height="12px" /></dt>
		<dt><img src="images/interface/drapeau-uk-usa.png" width="18px" height="12px" /></dt>
	</dl>
</div>}

et voici le site (que je refais petit à petit) : http://aeroport.calais.free.fr/refonte/index.php

Je m'en vais de ce pas me coucher. La css m'a tué !

J'espère que vous pourrez m'aider. Bonne journée
Modifié par Bertrand40 (06 Apr 2009 - 04:57)

Bonjour,

Peut-être ce tutoriel répondra-t'il a ta question (seconde partie : Le Centrage Vertical).

Sinon, en ce qui concerne ton menu, l'utilisation de dl et dt (surtout sans dd) n'est pas des plus appropriée. Des listes ul/li le seraient plus.

Bonjour Laurie-Anne !

Ok, donc première étape je troque les dl/dt contre des ul/li (je croyais que leur comportement était identique).

Et je reviendrai vous tenir au courant.

Merci pour ta réponse.

Hello Bertrand40 et bienvenue,

Bertrand40 a écrit :
je troque les dl/dt contre des ul/li (je croyais que leur comportement était identique).

Il ne s'agit pas d'une question de comportement mais de sémantique.

Salut Heyoan !

Merci pour ton lien concernant la sémantique. Encore un truc que je découvre..

Bon..... Hum.. J'ai bidouillé et archi bidouillé en zoom terrible avec webdevelopper, à gratter px par px, et ça a l'air d'aller..

Je laisse le code mais ne m'engueulez pas j'en ai vraiment assez. Avouez que passer plus de 5 heures pour au final bêtement se résoudre à gratter 2px c'est un peu de la bêtise de ma part...

Quoiqu'il en soit merci. Je reviendrai vous solliciter.

les images dans le html

<li><a href=""><img src="images/interface/drapeau-fr.gif" width="22px" height="16px" /></a></li>
		<li><a href=""><img src="images/interface/drapeau-en.gif" width="22px" height="16px" /></a></li>

et la partie css

#band_sup {
	width: 1004px;
	height: 28px;
	margin: auto;
	color: #e9e4b0;
	background: url(../images/interface/gradient.png) repeat-x;
	text-align: center;
}

#band_sup ul {
	list-style-type: none;
	float: right;
	margin-top: 1px;
	height: 26px;	
}

#band_sup li {
	height: 16px;
	list-style-type: none;
	float: left;
	padding: 0;
}

#band_sup img {
border: none;
padding-top: 1px;
text-align: center;
}

#band_sup li.active {
	border-bottom: 2px solid #f5b94b;
	font-weight: bold;
}

#band_sup li a {
	font-size: 0.9em;
	color: #e9e4b0;
	text-decoration: none;
	text-align: center;
}

#band_sup a:hover {
	color: #a0b3b9;
	opacity: 0.8;
}

PS : bien entendu vous pouvez gueuler.. mais j'ai besoin de passer à autre chose là, l'impression désagréable de faire du sur-place.. j'y reviendrai plus tard !