[Résolu] Design de menus

Salut tout le monde !
Je commence un site, mais j'ai un petit problème pour mes menus... Voilà mon site tel qu'il est maintenant : http://www.metroidmaster.com/
J'espère que vous allez comprendre ce que je vais expliquer à l'écrit, parce que je n'arrive pas à uploader mes captures d'écran.
Ce que je voudrais, c'est mettre en image de fond de ma page une forme (rectangle arrondi) qui puisse s'élargir en fonction de la taille de la page. Pour ça, je pense qu'il faut que je découpe mon rectangle en trois morceaux : le haut, avec les arrondis, le centre, et le bas, avec les arrondis aussi. Je ne connais pas le code CSS pour intégrer mes images, et j'aimerais savoir ce qu'il faut mettre dans le CSS pour ça. J'ai le même problème avec mes menus, pareil, je voudrais mettre un rectangle derrière mais je ne connais pas le code pour mettre une partie en haut, une au centre et une en bas. Voilà mon code CSS pour la page :

body
{
	padding: 5px;
	width: 760px;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 20px;
	margin-left: 5px  
	margin-right: 5px;
	background-color: transparent;
	background-image: url(Lignes-Pixels-Fond.png);
	font-family: Arial;
	border: 0px solid black;
}

Et pour les menus :

#menu
{
   float: left;
   width: 194px;
	font-family: Arial;
}

.element_menu
{
   background-color: transparent;
   background-repeat: repeat-x;
   font-family: Arial;
	font-size: 12px;
   border: 0px solid black;
   margin-bottom: 20px;
}

.element_menu h3
{
	color: none;
	padding: 5px;
	font-family: Arial;
	text-align: center;
	margin-top: -2px;
}

.element_menu ul
{
   list-style-image: ;
   padding: 0px;
   padding-left: 20px;
   margin-top: -20px;
   margin-bottom: 5px;
	font-family: Arial;
}

Donc voilà, j'espère que vous m'avez compris, parce que c'est peut être pas très bien expliqué mais je vois pas trop comment dire autrement
Merci ! Salut !
Modifié par MetroidMaster (16 Mar 2007 - 22:26)

Bonsoir,
Pour commencer la police arial doit être suivi de polices de substitution
et en dernier la police générique (sans-serif) pour les poste n'étant pas pourvu d'Arial:
exemple:

Arial, Helvetica, sans-serif

Je ne vais pas t'écrire le code mais te donner quelques pistes:
Tu as 2 possibilités:
Soit un crées un div dans lequel tu imbriques tes image haut et bas
placées en position absolue, ton bloc conteneur devra alors être en position relative pour servir de point de référence au placement des tes images.
Ensuite un crées une image de 1px X (la largeur de ton bloc) qui se répète sur l'axe des Y.

Soit au lieu d'avoir tes image dans le code tu crées 2 div supplémentaires
avec une hauteur correspondant à celle de tes image et auquel tu donnes
une background correspondant à tes images.

Bonsoir !
Déjà, pour la police, Arial fonctionne très bien, et je la laisse parce que le résultat me va.
Pour l'histoire des div et tout ça, comme je débute en HTML, je vais essayer de me débrouiller mais je risque d'avoir du mal, je sais pas quels div il faut faire. Bon je vais essayer déjà avec ça, merci pour ton aide !

Edit : Ouais bon le coup des div, là, je comprend pas. Je sais pas où je dois le placer, ce que je dois écrire, j'ai cherché dans plein de sites si c'était écrit quelque part comment faire mais j'ai jamais trouvé... Et pour le fond de la page tu sais pas comment on fait ?
Modifié par MetroidMaster (16 Mar 2007 - 21:47)

Bah finalement j'ai trouvé tout seul c'est cool
Enfin quand je dis tout seul, j'ai fait avec les div comme tu m'as dit donc merci beaucoup ! Salut !

Salut,

MetroidMaster a écrit :
Déjà, pour la police, Arial fonctionne très bien, et je la laisse parce que le résultat me va.

Je pense que tu n'as pas bien compris l'intervention d'Herman concernant la police, il a tout a fait raison, l'arial fonctionne bien sur ton ordinateur, mais il n'est rien de moins sur que l'arial se trouve sur tous les ordinateurs des visiteurs de ton site.
Il est vrai que l'arial n'est pas une énorme prise de risque, mais il serait quand même plus sage de définir une famille de police, utilisée en substitition dans les cas ou l'arial n'est pas présente, pour que ta mise en page ne soit pas saccagée par une police qui n'a rien à voir avec l'arial.
Bon, maintenant, si tu fais ce site pour ta satisfaction personnelle et que tu te moque d'éventuels visiteurs, ne t'embète pas avec çà.

Ah ouaaiiiiiis mais moi je sais pas moi
Oui bah dis comme ça oui je comprend je vais le faire, mais le XHTML/CSS moi je commence donc je savais pas ça Bon bah alors merci, je vais le faire. Par contre j'ai remarqué que ma mise en page avait pas de problèmes sous FF, mais sous IE, déjà j'avais pas pensé aux images .png, qui ont donc des contours blancs, et j'ai des espaces supplémentaires entre les images du haut et du centre de mes menus que j'ai pas sous FF, et ça à l'air compliqué de les enlever. Je vais essayer de me débrouiller, je reviendrais en cas de problème alors !
Merci beaucoup les gens !