[résolu] Problème débutant (centrage)

Bonjour,

Tout d'abord voici mon ébauche de site.
Je débute en xhtml et css et j'ai lu qu'entre les différents navigateurs il y a quelque disfoncitonnements. Et mon site ne déroge pas à la règle.

Tout d'abord j'ai commencer par faire le "design" . Ensuite je me suis intéressé au menu : j'ai utiliser celui crée par Raphaël GOETTER , celui-ci. J'ai modifer les liens, les menu et le style pour pouvoir l'intégré à mon site.

Mais bon pour mes problèmes sous mozilla :
- le site n'est pas centré, il est à droite
- le menu est plus large que le site
- la police est plus grande

Je ne sais pas comment résoudre ces problèmes, je débute et cherche des conseils.

Merci de votre aide.

Kresta
Modifié par Kresta (27 Jun 2006 - 09:53)

Salut,

Le css est super bien commenté , prend ton temps :

Voila pour la largeur des menus.

#menu dl {
float: left;
[b]width: 11.9em; /* largeur des menu */[/b]
}

Le site est callé a gauche chez moi (et non a droite), ce qui est normal.
La solution est là

Pour ce qui est de la police ,c'est pareil, cherche un peu tu trouveras, faut mettre le nez dans le code si tu veux readapter selon tes besoins...

Bon courage.

Oui mais pour la largeur des menu je sais bien c'est moi qui a mis ce commentaire, mais comment faire pour que sous IE les menu ai une largeur de 11,9em et que sosu FF il soit plus petit mais prenne toujours la largeur entièrement??

Je vais encore fouiller pour trouver solutions à mes problèmes.
Merci beaucoup.

Bonne journée

Kresta a écrit :
Oui mais pour la largeur des menu je sais bien c'est moi qui a mis ce commentaire, mais comment faire pour que sous IE les menu ai une largeur de 11,9em et que sosu FF il soit plus petit mais prenne toujours la largeur entièrement??

Je n'ai trouvé qu'une solution qui me semble relever du bricolage : / :
Diviser la talle du body par 5 (le rendre divisible par 5) et appliquer la valeur en px à l'element, ça fonctionne.

Ta CSS a des erreurs : rapidemment:

- elle ne doit pas commencer par un commentaire /*
- <!-- n'est pas un commentaire css mais html.
- align est deprecié, utilise text-align
- C'est pas padding: none, mais padding: 0;
...et d'autres que j'ai oubliées.....

Sert toi du validateur de CSS
Le meme pour l'html

Ta CSS "rafistolée rapidos" : avec ton centrage de site recherché :

body{
	width: 760px;
	margin: 20px auto;
}

/* L'en-t?te */
#header
{
	width:765px;
	height:130px;
	background-color: #ffffff;
    	border: 0px solid black ;
	margin-bottom:0px;
   	background-image: url("images/commun/ban.jpg");
	padding:0;
}

#corps
{
   background-image: url("images/commun/hauttb.png");
   background-repeat: repeat-x;
   padding-top: 30px;
   padding-left: 10px; 
   padding-right: 10px;
   padding-bottom: 10px;
   color: black;
   background-color: #e0e7fa; /* Une couleur de fond pour le corps */
   border: 0px solid black; /*  Une bordure pour bien marquer les limites du corps et pour faire joli */
   border-right:1px solid black;
   border-left:1px solid black; 
}

#footer
{
   padding: 0;
   background-image: url("images/commun/foot.jpg");
   background-repeat: repeat-x; 
   border: 1px solid black;
   height:30px;
}

.txtfooter
{
   margin-top: 5px;
   color:white;
   background-color:#0046B6 ;
   border: 1px inset blue;
   text-align: center;
}


/* CSS issu des tutoriels css.alsacreations.com  merci a vous*/

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
z-index:100;
width: 100%; /* pr?cision pour Opera */
}

#menu dl {
float: left; 
 width: 152px; /*largeur des menu */
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #049DFF;
border: 1px solid gray;
margin: 1px;
color:white;
}

#menu dd {
display: none;
border: 1px solid gray;
}

#menu li { /* sous menu */
text-align: left;
padding-left : 6px;
padding-right : 6px;
background: #fff; /* couleur arriere plan ss menu */
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover,#txtmenu:hover{
 background: #76CAFF;
color: red;
/* font-style: italic; liens en italique  */
}

#txtmenu{ color:white;}

Modifié par Hum (25 Jun 2006 - 14:44)