Largeur automatique par rapport a la résolution

Bonjour à tous !

J'aimerais que mon site s'adapte à largeur de lécran du visiteur (ou plutot de sa résolution).

en effet comme vous pouvez le voir actuellement ma largeur est fixe.

SITE ici

J'aimerais par exemple que le menu horizontales'allongie (comme celui du sdz) et que ce soit le bloc du milieu de ce menu (ou il y a les tirets) qui s'adapte al'écran du visiteur, tout comme le fait le sdz

Merci d'avance pour méclairer

Voici déja la partie de mon CSS intéresante

/*Général */
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond_jaune.png");
}

/* L'en-tête */

#en_tete
{
width: 770px;
height: 171px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* menu haut */

#menu_haut
{
padding: 3px;
color: #B3B3B3;
margin: 5px;
margin-bottom: 10px;
}

#menu_haut a /* tout les liens appartenants au menu haut */

{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: #666666; /* Les liens seront en rouge au lieu de bleu */
}

.lien_haut

{

border-top: 1px dashed black;
border-left: 1px dashed black;
border-bottom: 1px dashed black;
padding: 4px;
padding-right:5px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 13px;
font-weight: bold;
}

.lien_haut_droite
{
border-top: 1px dashed black;
border-left: 1px dashed black;
border-right: 1px dashed black;
border-bottom: 1px dashed black;
padding: 4px;
padding-right:5px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 13px;
font-weight: bold;
}

Et le HTMl correspondant

<body>

<!–– L'en–tête ––>

<div id="en_tete">

</div>

   <!–– Le menu horizontales ––>

   <div id="menu_haut">
<span class="lien_haut"><img src="images/icone_maison.jpg" /><a href="index.php"> Accueil </a></span><span class="lien_haut"><img src="images/icone_information.jpg" /><a href=" .php"> Nous connaître </a></span><span class="lien_haut"><img src="images/icone_mail.jpg" /><a href="contacter.php"> Nous contacter </a></span><span class="lien_haut">------------------------</span><span class="lien_haut"><img src="images/icone_mail.jpg" /><a href="contacter.php"> Nous contacter </a></span><span class="lien_haut_droite"><img src="images/icone_mail.jpg" /><a href="se_connecter.php"> Se connecter </a></span>
</div>

Merci d'avance

Snipy11

11 avril 2006 à 15:50:47

le_stoppeur

11 avril 2006 à 16:10:53

Pour indiquer une largeur extensible, tu indique à ton body une largeur en %;

Donc:

body
{
width: 90%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond_jaune.png");
}

11 avril 2006 à 16:20:13

Merci ! masi sinon comment faire pour que ce soit l'espace (ou moi j'ai mis des tiret) qui se rétrécice ou s'agrandisse au lieu de dépalcer tout le menu ? merci d'avance

12 avril 2006 à 19:50:20

un petit,
Avez voux compris ma question ? ou je me suis mal exprimé ? merci d'avance

j'aimerais la meme adaptation que le SDZ

Largeur automatique par rapport a la résolution

Supprimer

Modérer

Signaler le message aux modérateurs