CSS pour toutes les résolutions

Résolu
Utilisateur anonyme -  
Bonjour,

Mon petit soucis, c'est que j'ai un code CSS qui donne quelque chose de bien avec mon ordinateur mais quand j'y vais avec l'ordinateur du lycée, tout est décalé les uns sur les autres etc...

J'ai fais quelques recherches et je suis parvenu à trouver qu'il fallait utiliser des %.
Y a t-il autre chose à faire ?
Comment fait-on pour mettre les pourcentages quand on ne voit pas les résolutions des autres ordinateurs ?

Merci.

5 réponses

  1.  Pierrecastor Modérateur
    Salut

    Deux choses :

    Les navigateurs ne sont peut être pas les mêmes, il faut tester ta page sur les principaux (IE8 - IE9 - Firefox - safari - Opera)

    Et la résolution. Tu peut faire des essaies en changeant la taille de ton navigateur manuellement.

    Tu as des stat sur les résolutions les plus utilisé ici :

    https://fr.screenresolution.org/
    1. Utilisateur anonyme
      D'accord, merci beaucoup. Pour changer manuellement, je dois les télécharger ?

      Et sinon dans le code en lui même je doit changer quoi ? Merci.
    2. Pierrecastor Modérateur
      Pour changer la taille ? Non, juste ne pas te mettre en pleine écran et réduire ton navigateur avec le bord de la fenêtre.

      Pour ton code, impossible de répondre sans connaitre ni le code ni les soucis d'affichage que tu as.
    3. Utilisateur anonyme

      Je te donne le code CSS à la fin. En faite comme tu vois sur le screen, j'ai sa moi. Mais sur un autre ordinateur, le carré de gauche (en gris foncé) se trouve SOUS le corps de la page (rectangle blanc du milieu) du coup je ne vois pas ce qu'il y a d'écrit dessus. Merci
      Voici un screen de ce que je vois :
      http://hpics.li/a56ef63

      Voici mon code CSS :
      (PS : pour ceux qui voyent ce code, je l'ai fait moi-même, copyrights associés donc pas le droit de copier coller)
       

       

   /* Ci dessous le menu horizontal en haut */ 



   .menu { 

    list-style: none; 

    border: #000000 solid 2px; 

    background-color: #333333; 

    width: 90%; 

    height: 45px; 

    margin: 0 auto; 

    border-radius: 10px; 

   } 



   .menu li { 

    float: left; 

   } 



   .menu li a { 

    display: block; 

    color: #fff; 

    font-size: 13px; 

    font-weight: bold; 

    text-decoration: none; 

    font-family: arial, verdana, sans-serif; 

    text-align: center; 

    margin-top: 0px; 

    padding: 10px 5px 9px 15px; 

    border-right: 0px solid #000000; 

    border-left: 0px solid #000000; 

    cursor: pointer; 

   } 



   .menu li a:hover { 

    color: #FF0000; 

    text-decoration: none; 

   } 



   .menu li.current a { 

    background-color: #333333; 

   } 



   #conteneur { 

    width: 960px; /* la largeur que tu veux */ 

    margin: auto; /* pour centrer ton conteneur */ 

   } 



   /* Le fond ci-dessous */ 



   html { 

    color: #666768; 

    font-family: Helvetica, lucida, verdana, arial, sans-serif; 

    font-size: 100%; 

   } 

   body { 

    margin: auto; 

    background: #B0B0B0 url(../bg_page.gif) repeat-x scroll left top; 

    font-size: 0.8em; 

   } 



   /* Tout le texte ci-dessous */ 



   p { 

    background-color: #fff; 

    text-align: justify; 

    padding: 12px; 

    margin: 0 auto; 

    margin-top: 50px; 

    color: #000000; 

    font-size: 17px; 

   } 



   #titre { 

    padding: 12px; 

    margin-top: 10px; 

    color: #FF0000; 

    text-align: center; 

   } 



                                                       .important { 

    color: #FF0000; 

    text-align: justify; 

    font-size: 15px; 
                                                      } 

                                                       .ecriturecadre { 

    color: #fff; 

    text-align: justify; 

    font-size: 15px; 
                                                      } 


                                                       .lien { 

    color: #FF0000; 

    text-align: justify; 

    font-size: 15px; 

                                                                         font-weight : bold; 

    font-family: arial, verdana, sans-serif; 
                                                      } 


                                                       .lien a:hover { 

    color: #fff; 

    text-align: justify; 

    font-size: 15px; 
                                                      } 


                                                       .lien :active 

    color: #000000; 

    text-align: justify; 

    font-size: 15px; 



   /* Images ci-dessous */ 



   .maintenance { 

    width: 700px; 

    height: 500px; 

    padding-right: 600px; 

   } 



   .logo { 

    width: 180px; 

    height: 100px; 

    padding-right: 1000px; 

   } 


                                                        .chargement { 

    width: 450px; 

    height: 70px; 

    padding-right: 800px; 

   } 



   /* Menus ci-dessous */ 



   .cadregauche { 

    background-color: #848484; 

    width: 250px; 

    height: 200px; 

    border: 2px solid black; 

    text-align: justify; 

    padding: 10px; 

    font-size: 15px; 

    text-align: center; 

    border-radius: 10px; 

    position: relative; 

    float: left; 

    margin-left: 201px; 

   } 



   #cadrecentre { 

    background-color: #fff; 

    width: 800px; 

    height: 800px; 

    border: 4px solid black; 

    text-align: justify; 

    padding: 12px; 

    margin-top: 50px; 

    margin: auto; 

    font-size: 25px; 

    text-align: center; 

    border-radius: 10px; 

    position: relative; 

   } 



   .cadredroite { 

    background-color: #848484; 

    width: 200px; 

    height: 600px; 

    border: 2px solid black; 

    text-align: justify; 

    padding: 10px; 

    font-size: 15px; 

    text-align: center; 

    border-radius: 10px; 

    position: relative; 

    float: right; 

    margin-right: 13%; 

   } 



   .footer { 

    background-color: #333333; 

    width: 1830px; 

    height: 190px; 

    border: 2px solid black; 

    text-align: justify; 

    padding: 10px; 

    font-size: 15px; 

    text-align: center; 

    border-radius: 10px; 

    position: relative; 

    float: left; 

    margin-top: 100px; 

    color: #FF0000; 

   } 

   #content { 

    height: auto; 

    width: 1862px; 

    position: relative; 

    margin: auto; 

   } 

                                                       .banniere { 

    background-color: #E6E6E6; 

    width: 40%; 

    height: 30px; 

    border: 1px solid black; 

    text-align: center; 

    border-radius: 10px; 

    margin: 0 auto; 

    margin-top: 15px; 

    margin-bottom: 15px; 

    color: #000000; 

    font-size: 13px; 

    font-weight: bold; 

    text-decoration: none; 

    font-family: arial, verdana, sans-serif; 

                                                                         padding-top: 15px;
    4. madmyke Modérateur
      Je dis peut être une connerie mais selon moi pour éviter que ça bouge sous une autre résolution/taille il faut fixer une taille minimum à la largeur de la page pour qu'en réduction ça ne ce déplace pas (et penser aux ascenseur ). Mais je ne suis pas un spécialiste. Je vais suivre ce post -)
    5. Utilisateur anonyme
      Merci. Mais je ne comprend pas comment faire ce que tu dis :/
  2. Utilisateur anonyme
    Est-ce que si je met des pourcentages partout comme ceci cela fonctionne ? (désolé du double poste je ne pouvais pas modifier :s)
    Merci. 

    


			.menu {

				list-style: none;

				border: #000000 solid 2px;

				background-color: #333333;

				width: 90%;

				height: 5%;

				margin: 0 auto;

				border-radius: 10px;

			}



			.menu li {

				float: left;

			}



			.menu li a {

				display: block;

				color: #fff;

				font-size: 13px;

				font-weight: bold;

				text-decoration: none;

				font-family: arial, verdana, sans-serif;

				text-align: center;

				margin-top: 0px;

				padding: 10px 5px 9px 15px;

				border-right: 0px solid #000000;

				border-left: 0px solid #000000;

				cursor: pointer;

			}



			.menu li a:hover {

				color: #FF0000;

				text-decoration: none;

			}



			.menu li.current a {

				background-color: #333333;

			}



			#conteneur {

				width: 50%; /* la largeur que tu veux */

				margin: auto; /* pour centrer ton conteneur */

			}



			/* Le fond ci-dessous */



			html {

				color: #666768;

				font-family: Helvetica, lucida, verdana, arial, sans-serif;

				font-size: 100%;

			}

			body {

				margin: auto;

				background: #B0B0B0 url(../bg_page.gif) repeat-x scroll left top;

				font-size: 0.8em;

			}



			/* Tout le texte ci-dessous */



			p {

				background-color: #fff;

				text-align: justify;

				padding: 12px;

				margin: 0 auto;

				margin-top: 50px;

				color: #000000;

				font-size: 17px;

			}



			#titre {

				padding: 12px;

				margin-top: 10px;

				color: #FF0000;

				text-align: center;

			}



                                                       .important {

				color: #FF0000;

				text-align: justify;

				font-size: 15px;
                                                      }

                                                       .ecriturecadre {

				color: #fff;

				text-align: justify;

				font-size: 15px;
                                                      }


                                                       .lien {

				color: #FF0000;

				text-align: justify;

				font-size: 15px;

                                                                         font-weight : bold;

				font-family: arial, verdana, sans-serif;
                                                      }


                                                       .lien a:hover {

				color: #fff;

				text-align: justify;

				font-size: 15px;
                                                      }


                                                       .lien :active

				color: #000000;

				text-align: justify;

				font-size: 15px;



			/* Images ci-dessous */



			.maintenance {

				width: 700px;

				height: 500px;

				padding-right: 600px;

			}



			.logo {

				width: 180px;

				height: 100px;

				padding-right: 1000px;

			}


                                                        .chargement {

				width: 450px;

				height: 70px;

				padding-right: 800px;

			}



			/* Menus ci-dessous */



			.cadregauche {

				background-color: #848484;

				width: 14%;

				height: 25%;

				border: 2px solid black;

				text-align: justify;

				padding: 10px;

				border-radius: 10px;

				position: relative;

				float: left;

				margin-left: 201px;

			}



			#cadrecentre {

				background-color: #fff;

				width: 43%;

				height: 80%;

				border: 4px solid black;

				text-align: justify;

				padding: 12px;

				margin-top: 1%;

				margin: auto;

				font-size: 25px;

				border-radius: 10px;

				position: relative;

			}



			.cadredroite {

				background-color: #848484;

				width: 12%;

				height: 50%;

				border: 2px solid black;

				text-align: justify;

				padding: 10px;

				font-size: 15px;

				border-radius: 10px;

				position: relative;

				float: right;

				margin-right: 13%;

			}



			.footer {

				background-color: #333333;

				width: 98%;

				height: 22%;

				border: 2px solid black;

				text-align: justify;

				padding: 10px;

				font-size: 15px;

				text-align: center;

				border-radius: 10px;

				position: relative;

				float: left;

				margin-top: 100px;

				color: #FF0000;

			}

			#content {

				height: auto;

				width: 1862px;

				position: relative;

				margin: auto;

			}

                                                       .banniere {

				background-color: #E6E6E6;

				width: 40%;

				height: 3%;

				border: 1px solid black;

				text-align: center;

				border-radius: 10px;

				color: #000000;

				margin: 0 auto;

				margin-top: 15px;

				margin-bottom: 15px;

				font-size: 13px;

				font-weight: bold;

				font-family: arial, verdana, sans-serif;

                                                                         padding-top: 15px;

			}
    2.  bg62 Modérateur
      fais une petite recherche sur la css + des termes comme 'fluide', 'responsive web design' cela te donnera des idées, des indications et ... des exemples avec du code propre ... :)
      1. Utilisateur anonyme
        D'accord je vais essayer :P merci
    4. GossBow
      Ouah moi aussi jai commencer a faire un site et avec ma résolution c'est nikel mais quand je zoom ou que je ratrecis la fenêtre de mon navigateur tout se deplace =( si quelqun as une idée a mon probleme
      2. GossBow
        Merci pour ta réponse c'est la ou jai appris a coder mais en fait j'ai résolue mon problème avec les marge etcs. . . en fait sufi de comprendre que si on agrandit la fenêtre et bah la marge bouge avec enfin c compliquer a expliquer mais j'ai compris et on site avance merci a toi =)

    Discussions similaires

    indice et exposant en css ?
    yiv

    19 réponses
    Mettre du texte à côté d'une image
    yuls13

    3 réponses
    Comment aligner des éléments html css
    eligame

    1 réponse
    Faire passer du texte SOUS une image HTML / CSS
    Mihai

    2 réponses
    Enlever le soulignement sous les liens en HTML/CSS
    baissaoui

    0 réponse