Empêcher div de bouger pendant le redimensionnement de la page
je suis tout à fait nouveau à CSS et j'essaie d'obtenir une page en cours d'exécution. J'ai réussi pour produire avec succès ce que je pensais être une belle page jusqu'à ce que je redimensionne le fenêtre du navigateur alors tout a commencé à bouger. Je n'ai aucune idée de pourquoi ce qui se passe!!
quelqu'un Pourrait-il m'offrir quelques conseils s'il vous plaît. Quand je redimensionne la fenêtre je le ferais comme les "objets" de rester où ils sont, mais la fenêtre de redimensionnement. pour exemple, si je fais glisser le coin inférieur d'une fenêtre vers le haut et à gauche, je attendre pour voir ce qui était en bas à droite disparaître et des barres de défilement apparaît mais l'objet dans le coin supérieur gauche resterait exactement où ils sont.
ai-je fait sence ?
jetez un oeil à la condition de travail de ma page : http://aimmds1.estheticdentalcare.co.in/
puis essayez de redimensionner la fenêtre du navigateur en faisant glisser la taille droite vers la gauche . et regardez le contenu de l'en-tête , et aussi la barre de menu .. ils sautent vers le bas ,, le contenu en tête était aussi en train de sauter vers le bas alors je fais débordement: caché ; .. mais ce que je comprends tout cela n'est pas de la bonne façon.
s'il vous Plaît trouver le code html et CSS ici : http://jsfiddle.net/swati/hCDas/
j'ai déjà essayé prévenir div déplacer sur la fenêtre de redimensionnement, j'ai essayé de définir min-width: 820px; pour l'en-tête div, que la main contenant div.. mais ce n'est pas le résoudre.
Merci d'avance de votre aide.
4 réponses
1 - Retirez la marge de votre corps CSS.
2 - l'emballage de tous vos fichiers html dans un wrapper <div id="wrapper"> ... all your body content </div>
3-Définissez la CSS pour le wrapper:
cela va tenir tout ensemble, centré sur la page.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
il existe deux types de mesures que vous pouvez utiliser pour spécifier les largeurs, les hauteurs, les marges etc: relative et fixe.
Relative
un exemple d'une mesure relative est les pourcentages, que vous avez utilisés. Les pourcentages sont pertinents à leur élément contenant. S'il n'y a pas d'élément contenant, ils sont relatifs à la fenêtre.
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph's width will be 50% of it's parent (150px).
</p>
</div>
</div>
une autre mesure relative est ems qui est relative à la taille de la police.
Fixe
Une exemple d'une mesure fixe est de pixels, mais une mesure fixe peut également être pt (points), cm (centimètres) etc. Les mesures fixes (parfois appelées absolues) sont toujours de la même taille. Un pixel est toujours un pixel, un centimètre est toujours un centimètre.
si vous utilisiez des mesures fixes pour vos tailles, la taille du navigateur n'affecterait pas la mise en page.
je préfère utiliser des largeurs statiques et si vous souhaitez que votre page se redimensionne en fonction de la taille de l'écran, vous pouvez jeter un oeil à requêtes des médias.
ou, vous pouvez définir une largeur minimale sur des éléments comme l'en-tête, la navigation, le contenu, etc.
Salut tout d'abord il semble y avoir beaucoup d '"erreurs" dans votre html où il vous manque des balises de fermeture, vous pourriez essayer d'envelopper le contenu de votre <body> dans une largeur fixe <div style="margin: 0 auto; width: 900px> pour réaliser ce que vous avez fait avec le body {margin: 0 10% 0 10%}