Aller au contenu

Comment centrer un rollover en CSS ?

Plantaquatix

Messages recommandés

Plantaquatix Étoile Montante

Plantaquatix

Posté(e)
Posté(e)

Bonjour,

voila, mon probleme est que j'ai réaliser une barre de menu rollover en css, mais je voudrais maintenant le centrer sur ma page, et impossible de toruver comment faire ...

Pourriez- vous m'aider svp ?

Mon code CSS

a#menu1 { width: 80px; }
a#menu1:hover { background-position: -850px 0%; }
a#menu2 { width: 84px; }
a#menu2:hover { background-position: -930px 0%; }
a#menu3 { width: 102px; }
a#menu3:hover { background-position: -1014px 0%; }
a#menu4 { width: 103px; }
a#menu4:hover { background-position: -1116px 0%; }
a#menu5 { width: 92px; }
a#menu5:hover { background-position: -1219px 0%; }
a#menu6 { width: 78px; }
a#menu6:hover { background-position: -1311px 0%; }
a#menu7 { width: 101px; }
a#menu7:hover { background-position: -1389px 0%; }
a#menu8 { width: 81px; }
a#menu8:hover { background-position: -1490px 0%; }
a#menu9 { width: 53px; }
a#menu9:hover { background-position: -1571px 0%; }
a#menu10 { width: 76px; }
a#menu10:hover { background-position: -1624px 0%; }

body { background-color: #6d9cff; }

ul li { float: left; }

ul li a { color: #FFFFFF; display: block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; height: 80px; line-height: 30px; text-decoration: none; }

ul li a:hover { background: transparent url(../images/menu/rollover.gif) no-repeat top left; }

ul { background: transparent url(../images/menu/rollover.gif) no-repeat; left: 0px; position: absolute; text-align: center; top: 0; width: 850px; }

ul, li { list-style: none; margin: 0; padding: 0; }

Je sais que ca se passe au niveau de left: 0px; position: absolute;, mais je n'y arrive pas ...

Pour essayer de faire au plus simple, j'avais insérer un tableau a une colonne et une ligne pour y mettre le code CSS et en mettant l'alignement à 'center', mais ca ne marche pas ...

Lien vers le commentaire
Partager sur d’autres sites
Lilo27 Mentor

Lilo27

Posté(e)
Posté(e)

Il me semble que left 0px et position:absolute te mettra tout ça ... à gauche :transpi:

Je pense que cela devrait plutôt marcher avec margin-left: auto et margin-right: auto. Mais, il ne faut pas de float ni de position:absolute dans ce cas.

ul {
margin-left: auto;
margin-left: auto;
}

Lien vers le commentaire
Partager sur d’autres sites
Plantaquatix Étoile Montante

Plantaquatix

Posté(e)
  • Auteur
Posté(e)

Je suis venu, j'ai essayé ca, mais j'ai pas vaincu ...

a#menu1 { width: 80px; }
a#menu1:hover { background-position: -850px 0%; }
a#menu2 { width: 84px; }
a#menu2:hover { background-position: -930px 0%; }
a#menu3 { width: 102px; }
a#menu3:hover { background-position: -1014px 0%; }
a#menu4 { width: 103px; }
a#menu4:hover { background-position: -1116px 0%; }
a#menu5 { width: 92px; }
a#menu5:hover { background-position: -1219px 0%; }
a#menu6 { width: 78px; }
a#menu6:hover { background-position: -1311px 0%; }
a#menu7 { width: 101px; }
a#menu7:hover { background-position: -1389px 0%; }
a#menu8 { width: 81px; }
a#menu8:hover { background-position: -1490px 0%; }
a#menu9 { width: 53px; }
a#menu9:hover { background-position: -1571px 0%; }
a#menu10 { width: 76px; }
a#menu10:hover { background-position: -1624px 0%; }

body { background-color: #6d9cff; }

ul {
margin-left: auto;
margin-right: auto;
}

ul li a { color: #FFFFFF; display: block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; height: 80px; line-height: 30px; text-decoration: none; }

ul li a:hover { background: transparent url(../images/menu/rollover.gif) no-repeat top left; }

ul { background: transparent url(../images/menu/rollover.gif) no-repeat; text-align: center; top: 0; width: 850px; }

ul, li { list-style: none; margin: 0; padding: 0; }

Vous pouvez me dire ou je me suis trompé svp ?

d'ailleurs, quand je fais ca tout le reste de ma page disaprait, il ne me reste plus que momn menu de biuton, qui a la base est horziontale et quand je survole, me sboutons apparaissent ... verticalement ! :roll:

Lien vers le commentaire
Partager sur d’autres sites
Lilo27 Mentor

Lilo27

Posté(e)
Posté(e)

Il faudrait que tu postes aussi le code html, il y a peut-être d'autres éléments qui modifient le positionnement :D

Edit : Il est un peu compliqué ton code CSS, et plus c'est compliqué, plus ça risque de merder :mdr2: Les li en block et les background-position des liens notamment ...

Lien vers le commentaire
Partager sur d’autres sites
Plantaquatix Étoile Montante

Plantaquatix

Posté(e)
  • Auteur
Posté(e)
Edit : Il est un peu compliqué ton code CSS, et plus c'est compliqué, plus ça risque de merder :D Les li en block et les background-position des liens notamment ...

Je n'y peu rien, c'est vous qui me l'avasi fait :transpi:

Voila pour ce qui est du code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- début lien vers la feuille css du rollover-->
<link href="css/rollover.css" rel="stylesheet" type="text/css">
<!-- fin lien vers la feuille css  du rollover-->

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #7b8e95;
background-image: url();
}
-->
</style>
<link href="css/style_global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style1 {
font-size: 36px;
font-weight: bold;
color: #8EC6C6;
}
.Style2 {font-size: 16}
.Style3 {
font-size: 18px;
color: #9BDEFF;
}
#Layer1 {
position:absolute;
left:245px;
top:85px;
width:194px;
height:207px;
z-index:1;
}
.Style6 {
color: #8EC6C6;
font-style: italic;
}
.Style12 {color: #8EC6C6}
.Style13 {
color: #FFFFFF;
font-size: 16px;
}
#Layer2 {
position:absolute;
left:0px;
top:0px;
width:197px;
height:48px;
z-index:1;
}
#Layer3 {
position:absolute;
left:1300px;
top:10px;
width:79px;
height:76px;
z-index:2;
}
#Layer4 {
position:absolute;
left:50px;
top:18px;
width:79px;
height:76px;
z-index:2;
}
.Style15 {
color: #CCFF00;
font-size: 14px;
}
-->
</style>
</head>

