Запретить перемещение div при изменении размера страницы

Я новичок в CSS, и я пытаюсь запустить страницу. Мне удалось для успешного создания того, что я считал хорошей страницей, пока я не изменил размер браузера, тогда все начало перемещаться. Я не имею понятия почему это происходит!!

Может кто-нибудь предложить мне некоторые советы, пожалуйста. Когда я изменю размер окна, я бы как "объекты", чтобы оставаться там, где они есть, но окно для изменения размера. для Например, если я перетащил нижний угол окна вверх и влево, я бы ожидайте увидеть, что было внизу справа, и прокрутить полосы до но объект в верхнем левом углу будет находиться точно там, где они есть.

Я делаю это?

Посмотрите на рабочее состояние моей страницы: http://aimmds1.estheticdentalcare.co.in/

затем попробуйте изменить размер окна браузера, перетащив правый размер влево. и посмотрите содержимое в заголовке, а также в строке меню.. они прыгают вниз, содержимое заголовка также спрыгивает, тогда я делаю переполнение: hidden;.. но, как я понимаю, все это не так.

Здесь можно найти html и CSS: http://jsfiddle.net/swati/hCDas/

Я уже пробовал предотвратить перемещение div при изменении размера окна, я попытался установить min-width: 820px; для заголовка div, что основной содержащий div.. но это не решает его.

Спасибо в ожидании вашей помощи.

Ответ 1

1 - удалите маржу из вашего CSS-кода.

2 - оберните весь ваш html в обертку <div id="wrapper"> ... all your body content </div>

3 - Определите CSS для оболочки:

Это будет держать все вместе, в центре на странице.

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Ответ 2

Существуют два типа измерений, которые можно использовать для указания ширины, высоты, полей и т.д.: относительные и фиксированные.

Избыточное

Пример относительного измерения - это проценты, которые вы использовали. Проценты относятся к их содержащему элементу. Если элемент отсутствует, они относятся к окну.

<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 width will be 50% of it parent (150px).
        </p>
    </div>
</div>

Другим относительным измерением является ems, которые относятся к размеру шрифта.

Fixed

Примером фиксированного измерения являются пиксели, но фиксированное измерение также может быть pt (точки), см (сантиметры) и т.д. Исправленные (иногда называемые абсолютными) измерения всегда того же размера. Пиксель всегда является пикселем, сантиметр всегда равен сантиметру.

Если вы использовали фиксированные измерения для ваших размеров, размер браузера не повлияет на макет.

Ответ 3

Я бы предпочел использовать статическую ширину, и если вы хотите, чтобы ваша страница изменялась в зависимости от размера экрана, вы можете посмотреть медиа-запросы.

Или вы можете установить минимальную ширину на элементы, такие как заголовок, навигация, контент и т.д.

Ответ 4

hi во-первых, кажется, что в вашем html файле много "ошибок", где вам не хватает закрывающих тегов, вы можете попробовать обернуть содержимое вашего <body> фиксированной шириной <div style="margin: 0 auto; width: 900px>, чтобы добиться того, что вы сделали с помощью body {margin: 0 10% 0 10%}