28172 sujets

CSS et mise en forme, CSS3

Probleme header

Bonjour
Je suis nouveau sur ce forum. J'ai lu quelques posts pour trouver une solution mais je n'y arrive pas. Je fais actuellement mon site internet, je ne suis pas un as, j'apprends peu à peu.
Voici mon problème, dans mon header, je remarque que rien n'est fixé, tout bouge si on s'amuse à zoomer et dézoomer sur son navigateur.
Du coup, l'image(le logo) s'agrandit , le texte bouge et les icones (facebook,twitter, etc...) ne restent pas fixe.
social ul li {
    display: inline-block;
    padding: 5px 10px;
}
.social ul {
    margin-top: -10%;
    float: right;
}
.social a {
  font-size: 18px;
  padding-left:5px;  


body{
    margin: 0;
	margin-top: 50px;
    padding: 0;
      font-family: 'Courier new', sans-serif;
    background-color: #283E4A;
	font-size: 13px
}
.container {
    width: 85%;
}
a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus, 
a:hover {
  text-decoration: none;
  outline: none
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Times new roman', 'sans-serif';
  font-weight: 300;
  text-transform: uppercase;
  margin-left: auto;
  margin-right: auto;
  width:100%;
}
ul li {
    list-style: none;
}
h2 {
  font-size: 36px
}
.header-top{
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    background-color: #ffffff;
    opacity: 1;
    height: 80px;
}
.header-top img {
padding: 10px;
    margin-left: 5px;
Width : 58px;
Height : 75px;
}
.header-top p{
    margin-left: 10%;
    margin-top: -5%;
    text-transform: capitalize;
    font-size: 2em;
    color: #373737;


Merci d'avance,
Cordialement,
Modifié par wscript (10 Oct 2017 - 02:07)
Bonjour, il y a une unités de longueur et de largeur que j'utilise pas mal contre ce genre de problême , le VH ( Viewport Height ) et le VW ( Viewport Width )
En faites ta page fais 100vh et 100vw donc as toi de mettre ce que tu veut comme taille

ça se code simplement avec du margin ou margin-left (-right / -top / -bottom)

Source : https://www.grafikart.fr/forum/topics/12751
Bonjour et merci de ta réponse et du temps que tu as consacré.
Je pense avoir mal exprimé mon problème.
Je vais donner un exemple d'un site : prenons de ce site http://www.chinesemovies.com.fr/index.htm

Si je décide avec mon navigateur chrome de zoomer la page en 150 %, le menu ne bougera pas. Dans mon cas par exemple, j'ai exactement le même menu mais si je zoome, l'ensemble des liens de mon menu se partagera en 2 lignes.

Ensuite prenons l'exemple de ce site : http://www.joueurdugrenier.fr/
Ses icones facebook, etc... restent bien calé dans son header top, tandis que chez moi encore une fois, si je zoom ou dézoome, les icones ne resteront pas fixes.

Avez-vous une solution?

Merci d'avance,
Cordialement,
Malheureusement, je ne l'ai pas encore publié, puisque je cherche à corriger les erreurs avant. Je peux sinon envoyer une image pour que vous ayez un visuel?
Ce sont peut être mes vieux yeux, mais je ne vois aucun problème dans cette image. Qu’est-ce qui te dérange?
Enfaite, l'image du haut est correct; le menu gris est bien placé et bien découpé; les logos sont également la ou ils doivent être.
L'image en dessous, c'est un agrandissement à 150 % avec le navigateur. Ici le menu se découpe en 2 lignes, ce que je ne veux pas.
Ensuite les logos sont descendus (d'ailleurs si j'accentue l'agrandissement, les logos sortent carrément du header).
C'était peut être mes vieux yeus en effet, d'autant que j'ai regardé l'image sur l'écran de mon iPhone. Désolé!

C'est manifestement un problème de CSS.
Un zoom ou une adaptation à des écrans de différentes tailles, c'est la même chose.
Si tu fais un zoom de 150%, c'est comme si tu réduisais la largeur de l'écran de 1/3, puisque chaque pixel de l'image prend 1.5 fois plus de place que sur l'écran originel.

Il faut concevoir ton <header> en tenant compte de la largeur de l'écran, et donc tout exprimer en % ou en em, avec des @media queries pour assurer que la taille des caractères est adaptée à celle de l'écran, etc. Il faut donc prévoir en particulier de styler les différents éléments, par exemple la taille des images doit être fonction de la largeur de leur conteneur pour qu'elles ne débordent pas du conteneur lorsque la largeur de l'écran décroit.
Ce n'est pas très difficile à faire, mais il faut que tu fasses un design et savoir ce que tu veux dans différentes circonstances.
Bon courage!
Merci pour ton explication papyjp. Malheureusement je ne maîtrise pas correctement les media queries et c'est de la que vient la faille sans doute. Concrètement, peux tu me dire ce que je devrais changer dans mon header que j'ai posté plus haut?
Cordialement,
Ce n’est pas seulement le header qu’il faut changer, c’est toute la page qui doit être repensée pour être « responsive » , terme qui veut dire que ça s’adapte à la taille du support (je dirais plutôt « auto adaptatif » en français, mais il n’y a pas de terme consacré dans notre langue).
Je pense qu’en cherchant bien tu dois pouvoir trouver quelques article bien faits à ce sujet dans ce site, c’est ici que j’ai acquis tout ce que je sais, et qui m’a permis de réussir le challenge de transformer un site des années 2000 en quelque chose qui marche pas trop mal sur toutes sortes de supports.
Sujet clos
Aller à