[Résolu] Impossible de redimensionner le corps de page - en fonction de la résolution d'écran du visiteur - page 1

Bonjour à tous,

J'essaie de faire un design extensible et malheureusement, ça ne fonctionne pas tellement bien. Avant de tout vous expliquez, je vais vous donner ma feuille CSS et mon code XHTML:

BODY
{
background-color: #EAF4FF;
font-family: "Trebuchet MS";
font-size: 13px;
}

#conteneur
{
background-image: url('images/barre_menu.jpg');
background-repeat: repeat-y;
background-color: #4879D4;
position: absolute;
width: 100%;
margin: auto;
border: 1px solid black;
}

html>body #conteneur
{
width: 98%;
}

#header
{
}

#header img
{
width:100%;
height: 121px;
}

#menu_header
{
background-image: url('images/barre2.PNG');
background-repeat: repeat-x;
text-align: center;
font-family: "Trebuchet MS";
font-size: 13px;
padding-top: 7px;
height: 30px;
}

#menu_gauche
{
width: 200px;
margin: 0px;
padding: 0px;
background-image: url('images/barre_menu.jpg');
background-repeat: repeat-y;
background-color: #4879D4;
float: left;
}

#menu
{
margin: 0px;
padding: 0px;
background-image: url('images/fond_menu2.jpg');
background-repeat: repeat-y;
background-color: #4879D4;
float: left;
width: 100%;
}

#corps
{
background-image: url('images/fond_infos2.gif');
background-color: #C8E1FF;
background-repeat: repeat-y;
float: left;
width: 78%;
font-family: "Trebuchet MS";
font-size: 12px;
}

#espace_droit
{
background-image: url('images/fond_espace_droite.PNG');
background-repeat: repeat-y;
background-color: #4879D4;
}

#bas_menu
{
float: left;
width: 201px;
background-color: #4879D4;
}

#bas_corps
{
float: left;
width: 77%;
background-image: url('images/bas_infos.gif');
background-repeat: repeat-x;
background-color: #4879D4;
font-family: "Arial";
font-size: 9px;
text-align: center;
padding-top: 5px;
}

#bas_corps a
{
color: black;
}

#bas_espace_droit
{
background-color: #4879D4;
}

.titre_menu
{
font-family: "Trebuchet MS";
font-size: 13px;
font-weight: bold;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 0px;
}

.contenu_menu
{
font-family: "Trebuchet MS";
font-size: 12px;
font-weight: bold;
color: #4D6A99;
margin-left: 5px;
margin-bottom: 5px;
padding-left: 5px;
}

p
{
font-family: "Trebuchet MS";
font-size: 13px;
margin-left: 5px;
margin-right: 5px;
}

a:link
{
text-decoration: none;
font-weight: bold;
color: #4D6A99;
}

a:visited
{
text-decoration: none;
font-weight: bold;
color: #4D6A99;
}

a:hover
{
color: #000000;
}

.tableau_news
{
border-right: #A9D1FF 1px solid;
border-top: #A9D1FF 1px solid;
border-left: #A9D1FF 1px solid;
border-bottom: #A9D1FF 1px solid;
margin: auto;
}

