Désactiver "la déformation de son site web"Résolu/Fermé

Question

Bonjour, je sais que mon titre n'est pas très explicite mais avec les images que je vais vous montrez vous aller mieux comprendre mon problème. Normalement ! :D

Donc, sur ce site par exemple http://hitek.fr/ si vous changez la taille de votre fenêtre de navigateur le site ne ce déforme pas, les éléments restent à leurs places.

Tandis que sur mon site voici l'aperçu avec la fenêtre en pleine page : http://www.noelshack.com/2015-03-1421253651-test1.jpg
Et quand je réduis la fenêtre les éléments commencent à bouger : http://www.noelshack.com/2015-03-1421253729-test2.jpg

Savez-vous le moyen de fixer tout ça ? J'espere que vous avez compris le problème, n'hésitez pas à me demander des renseignements je suis là :)

jordane45 · Answer

Bonjour,

Cela vient du CSS que vous avez mis en place ....
Avez-vous codé vous même le contenu du CSS ou êtes vous passé par un "framework" genre BootStrap ?

Quoi qu'il en soit... sans montrer le code source de la page... il sera difficile de vous dire quoi changer.

enfin si peut être... si vous l'avez codé vous même... il faudrait déjà nous dire si vous avez défini les taille/position de vos éléments html en pourcentage ou en taille fixe....

animostab · Answer

Salut ca ne se "désactive" pas en appuyant sur un bouton pour cela tu dois connaitre un peu le CSS et utiliser les width (largeur) avec des pixel (px) au lieu de pourcentages ou em ou de pas de valeur du tout (équivalent à 100%). exemple css #contener { width:1000px; margin: 20px auto; } html

tout le contenu de ton site

donnera un div contener de 1000 px de large et centré avec une marge de 20 px en haut et en bas. Attention ! ce n'est pas recommandé de faire un site "fixe" car sur tablette ou smartphone le site ne sera pas adapté ! tu dois donc te renseigner sur le responsive design et ne pas te baser sur ce que tu vois sur "ton écran" mais faire un site agréable pour toutes les résolutions depuis les smartphones, jusqu'aux écrans larges de bureau. Ca s'appelle responsive design, c'est du css et ca s'apprend. Un petit merci vaut mieux qu'une grande ignorance ! Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Gaalee · Answer

Bonjour,

Non je ne suis pas passé par un framework.

Voici mon code CSS body{
background-image:url(img/fondbody.jpg);
background-repeat: repeat;
margin:0;
padding:0;
}

.menu{
background-color:#181E2C;
border-top: 2px solid black;
border-bottom: 1px solid black;
box-shadow: 0px 10px 30px rgba(0,0,0,0.4);
position:relative;
z-index: 2;
}

a#menu{
font-size:22px;
color: #FFFFFF;
text-decoration: none;
font-family: 'Oswald', sans-serif;
}

a#menu:hover{
border-top: 2px solid #FE8C1D;
padding-top: 16px;
color: #FE8C1D;
}

ul#menu{
list-style: none;
margin-left:25%;
}

li#menu{
display: inline-block;
margin-left: 20px;
margin-right: 20px;
padding-right: 30px;
background:url(img/borduremenu.png) no-repeat right center;
}

.imglogo{
position:left;
margin-left: 20%;
}

.description{
margin-bottom:25px;
padding-left:50px;
}

.boutoniut{
margin-bottom:25px;
margin-left:120px;
}

.boutoniut:hover {
opacity: 0.8;
}

.corps{
background-color: #FFFFFF;
display: block;
margin-left:8%;
margin-right:8%;
padding-left:20px;
padding-right:20px;
padding-bottom:2px;
padding-top:2px;
position:center;
z-index:1;
position:absolute;
border-bottom: 2px solid #FE8C1D;
}

Gaalee · Answer

Oui tu as raison il y a des choses que je dois enlever... 

Mais vous ne résolvez pas mon problème je crois, car quelque soit la marge ou le padding que je donne aux différents blocks de mon site il ce déforme toujours autant.

animostab · Answer

je t'ai donné la solution ! css #contener { width:1000px; margin: 20px auto; } html

tout le contenu html de ton site (les block)

et pas de width aux blocks qui sont inclus dans le contener cependant cette solution est bancale car ce n'est pas responsive et ne respecte pas les visiteurs visitant ton site avec des tablettes smartphone etc ... pour cela renseigne toi sur les media queries et le la balise meta viewport avec initial-scale=1 Un petit merci vaut mieux qu'une grande ignorance ! Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Gaalee · Answer

Merci ! Résolu

Désactiver "la déformation de son site web"

6 réponses

Discussions similaires

Newsletters