Souci en Css ( résolution) Fermé

Question

Bonjour, j'ai un souci sur mon fichié index.css je m'éxplique Je suis au CVL de mon lycée et l'on ma chargé de crée le site du CVL ( Conseil de Vie Lycéenne) donc sachant que ca ne me dérange pas je m'exécute mais j'ai un souci avec mes block... sur mon écran ca marche trés bien mais sur les ecrans du lycée qui eux sont plus large il y a un décalage du menu et du corps et je ne comprend pas trop comment le réglé .... je pense que le souci viendrai de mes balise position: absolute; donc je vous donne mon fichié Css et mon index.html et si possible essayé de mavancé une explication que je ne réalise plu la méme erreur . je vous remmercie =) Voici mon CSS: body { width: 960px; margin: auto; background-image: url("images/ombredroite.gif"); background-repeat: repeat-y; background-position: 1122.25px; } #en_tete { width:960px; height:153px; background-color: #99CC99; background-image: url("images/ombregauche.gif"); background-repeat: repeat-y; padding-left: 9.5px; } .bordure { width:960px; position:absolute; top: 149px; left: 162px; } #menu { float: left; /*à gauche */ width: 220.5px; /* taille du menu */ height: 2155px; background-color: #E7E7E7; background-image: url("images/ombregauche.gif"); background-repeat: repeat-y; position: absolute; left: 152px; top: 153px; } #accesrapide { position: absolute; top: 156px; left: 155px; } #date { position: absolute; top: 160px; font-family: "Arial Black"' size: x-small; position: absolute; left: 17px; top: 23px; } .element_menu { width: 215px; background-color: #E7E7E7; background-image: url("images/ombregauche.gif"); background-repeat: repeat-y; position: absolute; left: 152px; top: 95px; } .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */ { width: 220.5px; padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */ Voici mon html ( d'index): Bienvenue sur le site du CVL du lycée Jacques Prévert !

Bienvenue

Quel est l'interêt du CVL dans le lycée?

Le Conseil de Vie Lycéenne (CVL) est une instance qui regroupe élèves, personnels administratifs et membres de la direction.

Nos préocupations principales portent sur :

-les questions relatives aux principes généraux de l'organisation des études,
-le projet d'établissement,
-l'élaboration du règlement intérieur,
-l'information liée à l'orientation et portant sur les études scolaires et universitaires, sur les carrières professionnelles,
-les modalités générales de l'organisation du travail personel et du soutien des élèves,
-la formation des délégués,
-l'aménagement des espaces destinés à la vie lycéenne,

Qui fait partie du CVL?

Le CVL est composé de 10 représentants et 10 suppléants élus des élèves.
Trois sont élus pour un an et sept élus pour deux ans par l'ensemble des élèves de l'établissement.

Le conseil est présidé par le chef d'établissement. Les représentants des lycéens élisent,
parmi eux, un vice-président pour une durée d'un an.

Quand nous réunissons-nous ?

Nous nous réunissons tous les premiers mardis du mois avec les CPE
et le bureau pour discuter de nos engagements. Ainsi que de nombreuses réunions
comprenant seulement les élèves du CVL.

JE vous remmercie d'avance =) Configuration: Linux Ubuntu

Kemich · Answer

Enchanté, 

Effectivement, je suis sur IE 8, et il y a un gros probleme avec ton menu.

Je ne peut pas revoir tout ton code pour voir ce qui cloche, cependant, si tu veut partir sur des bases saines, je te propose d'aller voir par ici : 
http://www.alsacreations.com/static/gabarits/liste.html

Si tu ne fait pas de modifications "foireuses", ton site devrait s'afficher correctement avec tous les browsers, et avec toutes les résolutions d'écran.

Bon courage.

[H-B-H] · Answer

ca marche  toujours pas  sur ton site j'ai pas trouvé la présentation que jvoulé doonc bon  je me  suis rabbatu sur des tuto et je ne comprend pas j'ai bau regarder encor et encor et je ne trouve pas :s la jai reussi a recentré mais y a un autre problem ( qui naparait pas sur mon pc* )
voilà le nouveau CSS:

body
{
   width: 960px;
   margin: auto;
   background-image: url("images/ombredroite.gif");
   background-repeat: repeat-y;
   background-position: 1122.25px;
}
#en_tete
{
   width:960px;
   height:153px;
   background-color: #99CC99;
   background-image: url("images/ombregauche.gif");
   background-repeat: repeat-y;
   padding-left: 9.5px;
}
.bordure
{
   width:960px;
   position:absolute;
   top: 149px;
   left: 162px;
}

#menu
{
   float: left; /*à gauche */
   width: 211px; /* taille du menu */
   height: 2155px;
   background-color: #E7E7E7;
   background-image: url("images/ombregauche.gif");
   background-repeat: repeat-y;
}
.accesrapide
{
   position: absolute;
   top: 156px;
   left: 155px;
}
.date
{
   font-family: Arial;
   size: x-small;
   position: absolute;
   left: 170px;
   top: 175px;
}
.element_menu
{
   width: 215px;
   background-color: #E7E7E7;
   background-image: url("images/ombregauche.gif");
   background-repeat: repeat-y;
   position: absolute;
   left: 152px;
   top: 95px;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   width: 220.5px;
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 10px; /* marge de gauche à 10 pixels */
   padding-top: 6px;
   padding-bottom: 4px;
   list-style:none;
   position: absolute;
   left: 0px;
   top: 105px;
   font-family: Arial;
}

.element_menu a /* liens du menu */
{
   color: #199B19;
   font-size: 11px;
   text-align: right;
   padding-left: 16px;
   font-weight: bold;
   font-family: Arial;
   text-decoration: none;
   background-image: url("images/menu.gif");
   background-repeat: no-repeat;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   color: #030303;
   background-color: #FFFFFF
}
#corps
{
   width: 740px;
   height: 2155px;
   background-image: url("images/fondcentre.gif");
   position:absolute;
   left: 362px;
   top: 153px;
   padding-left: 20px 
}
.text2
{
   text-align: center;
}
.text3
{
   text-align: center;
}
.signature
{
   text-align: right;
   text-decoration: underline;
   font-style: italic;
}
.contact
{
   color: #2F2CE9;
   text-decoration: underline;
}
.contact2
{
   color: #2F2CE9;
   text-decoration: underline;
}
h1
{
   text-align: center; /* centre le titre */
   font-family: Arial, Verdana, serif; /* Police d'écriture */
   color: #229E2E;
}
h3
{
   text-indent: 30px;
   font-family: Arial, Verdana, serif;
   text-decoration: underline; 
}
p
{
   font-family: "Arial Black", Arial, Verdana, serif;
}
#pied_de_page
{
   background-image: url("images/ombregauche.gif");
   background-repeat: repeat-y;
   width: 960px;
   height: 50px; 
   text-align: center;
   font-size: xx-small;
   position:absolute;
   top: 2270px;
}

Kemich · Answer

Je ne peut malheuresement pas débogger ton code.

Ce que je te conseille, c'est vraiment d'aller sur alsacreations, et de suivre les tutos a la lettre.

C'est comme ca que tu apprendras.

[H-B-H] · Answer

Ok merci je vai faire ce que tu me conseille =)

armeloo1 · Answer

slt ok voila je te conseil de presenter tn fichier css en deux pages 
un pour la mise en forme et l autre pour la couleur.
 courage.......

Souci en Css ( résolution)

5 réponses

Discussions similaires