Sujet Précédent Sujet Suivant

CSS pour toutes les résolutions

Résolu/Fermé
Utilisateur anonyme - 30 janv. 2013 à 13:26
GossBow Messages postés 50 Date d'inscription jeudi 18 octobre 2012 Statut Membre Dernière intervention 27 février 2014 - 15 févr. 2013 à 23:13
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.
A voir également:

5 réponses

Réponse 1 / 5
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 141
30 janv. 2013 à 13:33
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/
0
Utilisateur anonyme
30 janv. 2013 à 13:44
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.
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 141
30 janv. 2013 à 13:48
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.
0
Utilisateur anonyme
Modifié le 6 févr. 2024 à 14:20

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;
0
madmyke Messages postés 53080 Date d'inscription dimanche 20 janvier 2008 Statut Modérateur Dernière intervention 24 juillet 2024 12 166
30 janv. 2013 à 15:56
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 -)
0
Utilisateur anonyme
30 janv. 2013 à 18:01
Merci. Mais je ne comprend pas comment faire ce que tu dis :/
0
Réponse 2 / 5
Utilisateur anonyme
30 janv. 2013 à 15:58
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;

			}
0
Réponse 3 / 5
madmyke Messages postés 53080 Date d'inscription dimanche 20 janvier 2008 Statut Modérateur Dernière intervention 24 juillet 2024 12 166
Modifié par madmyke le 30/01/2013 à 16:22
https://www.cssdebutant.com/coder-en-css-largeur-et-hauteur.html voir min-width au millieux

DéCRIVEZ votre problème en DéTAIL, merci ! @Sauvez la terre! C'est la seule planète ou on trouve du chocolat!
0
Utilisateur anonyme
30 janv. 2013 à 18:04
Merci du lien. J'ai été voir mais je ne trouve pas ce qui peut m'aider pour la résolution :x
0
Réponse 4 / 5
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
30 janv. 2013 à 17:42
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 ... :)
0
Utilisateur anonyme
30 janv. 2013 à 18:05
D'accord je vais essayer :P merci
0
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
30 janv. 2013 à 18:18
autres pistes :
https://longuetraine.fr/index.php?article909/responsive-web-design-rwd
https://longuetraine.fr/index.php?article910/les-meilleurs-themes-de-sites-web
;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
GossBow Messages postés 50 Date d'inscription jeudi 18 octobre 2012 Statut Membre Dernière intervention 27 février 2014 5
30 janv. 2013 à 21:02
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
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 141
30 janv. 2013 à 21:08
Oui, apprendre correctement le HTML + CSS.

https://openclassrooms.com/fr/courses

https://www.alsacreations.com/tuto/lire/555-design-css-complet-5-etapes.html

https://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html

Et plus généralement, tout le site https://www.alsacreations.com/
0
GossBow Messages postés 50 Date d'inscription jeudi 18 octobre 2012 Statut Membre Dernière intervention 27 février 2014 5
15 févr. 2013 à 23:13
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 =)
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

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

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses