Impossible de centrer le contour

Bonjour tout le monde !!

Le temps d'avoir une réponse sur ce post, je me suis rabattu sur la première solution pour faire un contour.

J'aimerais l'insérer dans un menu déroulant mais je n'arrive pas à le centrer malgré mes text-align: center.

Mon CSS :

.menu, .ssmenu {
	background-color: #e8e8e8;
	color: #808080;
	font-size: 12px;
	font-weight: bold;
	font-family: "MS Sans Serif", "sans-serif", Verdana, Arial;
	border: 1px solid Black;
	padding: 1px; 
	/* width et margin sont au cas où le javascript est désactivé. */
	width: 15em;
	margin: 1em;
	position: relative; 
	/* on positionne le conteneur H1 pour placer ensuite le SPAN correctement */
	top: -1px; /* on décale le titre */
	left: -1px;
}

.menu {
	text-align:center;
}

.ombre {
	position: absolute; /* on superpose le SPAN sur le titre */
	top: 2px; /* on décale le SPAN */
	left: 2px;
	color: #808080;
	text-align: center;
}
.ombre2 {
	position: absolute; /* on superpose le SPAN sur le titre */
	top: 1px; /* on décale le SPAN */
	left: 1px;
	color: white;
	text-align: center;
}

Mon HTML :

...
<a href="#" onfocus="MontrerMenu('ssmenu1');">Mon blog<span class="ombre">
Mon blog</span><span class="ombre2">Mon Blog</span></a>
...
<a href="#" onfocus="MontrerMenu('ssmenu2');">Mes sites préférés<span class="ombre">
Mes sites préférés</span><span class="ombre2">Mes sites préférés</span></a>
...
<a href="#" onfocus="MontrerMenu('ssmenu3');">Divers<span class="ombre">
Divers</span><span class="ombre2">Divers</span></a>
...

Et je n'ai que le premier élément qui est centré. Celui avec ombre et ombre2 reste à gauche. Je ne comprend pas pourquoi ca ne marche pas, pourtant j'utilise text-align: center.
Aidez-moi s'ils vous plait je suis débutant.

+++
pihug12
Modifié par pihug12 (07 Nov 2005 - 20:02)

n'y aurait-il pas un truc du style que la propriété text-align ne s'applique qu'à des éléments de type block ?

à quoi s'appliquent les classes menu et ssmenu, à des div ?

Tiens au passage, je te signale qu'il faut mettre la police sans-serif à la fin, comme cela :

font-family: "MS Sans Serif", Verdana, Arial, sans-serif;

Salut !

Merlin a écrit :
n'y aurait-il pas un truc du style que la propriété text-align ne s'applique qu'à des éléments de type block ?

Euh... je comprend pas.

Merlin a écrit :
à quoi s'appliquent les classes menu et ssmenu, à des div ?

Euh... je comprend toujours pas.
En fait j'ai fais ça à partir de ce menu.

Mais c'est pas plutot position: absolute qui empeche le texte de se centrer ??

pihug12
Modifié par pihug12 (07 Nov 2005 - 19:58)

