28173 sujets

CSS et mise en forme, CSS3

Bonjour!!
Je voudrais pouvoir centrer ma barre de menu sur mes pages web. Comment faire??
J utilise le script du menu horizontal trouvé sur ce site

<html>
<head>

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0
background-image: url(./images/casque.gif);
font: 100% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


</head>





<Body background="./images/casque.gif">
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="pageaccueil.html" title="Retour à l'accueil">Accueil</a></dt>

	</dl>

	<dl>
		<dt onmouseover="javascript:montre('smenu1');" >Historique</dt>
			<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

				<ul>
					<li><a href="historique.html">Historique</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>

					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>


	<dl>
		<dt onmouseover="javascript:montre();" ><a href="">Personnel</a></dt>
	</dl>


	<dl>
		<dt onmouseover="javascript:montre('smenu3');">Véhicules</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="pageaccueilvehicule.html">accueil véhicules</a></li>
					<li><a href="./pages véhicules/pageVL.html">VL</a></li>
					<li><a href="./pages véhicules/pageVTUSR.html">VTUSR</a></li>
					<li><a href="./pages véhicules/pageCCF4.html">CCF4</a></li>
					<li><a href="./pages véhicules/pageFPTL.html">FPTL</a></li>
					<li><a href="./pages véhicules/pageVSAB.html">VSAB</a></li>
					<li><a href="./pages véhicules/pageVPS.html">VPS</a></li>
				</ul>
			</dd>
	</dl>

	<dl>
		<dt onmouseover="javascript:montre('smenu4');">Activités</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="chiffresinter.html">Interventions par commune</a></li>
					<li><a href="inter.html">Interventions par type</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>

	<dl>
		<dt onmouseover="javascript:montre('smenu5');">Amicale</dt>

			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="bureau amicale.html">Composition du bureau</a></li>
					<li><a href="#">Sous-Menu 5.2</a></li>

					<li><a href="#">Sous-Menu 5.3</a></li>
				</ul>
			</dd>
	</dl>


</div>
</body>
</html>


Merci a tous Smiley cligne
Administrateur
Hello Yolande et bienvenue ici Smiley smile

Que donne le tutoriel sur le centrage des éléments ? A quel point as-tu des soucis ? Où en es-tu ?
Bonsoir,
J'ai également un problème pour center mes menus.

Dans la galerie des menus du site Alsacréations, je prends le premier exemple du menu horizontal. Dans mon cas, j’ai 10 menus mais le problème reste le même.

Je voudrais centrer mes boutons du menu, par rapport au cadre parent. Or j’ai essayé aussi avec le cas du menu de Raphaël, et on ne se centre pas non plus. Et l’on a beau essayer avec :

<div style= "text-align : center">

#global {
margin-left: auto;
margin-right: auto;
width: ...; /* largeur obligatoire pour être centré */
}
ou

#global {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}
ou

#global {
position:absolute;
left: 50%;
top: 50%;
width: ……px;
height: ………px;
margin-top: -….px; /* moitié de la hauteur */
margin-left: -….px; /* moitié de la largeur */
border: 1px solid #000;
}

Rien n'y fait. J'ai essayé en remplaçant les <ul> et <li> par des <dl> et <dt> et plusieurs autres balises, toujours aucun effet. Il semble que la class : .menu li { float: left;} fasse son effet, mais sans elle, on obtient un menu vertical et non horizontal.

De plus, il y a un autre problème. Essayer de définit la longueur totale exacte de vos boutons. En effet, lorsque l'on utilise un bord du genre "border: 3px solid blue", la bêtise d'Internet Explorer se dessine puisque, si j'ai 10 boutons de 65px + 20 fois mes 3px de cadre, avec les navigateur tel Firefox, j'obtiens 710px alors qu'avec E.I. je reste à 650px.

Je ne peux donc compenser avec un "margin-left="…px".

Quelqu'un a-t-il une idée pour s'en sortir, SVP
pour la derniere partie de la question suffit de rajouter 6px a la largeur pour IE en commentaire ou en ! important.
Pour la 1ere partie si tu connais la largeur des DT tu multiplies cette largeur par le nombre de liens et tu ajoutes un conteneur a l'interieur du menu de la largeur obtenue avec margin:0 auto;.
testé
ici
Modifié par jp94 (12 Mar 2006 - 10:16)
Bonjour,

Merci jp94, margin:0 auto; me centre bien mes menus.

Mais quant à ta remarque : "suffit de rajouter 6px a la largeur pour IE en commentaire ou en ! important". Pourrais-tu expliciter STP ?

Est-ce à dire que je peux ajouter en "commentaire" ou en "! important" (?) un attribut qui ne serait pris en compte que par I.E. ? Comment libelles-tu cela ?

Avec mon post, j'espère que je n'ai pas supplanté la réponse attendue par Yolande.
Re-bonjour,

J'avais crié victoire trop tôt avec margin:0 auto. J'ose espérer maintenant avoir une réponse précise à ma question de rajouter 6 px en commentaire, pour IE.

En effet, sur une page presque vierge, j'avais retesté l'exemple du menu de Raphaël (4 boutons et un border: 1px), cela semblait bien se centrer bien sur la page. Mais remis dans le contexte exact du site, ce n'est plus aussi évident. Surtout, avec 10 boutons.

En effet, pour que tout se centre bien, cela dépend principalement de la largeur que l'on donne au conteneur autour des boutons, je l'ai suffisamment testé. Or, pour donner un petit effet de relief à mes boutons, j'ai un border : 4px outset #D2BE51.

Conséquence : si je centre bien sous I.E, j'ai le 9ème et 10ème boutons sur une deuxième ligne avec Firefox. Si je centre bien sous Firefox, mes boutons sont fortement décentrés sous I.E.

Cela ne m'étonne plus que dans ses exemples, Raphaël utilise des border : 1px Smiley biggrin

J'utilise les menus "made by Raphaël" (et j'ai déjà vu, beaucoup d'autres) pour éviter le Javascript mais finalement, il faudrait quand même l'utiliser, dans la <div> autour des menus pour signaler qu'avec IE, le conteneur doit avoir width:Xpx et, avec les autres navigateurs, Ypx.

Merci pour la réponse.
Ma question semblait éculée puisque je n'ai pas eu de réponse.

Pourtant, en chechant encore et sans avoir penser à ma première ligne de programme, c'est : <?xml version="1.0" encoding="iso-8859-1"?>
qui me fait verser dans le système des boîtes Microsoft et non des bôites standards.

Mais je ne comprends plus alors. Quel est l'intérêt d'écrire cette ligne vu son inconvénient ?. Pour se faire directement interpréter comme page xml ?

De plus, je constate que Raphaël commence toutes ses pages du Forum par <?xml version="1.0" encoding="iso-8859-1"?>. Par contre, pas les autres pages du site !

Où est l'astuce ?