Centrer menu horizontale UL dynamique
Jezu
-
SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention -
SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un gros soucis avec mon menu UL dynamique pour le centrer...
Il reste sur la gauche malgré toutes les modifications que j'ai essayé d'apporter...
Je vous copie mon CSS et HTML, votre aide me serait précieuse !
Merci par avance
<!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=UTF-8" />
<title>Jezu Photography</title>
<style type="text/css">
#Jezu_Photography ul {
margin: auto;
padding: 0;
list-style-type: none;
text-align:center;
}
#Jezu_Photography li {
float:left;
margin:auto;
padding:0;
background-color:black;
text-align:center;
}
#Jezu_Photography li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
padding:5px;
border:2px solid;
}
#Jezu_Photography li a:hover {
color:#FFD700;
}
#Jezu_Photography ul li ul {
display:none;
}
#Jezu_Photography ul li:hover ul {
display:block;
}
#Jezu_Photography li:hover ul li {
float:none;
}
#Jezu_Photography li ul {
position:absolute;
}
#Jezu_Photography a:hover
{
color: #000;
background: #fff;
}
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#Jezu_Photography li:hover ul ul, #Jezu_Photography li.sfhover ul ul */
{
left: -999em;
}
#Jezu_Photography li:hover ul, #Jezu_Photography li li:hover ul, #Jezu_Photography li.sfhover ul, #Jezu_Photography li li.sfhover ul
left: auto;
min-height: 0;
}
</style>
</head>
<body bgcolor="white" text="black" link="black" vlink="black" alink="black">
<br />
<img src="images/copyright/Copyright.jpg" width="300" height="123" />
<br />
<center>
<font color="black">
<ul id="Jezu_Photography">
<center>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Paysages</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Londres</a></li>
<li><a href="#">Tattoo</a></li>
<li><a href="#">Dandy à Moustache</a></li>
<li><a href="#">Clown to Retire</a></li>
<li><a href="#">Stem Devil</a></li>
<li><a href="#">On Pari ?</a></li>
<li><a href="#">Rain on the Sun</a></li>
<li><a href="#">22.467</a></li>
<li><a href="#">L'ignorance</a></li>
<li><a href="#">Voie Piétonne</a></li>
<li><a href="#">LAURO - Prima Parte</a></li>
<li><a href="#">LAPLAND</a></li>
<li><a href="#">Or not to be ?</a></li>
<li><a href="#">Toxicosmétique</a></li>
<li><a href="#">Oui, je le veux</a></li>
<li><a href="#">Enfants</a></li>
<li><a href="#">Artistes</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Biographie</a></li>
<li><a href="#">Autres</a>
<ul>
<li><a href="#">Estomaqué - Le Projet</a></li>
<li><a href="#">Vidéos</a></li>
</ul></li>
<li><a href="#">Contact</a></li>
</ul>
</center>
</ul>
</center>
</body>
J'ai un gros soucis avec mon menu UL dynamique pour le centrer...
Il reste sur la gauche malgré toutes les modifications que j'ai essayé d'apporter...
Je vous copie mon CSS et HTML, votre aide me serait précieuse !
Merci par avance
<!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=UTF-8" />
<title>Jezu Photography</title>
<style type="text/css">
#Jezu_Photography ul {
margin: auto;
padding: 0;
list-style-type: none;
text-align:center;
}
#Jezu_Photography li {
float:left;
margin:auto;
padding:0;
background-color:black;
text-align:center;
}
#Jezu_Photography li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
padding:5px;
border:2px solid;
}
#Jezu_Photography li a:hover {
color:#FFD700;
}
#Jezu_Photography ul li ul {
display:none;
}
#Jezu_Photography ul li:hover ul {
display:block;
}
#Jezu_Photography li:hover ul li {
float:none;
}
#Jezu_Photography li ul {
position:absolute;
}
#Jezu_Photography a:hover
{
color: #000;
background: #fff;
}
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#Jezu_Photography li:hover ul ul, #Jezu_Photography li.sfhover ul ul */
{
left: -999em;
}
#Jezu_Photography li:hover ul, #Jezu_Photography li li:hover ul, #Jezu_Photography li.sfhover ul, #Jezu_Photography li li.sfhover ul
left: auto;
min-height: 0;
}
</style>
</head>
<body bgcolor="white" text="black" link="black" vlink="black" alink="black">
<br />
<img src="images/copyright/Copyright.jpg" width="300" height="123" />
<br />
<center>
<font color="black">
<ul id="Jezu_Photography">
<center>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Paysages</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Londres</a></li>
<li><a href="#">Tattoo</a></li>
<li><a href="#">Dandy à Moustache</a></li>
<li><a href="#">Clown to Retire</a></li>
<li><a href="#">Stem Devil</a></li>
<li><a href="#">On Pari ?</a></li>
<li><a href="#">Rain on the Sun</a></li>
<li><a href="#">22.467</a></li>
<li><a href="#">L'ignorance</a></li>
<li><a href="#">Voie Piétonne</a></li>
<li><a href="#">LAURO - Prima Parte</a></li>
<li><a href="#">LAPLAND</a></li>
<li><a href="#">Or not to be ?</a></li>
<li><a href="#">Toxicosmétique</a></li>
<li><a href="#">Oui, je le veux</a></li>
<li><a href="#">Enfants</a></li>
<li><a href="#">Artistes</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Biographie</a></li>
<li><a href="#">Autres</a>
<ul>
<li><a href="#">Estomaqué - Le Projet</a></li>
<li><a href="#">Vidéos</a></li>
</ul></li>
<li><a href="#">Contact</a></li>
</ul>
</center>
</ul>
</center>
</body>
A voir également:
- Centrer menu horizontale UL dynamique
- Tableau croisé dynamique - Guide
- Menu déroulant excel - Guide
- Exemple tableau croisé dynamique télécharger - Télécharger - Tableur
- Ligne horizontale word - Guide
- Canon quick menu - Télécharger - Utilitaires