Aller au contenu

Comment centrer un rollover en CSS ?

Par Plantaquatix
dans Programmation et Lignes de code

Featured Replies

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 ...

  • Citer
    • 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;
}

  • Citer
    • Posté(e)
    • Auteur

    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:

  • Citer
    • 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 ...

  • Citer
    • Posté(e)
    • Auteur
    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>

  • Citer
    • Posté(e)
    • Auteur

    J'avais trouvé CA, mais je dois vraiment etre une bille car je n'y arrive touours pas. La seule chose que j'arrive a faire c'est centrer mon départ de block au milieu (50%), mais apres, je n'arrrive pas a mettre à ma marge à -425px (autre que celle de la page entiere), pour centrer le tout.

  • Citer
    • 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:

  • Citer
    • Posté(e)
    • Auteur

    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:

  • Citer
    • 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;
}

  • Citer
    • 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.

  • Citer

    • Archivé

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

    Aller sur la liste des sujets