28172 sujets

CSS et mise en forme, CSS3

Centrer un menu généré avec CSS Tab Designer [RESOLU]

Bonjour,
je ne sais pas si j'ai posté au bon endroit, et si c'est pas le cas j'en suis désolé.
Voilà, je suis en train de générer une bonne feuille de style CSS sur une page large de 980px, je souhaite y insérer un menu généré avec CSS Tab Designer 2 (un bon petit freeware),
j'arrive à définir la largeur (sinon elle prend 100%) mais je n'arrive pas à centrer, le menu reste toujours calé à gauche alors que ma page est bien centrée quelle que soit la taille du navigateur voilà le CSS généré:
Je souhaite juste savoir où est mon erreur que je puisse me corriger, merci d'avance !


/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:980px;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}
-->
Modifié par nounoursforcss (10 Oct 2010 - 20:42)
Hello,

Te répondre est un peu délicat, car on n'a aucune indication sur ton code html. Est-ce que TabF correspond au conteneur principal du site ou à ton menu ?
Dans tous les cas, pour centrer (horizontalement) un élément de type bloc au sein de son élément parent, on utilise généralement la technique des marges externes automatiques
désolé, je ne pensais pas qu'il était important, le voici:

</style>
</head>

<body>

<h2>Tab Menu F</h2>
<div id="tabsF">
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>

<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

</ul>
</div>
</body>
</html>
bon, je me suis remis à tatônner (parfois ça marche) et en changeant un padding de bas de 0 à 24px ça place mon menu où il faut:

/*- Menu Tabs F--------------------------- */

#tabsF {
float: none;
width:980px;
text-align: center;
position: relative;
margin: auto;
background:#878787;
font: bold 11px/1.5em Verdana;
font-size: 80%;
line-height:normal;
border-bottom:1px solid #4B4B4B;
}
#tabsF ul {
width:980px;
position: relative;
margin: auto;
padding:10px 10px 24px 50px;
list-style:none;
}
#tabsF li {
display:inline;
width:980px;
position: relative;
margin: auto;
padding:0;
}
#tabsF a {
float: left;
background:url("../pictures/tableftF.gif") no-repeat left top;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float: left;
display:block;
background:url("../pictures/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}

merci quand même, à la prochaine ! Smiley cligne
Je ne suis pas un spécialiste (j'apprend tout juste à vrai dire ...) mais es tu sur qu'en faisant comme ceci, ton menu sera centré pour toutes les résolutions ?
Sujet clos
Aller à