28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.
Voilà je n'arrive pas à faire centrer mon menu CSS. Je l'ai fait à l'aide d'un tableau à 1 lignes et 8 colonnes. J'ai dons mis que le <table> devait faire 100% de width, et chaque <td> 12.4%.
Voici mes codes :

<div id="menu">
<table>
<tr>
	<td id="td1"><a href="index.html" style="display: block; height:auto; width:100%;">Acceuil</a></td>
	<td id="td2"><a href="presentation.html" style="display: block; height: auto; width: 100%;">Pr&eacute;sentation</a></td>
	<td id="td3"><a href="membres.html" style="display: block; height: auto; width: 100%;">Membres</a></td>
	<td id="td4"><a href="publications.html" style="display: block; height: auto; width: 100%;">Publications</a></td>
	<td id="td5"><a href="seminaire.html" style="display: block; height: auto; width: 100%;">S&eacute;minaire</a></td>
	<td id="td6"><a href="stages.html" style="display: block; height: auto; width: 100%;">Stages</a></td> 
	<td id="td7"><a href="contact.html" style="display: block; height: auto; width: 100%;">Contact</a></td> 
	<td id="td8" class="actif8" ><a href="liens.html" style="display: block; height: auto; width: 100%;">Liens</a></td>
</tr>
</table>
  </div>



#menu {
	color : black;
	background-color :#0091ac ;
	margin:0 auto;
	height:auto;
	width:100%;
	padding-top:0;
	padding-bottom:0;
	padding-left:2%;
	padding-right:2%;
	border :1px;
	border-color:black;
	}


table
{
   border-collapse: collapse;
   width:100%;
   display:block;
   height:auto;
}

td {
	border : 1px solid black;
	background-color:white;
	text-align: center;
	font-family : Verdana,Arial,Helvetica,sans-serif;
	width:12.4%;
	}

Modifié par Fer2Lance (15 Oct 2010 - 20:32)
Alors personne ? Smiley cligne
Centrer un tableau comme quoi, ça parait bidon mais c'est pas evident tout compte fait ... Smiley ohwell
bonsoir,

Il me semble que l'on utilise plutôt des listes pour créer un menu
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html

Ensuite, si tu tiens à ton tableau, tu devrais essayer {margin: 0 auto;} sur l'élément table
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

En fait, j'ai fait un test, comme ça c'est centré :
#menu { 
    color : black; 
    background-color :#0091ac; 
    height:auto; 
    margin: 0 auto;
    width:100%; 
    border :1px; 
    border-color:black; 
    } 
 
 
table 
{ 
   border-collapse: collapse; 
   height:auto; 
   margin: 0 auto;
} 
 
td { 
    border : 1px solid black; 
    background-color:white; 
    text-align: center; 
    font-family : Verdana,Arial,Helvetica,sans-serif; 
    width:12.4%; 
    }

Modifié par thelma (14 Oct 2010 - 18:34)
Waw merci beaucoup thelma ! Génial ! Smiley biggrin

Par contre, est ce important d'utilisé une liste plutôt qu'un tableau pour faire un menu ?
Ou s'est pareil ?
Modifié par Fer2Lance (14 Oct 2010 - 20:11)
Visuellement, ça peut donner des résultats similaires. Tu peux utiliser un tableau, je ne crois pas qu'il y ait une loi contre. Mais ce n'est pas la façon la plus pertinente de faire, surtout que cela va te limiter ensuite en termes de mise en forme. Un menu en liste permet des mises en forme plus avancées (voir le tuto plus haut)
Généralement, on évite les tableaux de mise en page, sauf pour les données tabulaires où ils sont tout à fait pertinents Smiley smile :
http://openweb.eu.org/articles/problemes_tableaux/
Modifié par thelma (14 Oct 2010 - 21:01)
Bah... un tableau c'est fait pour présenter des données dans un tableau (type données numériques dans un tableur) et une liste c'est fait pour présenter une liste (et des sous-liste si besoin) d'options.

Donc selon toi, un menu (et ses sous-menus) c'est plutôt une liste d'options ou un tableau ?
Oui ok RACBasket, mais moi je n'ai pas besoin de sous-menu donc c'est exactement pareil. Enfin je pense.
Bon ok thelma et RACBasket, je modifierais tout mon menu pour le faire passer en liste. Maintenant qu'il marchait nickel ... Smiley sweatdrop
Smiley lol
Ca n'est pas une question de besoin, mais de sémantique et de détournement de balise.

Maintenant, l'utilisation d'un tableau pour faire un menu n'est pas interdite et fonctionne très bien. Si cette solution te convient, tu peux la conserver, je t'indique juste qu'il y a une meilleure manière d'obtenir le même résultat.