<body>
<!-- début rollover css -->
<ul>
<li><a id="menu1" title="a" href="a.html"></a></li>
<li><a id="menu2" title="b" href="b.html"></a></li>
<li><a id="menu3" title="c" href="c.html"></a></li>
<li><a id="menu4" title="d" href="d.html"></a></li>
<li><a id="menu5" title="e" href="e.html"></a></li>
<li><a id="menu6" title="f" href="f.html"></a></li>
<li><a id="menu7" title="g" href="g.html"></a></li>
<li><a id="menu8" title="h" href="h.html""></a></li>
<li><a id="menu9" title="i" href="i.html"></a></li>
<li><a id="menu10" title="j" href="j.html"></a></li>
</ul>
<!-- fin rollover css -->
<table width="100%" height="100%" border="0" align="center" cellspacing="0" bgcolor=02222D div>
 <tr>
<td height="77" colspan="3" background="images/fond.gif" bgcolor="#6E9CFF">
 </tr>
 <tr>
 <td colspan="3" bgcolor="02222D"><div align="center"><img src="images2.gif" alt="" width="850" height="77" /></div>  </tr>
 <tr>
  <td width="300" bgcolor="#02222d"><p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p><img src="images3.png" width="212" height="131" /></p></td>
<td width="1348" bgcolor="#02222d"><div align="center"></div></td>

<td width="300" bgcolor="#02222d"><p class="Style13"> </p>	</td>
 </tr>
 <tr>
<td height="171" colspan="3" background="images.jpg"><div align="center">
  <p> </p>
  <p> </p>
  <p> </p>
</div></td>
</tr>
</table>

<div align="center" class="style_global"><br />
</div>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites
Shtong Régulier

Shtong

Posté(e)
Posté(e)

Le truc du margin left/right à auto ne fonctionne que si tu spécifies une largeur manuellement.

Si tu connais précisément la largeur de ton menu peux faire :

ul {
 margin-left: auto;
 margin-right: auto;
 width: 800px;
}

Après c'est un peu déconseillé car c'est l'horreur à maintenir ces tailles fixes mais au point où tu en est :transpi:

Lien vers le commentaire
Partager sur d’autres sites
Plantaquatix Étoile Montante

Plantaquatix

Posté(e)
  • Auteur
Posté(e)

J emets ca directement dans ma feuille CSS sans rien retirer d'existant? Si oui, ben, ca ne chnage rien du tout.

Sinon, peux tu me remettre tout le code avec ton insertion stp ? :francais:

Après c'est un peu déconseillé car c'est l'horreur à maintenir ces tailles fixes mais au point où tu en est :transpi:

Comment dis précédement, c'est vous qui m'avez aider a faire ca, donc si maintenant vous me dites que ce n'est pas bien :francais::transpi:

Lien vers le commentaire
Partager sur d’autres sites
Lilo27 Mentor

Lilo27

Posté(e)
Posté(e)

Ouais, mais je crois que le reste du code ne va pas du tout :transpi: Il faudrait reprendre à zéro, AMHA ...

Si je comprends bien, tu veux une barre de menus horizontaux, centrée dans ta page (c'est bien ça ?)

Tu peux créer des menus horizontaux avec un float sur chaque li (c'est ce que tu as fait), soit en mettant chaque li en display:inline.

Quand on utilise des float et qu'il n'y a pas de largeur indiquée (comme l'a dit Shtong), c'est quasi impossible de centrer.

Reprends une feuille vide. Ceci devrait te permettre d'obtenir ce que tu recherches (basiquement ... après, il faut voir ce que tu veux)

Code html :

<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>

Code css :

ul {
text-align: center;
}

li {
display: inline;
}

Lien vers le commentaire
Partager sur d’autres sites
Lilo27 Mentor

Lilo27

Posté(e)
Posté(e)

Je te mets le code entier (avec css dans la page html, c'est pas bien mais pas grave pour ça)

Tu prends une page html blanche et tu colles :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Essai</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
ul {
	text-align: center;
}

li {
	display: inline;
}
</style>

</head>

<body>
<div>
<ul>
	<li>Menu 1</li>
	<li>Menu 2</li>
	<li>Menu 3</li>
</ul>
</div>
</body>
</html>

Ca doit marcher :fete:

Et si tu es mal à l'aise avec le html, n'hésite pas à jeter un oeil à ce site où tout est très bien expliqué :fete:

Le plus important : comprendre le positionnement. ce tuto est extra pour cela.

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...