web-dev-qa-db-fra.com

Empêcher div de bouger pendant le redimensionnement de la page

Je suis assez nouveau sur CSS et j'essaie de mettre une page en service. J'ai réussi à produire ce que je pensais être une belle page jusqu'à ce que je redimensionne la fenêtre du navigateur, puis tout commence à bouger. Je n'ai aucune idée pourquoi cela se produit !!

Quelqu'un pourrait-il me donner quelques conseils s'il vous plaît. Lorsque je redimensionne la fenêtre, j'aimerais que les "objets" restent là où ils sont, mais la fenêtre se redimensionne. par exemple, si je fais glisser le coin inférieur d'une fenêtre vers le haut et vers la gauche, je m'attends à voir ce qui se trouve en bas à droite disparaître et des barres de défilement apparaissent, mais l'objet dans le coin supérieur gauche reste exactement là où il se trouve .

Suis-je en train de faire le sens?

Jetez un œil à l'état de fonctionnement de ma page: http://aimmds1.estheticdentalcare.co.in/

puis essayez de redimensionner la fenêtre du navigateur en faisant glisser la bonne taille vers la gauche. et regardez le contenu dans l'en-tête, ainsi que la barre de menus .. ils sautent vers le bas, le contenu de l'en-tête sautait également vers le bas puis je fais un débordement: caché; .. mais si je comprends bien, ce n'est pas la bonne façon.

Veuillez trouver le HTML et le CSS ici: http://jsfiddle.net/swati/hCDas/

J'ai déjà essayé empêcher div de se déplacer sur le redimensionnement de la fenêtre , j'ai essayé de définir min-width: 820px; pour div en-tête, que le div principal contenant .. mais cela ne le résout pas.

Merci en prévision de votre aide.

htmlcsslayoutresize
21
swati saoji

1 - supprimez la marge de votre BODY CSS.

2 - envelopper tout votre html dans un wrapper <div id="wrapper"> ... all your body content </div>

3 - Définissez le CSS du wrapper:

Cela maintiendra tout ensemble, centré sur la page.

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}
31
Diodeus - James MacFarlane

Il existe deux types de mesures que vous pouvez utiliser pour spécifier les largeurs, hauteurs, marges, etc.: relatives et fixes.

Relatif

Un exemple de mesure relative est les pourcentages que vous avez utilisés. Les pourcentages sont pertinents pour leur élément conteneur. S'il n'y a pas d'élément conteneur, 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 concerne les em qui sont relatifs à la taille de la police.

Fixé

Un exemple de mesure fixe est les 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 deviez utiliser des mesures fixes pour vos tailles, la taille du navigateur n'affecterait pas la mise en page.

5
punkrockbuddyholly

Je préfère utiliser des largeurs statiques et si vous souhaitez que votre page soit redimensionnée en fonction de la taille de l'écran, vous pouvez consulter requêtes multimédias .

Ou, vous pouvez définir une largeur minimale sur des éléments tels que l'en-tête, la navigation, le contenu, etc.

3
Adaz

salut tout d'abord il semble y avoir de nombreuses "erreurs" dans votre html où il vous manque des balises de fermeture, vous pouvez essayer d'habiller 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%}

1
T I