sur le site que tu as utilisé comme exemple on voit que la classe menu concerne un élément P et que la classe .ssmenu concerne un élément UL. (c'était la réponse à ma question)

Cette information est importante pour comprendre ton problème. Si on ne dispose que du copier-coller d'une partie de ton code pour essayer de trouver ce qui cloche, c'est très difficile. Car tout est lié et une propriété utilisée pour un élément aura un effet pour les élément fils de celui-ci

Pour le position:absolute, ce positionnement s'effectue en absolue dans le bloc qui contient l'élément. Dans le tuto de Raphael, les classes ombre et ombre2 se rapportent à des éléments inline (span) qui vont se superposer au titre d'un l'élément bloc (h1). Dans ce cas on utilise bien un position:absolute. Bref, je pense que si tu passes en position:relative, cela ne marchera pas (sauf de tuner le nombre de pixel en fonction de la taille de ton texte).

Ton problème est que tu ne positionnes pas les ombres par rapport au texte de ton lien (que tu as centré), mais par rapport au bord du bloc le contenant (j'ai un doute, mais cela doit être le LI) donc tu te retrouves avec les 2 ombres à gauche du bloc et le texte du lien centré.

J'espère que j'ai été clair dans mon explication (et que je n'ai pas dit de conne... ). Pour la solution à ton problème, je n'ai pas d'idée comme ça, maintenant. Je vais y réfléchir. Mais si tu veux obtenir de l'aide, il va falloir que tu songes sérieusement à publier ton site, cela serait vachement plus simple pour tout le monde.
Modifié par Merlin (07 Nov 2005 - 23:19)

Salut Merlin !

Je suis tes conseils !
Mon site : http://pihug12.free.fr/Site/
Le CSS du menu : http://pihug12.free.fr/Site/barre-menu/menu.css

Euh je suis en train de réfléchir à un truc pour virer la frame du bas.
C'est pas beau et c'est pas pratique.

Le site est hébergé chez Free pour le moment, mais je pense le mettre sur 275mb.com par la suite.

+++
pihug12

Ton problème n'a pas de solution dans le sens que tu souhaites. En effet le cumul d'effet, que tu veux utiliser, rend la bidouille, difficilement gérable.

Pour obtenir l'effet désiré, j'utiliserai pour ma part, une image (et là tu peux faire tout les effets que tu veux) et mettrai en place un roll-over en CSS pour obtenir l'effet de désiré sur le passage de la souris.

ceci dit, l'étude de ton code m'a permis de mieux comprendre ton problème de fond. Tu tentes de réaliser un premier site en faisant du copié-collé de solution, mise en oeuvre dans un contexte différent et parfois non-compatible entre elles (exemple le solution pour ton menu et la solution pour l'ombrage). Le résultat est d'une part un code aux antipodes des standards (d'autre que moi te rappelerait que c'est qu'en même l'objectif de ce forum) et particulièrement fouilli (le mélange des table, div et autre frameset est absolument catastrophique) .

Si ton objectif est de créer un site pour apprendre les standards (et apparemment aussi la programmation ), il faut que tu reprennes tout à zéro (je sais, c'est dur à lire, mais c'est vraiment un conseil très amical). pour commencer il serait souhaitable que tu suives avec beaucoup d'attention un tuto complet sur l'XHTML et le CSS (je te propose de regarder http://www.siteduzero.com/xhtml-css/, beaucoup d'autres excellents tuto existent, en commençant bien sur par Alsacreations, mais un tout début, le site du zéro a ma préférence). Ensuite, il serait souhaitable que tu fasses un projet (on appelle cela des spécifications) avec la règle et le crayon ou un outil graphique (pour ma part je commence toujours en faisant une maquette avec Photoshop ou Gimp). Enfin tu pourras commencer le codage et enfin tester ta production, d'abord en utilisant les valideurs HTML, CSS et ensuite en faisant appel au forum sur l'ergonomie qui te permettra d'avoir des critiques et conseils, (mais attention à avoir bien validé ton code avant).

Et puis pour un début, fait simple tu enrichiras ton site plus tard (exemple, est-ce que le fait d'avoir les menus en ombré est tellement important ?)

Si maintenant ton objectif est de mettre en ligne un site sans necessairement appliquer les standards, repli-toi sur des générateurs de code (il doit en exister de très bon sur le WEB) ou encore utilise un outil style dreamweaver ou golive (je n'ose pas dire Frontpage, mais bon ...)

A toi de voir, et si tu choisi la voie du standard, tu seras toujours le bienvenu sur ce forum. Cordialement
Modifié par Merlin (09 Nov 2005 - 23:04)

Bonjour Merlin !

a écrit :
Ton problème n'a pas de solution dans le sens que tu souhaites. En effet le cumul d'effet, que tu veux utiliser, rend la bidouille, difficilement gérable.

Mais pourtant c'est tout simple de centrer un élément.... tu es sur que ce n'est pas possible ??

a écrit :
Pour commencer il serait souhaitable que tu suives avec beaucoup d'attention un tuto complet sur l'XHTML et le CSS (je te propose de regarder http://www.siteduzero.com/xhtml-css/, beaucoup d'autres excellents tuto existent, en commençant bien sur par Alsacreations, mais un tout début, le site du zéro a ma préférence).

Je trouve ce site passionnant pour le peu que j'ai lu.
Je jure de lire tout les tutoriels sur le CSS & PHP.
Mais j'aimerais mettre rapidement en place mon site. Et si quelqu'un pouvait me dire la technique pour centrer mon élément ca serait la bienvenue !

Merci à toi Merlin !
pihug12

a écrit :
Mais pourtant c'est tout simple de centrer un élément.... tu es sur que ce n'est pas possible ??

Centrer un élément, c'est simple (text-align, tu l'as fait), mais centrer 3 éléments inline dans en même bloc avec 1 pixel de décalage entre chaque, c'est ultra-bricolo, et en plus donne (comme signalé dans un autre sujet) des résultat étrange quand on utilise la loupe (et moi je l'utilise) d'où la solution que je te propose d'utiliser une image avec un rool-over que tu peux faire en CSS si tu veux. Autre solution (la meilleure, pour moi) ne fait pas d'effet d'ompbre qui n'apporte rien sur ton blog.