.corps_news
{
padding-top: 20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Script Creator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">

<div id="header"><img src="images/SC.gif" alt="" width="100%" height="121" /></div>
<div id="menu_header"><img src="images/barre2.PNG" align="middle" alt="" />Accueil - Forum - Livre d'or - Team - Copyright - Inscription - Connexion</div>

<div id="menu_gauche">
<div id="menu">
<div class="titre_menu"><img src="images/icone_cours.gif" alt="" /> Cours</div><br />
<div class="contenu_menu"><img src="images/icone_vu.gif" alt="" /> <a href="#">PHP/MySQL</a><br />
<img src="images/icone_vu.gif" alt="" /> Tutoriaux
</div>
<img src="images/ligne.gif" alt="" />
<br />
<div class="titre_menu"><img src="images/icone_communaute.gif" alt="" /> Communauté</div><br />
<div class="contenu_menu"><img src="images/icone_bulle.gif" alt="" /> 1 visiteur connecté<br />
<img src="images/icone_bulle.gif" alt="" /> Voir tous les membres<br />
</div>
<img src="images/ligne.gif" alt="" />
<br />
<div class="titre_menu"><img src="images/icone_menu.gif" alt="" /> Espace membre</div><br />
<div class="contenu_menu">Pseudo: <br /><input type="text" name="pseudo" style="width:100px;"><br />Password:<br /><input type="password" name="password" style="width:100px;" /><br /><input type="submit" name="envoyer" value="Se connecter" /></div>
<br />
<img src="images/menu_bas.gif" alt="" /></div>
</div>
<div id="corps"><h1 style="text-align: center;font-family: 'Trebuchet MS'; font-size: 20px;font-weight: bold;margin:0px;"><img src="images/incone_news.gif" alt="" /> Bienvenue sur Script-Creator !<br /><br /></h1>
<p>Script-Creator
est un site qui vous apprendra des langages web. Si vous cherchez un
site web capable de vous montrez pas-à-pas comment utiliser un langage
de programmation, vous avez trouvé le bon endroit. On vous offre
des cours gratuits qui vous montrerons le plus facilement et le plus clairement
possible tout ce qu'il y a à savoir. Si vous avez une difficulté dans
un cours ou bien tout simplement dans un script, Script-Creator dispose d'un
forum pour que vous puissiez poser vos questions pour que d'autres membres
puissent vous aidez.</p><br />

<p style="font-size: 16px; font-weight: bold;"><img src="images/incone_news.gif" alt="" /> Les news</p>

<table width="69%" border="0" cellpadding="2" cellspacing="0" class="tableau_news">
<tr>
<td height="20" colspan="2" background="images/fond_news.gif" class="titrenews"><div align="left">Titre news </div></td>
</tr>
<tr>
<td style="background-color: white;font-size: 9px;">Écrit par Luigi_home le 00/00/00 à 00:00</td>
<td style="background-color: white;font-size: 9px;text-align:right;">7 commentaires</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF" class="corps_news">Blabla news no1 tralalitralala<br />
Blabla ohhh
<br />
Date</div></td>
</tr>
</table><br /><br /></div>
<div id="espace_droit"> </div>

<div id="bas_menu"> </div>
<div id="bas_corps">Copyright Script Creator 2006 - Design by <a href="http://www.jajakillah.com">JaJaKillaH</a></div>
<div id="bas_espace_droit"> </div>
</div>
</body>
</html>

Le problème est que si le visiteur est en 800*600, le corps de la page est en bas du menu alors qu'il devrait normalement être à côté du menu. J'ai essayer de rappetisser le corps à 50% et là sa fonctionne sauf que lorsqu'on est dans une résolution plus grande, le corps n'est pas assez large.

Pouvez-vous m'aider à trouver pourquoi le corps va en bas du menu s.t.p ?

Merci beaucoup pour votre aide,
Luigi_home

PS: Si il manque des infos, n'hésitez pas à me le dire

Anonyme

9 mai 2006 à 21:45:36

strucky

10 mai 2006 à 11:26:09

Salut,

Comment veux-tu que ça ne déconne pas alors que tu donnes un width de 200px pour ton menu_gauche et un width de 78% pour ton corps.

Tu ne peux pas travailler en px d'un côté et en pourcentage de l'autre.

Donc :

#corps
{
background-image: url('images/fond_infos2.gif');
background-color: #C8E1FF;
background-repeat: repeat-y;
font-family: "Trebuchet MS";
font-size: 12px;
margin-left: 200px;
}

Faudrait également faire du ménage dans ton code, y'a plein de blocs inutiles.

11 mai 2006 à 19:27:39

J'ai essayer et malheureusement, ça ne fonctionne pas. Pour que ça fonctionne, il faut que je mette mon menu en pourcentage mais comme je veux qu'il est une grandeur statique, je ne peux pas mettre de pourcentage ...

Donc si quelqu'un a des idées, je suis preneur !

Merci beaucoup pour votre aide,
Luigi_home

11 mai 2006 à 19:54:36

Désolé, mais chez moi, ce que je t'ai mis fonctionne parfaitement.

11 mai 2006 à 20:03:05

Citation : strucky

Comment fais-tu ? Parce que moi, j'ai beau mettre le même code que tu m'as donné, ça ne fonctionne pas

Merci beaucoup,
Luigi_home

11 mai 2006 à 20:21:27

Je viens de tester, en remplaçant ton #corps par celui que je t'ai mis, et ça fonctionne.

Donc je vois pas trop pourquoi ça ne marche pas chez toi.

11 mai 2006 à 20:45:29

OK, je viens de réussir à faire fonctionner le code. Le problème était que j'avais garder mon float: left; :-°

Mais maintenant, tout fonctionne comme il faut ! Merci beaucoup strucky pour ton aide

Luigi_home

Impossible de redimensionner le corps de page

en fonction de la résolution d'écran du visiteur

Impossible de redimensionner le corps de page

Supprimer

Modérer

Signaler le message aux modérateurs