CSS pour toutes les résolutions
Résolu
Utilisateur anonyme
-
GossBow Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
GossBow Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- CSS pour toutes les résolutions
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
5 réponses
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/
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/
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.
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;
}
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!
DéCRIVEZ votre problème en DéTAIL, merci ! @Sauvez la terre! C'est la seule planète ou on trouve du chocolat!
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 ... :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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/
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/
Et sinon dans le code en lui même je doit changer quoi ? Merci.
Pour ton code, impossible de répondre sans connaitre ni le code ni les soucis d'affichage que tu as.
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)