Мониторинг изменений изменений Внешний вид сайта

Question

У меня есть сайт, который отлично выглядит в моем разрешении и даже в более распространенных 1024 x 768. Тем не менее, в чужом браузере в 1024 x 768 он слишком широк, и на сайте нет даже центра.

Есть ли способ иметь правильную макет ширины, которая не изменяется при изменении разрешения?

/* Body */ 
body { 
    background: #535353; 
    font-family: Arial; 
    font-size: 12px; 
    color: Black; 
} 

form { 
margin:0; 
padding:0; 
display: inline 
} 

* { 
    margin: 0; 
    padding: 0; 
} 

/* Header */ 
#header { 
    margin-left: 100px; 
    margin-right: 100px; 
    overflow: hidden; 
} 

/* Logo */ 
#logo 
{ 
    background-color: White; 
} 

/* Menu */ 
#menu { 

    margin-left: 100px; 
    margin-right: 100px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding: 0 0 0 0; 
    text-align: left; 
    background-color: #AB0000; 
    font-size: 14px; 
    color: White; 
    font-weight: bold; 
} 

#menu a { 
    font-size: 14px; 
    color: White; 
    font-weight: bold; 
} 

#menu a:hover { 
    color: Yellow; 
} 

/* Spacer */ 
#spacer { 
    background-color: #8C8C8C; 
} 

/* Sidebar */ 
#sidebar {  
    margin-left: 100px; 
    margin-right: 100px; 
    padding-left: 10px; 
    font-weight: bold; 
    text-align: left; 
    background: url(Images/leftborder.jpg) repeat-x left top; 
    background-color: #C2C2C2; 
} 

#sidebar p { 
    color: Black; 
    font-weight: normal; 
    font-size: 11px; 
} 

#sidebar a{ 
    color: Black; 
    font-weight: normal; 
    font-size: 11px; 
} 

/* Quick Links */ 
#quicklinks a{ 
    color: White; 
    font-size: 12px; 
    font-weight: bold; 
    text-decoration:none 
} 

/* Content */ 
#content { 
    margin-left: 200px; 
    margin-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #C2C2C2; 
} 

#content p { 
    font-size: 12px; 
} 

#content a{ 
    color: Black; 
    font-weight: bold; 
} 

/* Gallery */ 
#gallerylinks{ 
    border-color:Black; 
} 

/* Footer Space */ 
#footerspace { 
    background-color: #AB0000; 
} 

/* Footer */ 
#footer { 
    width: 891px; 
    height: 70px; 
    margin-left: 100px; 
    margin-right: 100px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding: 0 0 0 0; 
    text-align: center; 
    background-color: #C2C2C2; 
    font-weight: bold; 
    color: Black; 
} 

#footer a { 
    font-weight: bold; 
    color: Black; 
} 

#footer a:hover { 
    color: Yellow; 
} 

Answer 1

Если вы не хотите, чтобы изменить ширину с размером разрешения/браузера, а затем использовать абсолютные ширины в вашем CSS в отличие от процентного (860px по сравнению с 90%).

Однако, если он выглядит по-другому в браузере elses, это может быть из-за различий в их шрифте и размере шрифта.

Answer 2

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

Answer 3

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

1. Использование другого браузера и/или операционной системы
2. Окно браузера изменяет размер на одном из компьютеров
3. Разные размер текста, который разбивает макет (изменение размера текста в IE делает это)
4. Ваша разметка и CSS-код полны ошибок.

Уход за публикацией некоторого кода?

Answer 4

У вас есть два варианта:

1. Adjust макет так, что он делает правильно в процентных единицах; размер ширина окна браузера, чтобы проверить
2. Установите ширину контейнера, используя единицы длины (например, пиксели) вместо процентных единиц

Убедитесь, чтобы проверить в нескольких браузерах, как есть, как правило, тонкие изменения в пути они интерпретируют правила CSS. Также подумайте об использовании библиотеки сброса CSS, чтобы сделать это проще.

Answer 5

Приложения на базе браузера - это гости на рабочем столе! Вы никогда не можете принимать такие вещи, как разрешение экрана. Вы должны протестировать свое приложение так же, как можете. Кроме того, используйте инструменты, такие как Google BrowserSize http://browsersize.googlelabs.com/ или WebDeveloper FF https://addons.mozilla.org/en-US/firefox/addon/60/, чтобы увидеть, как выглядит ваше приложение для браузера в размерах разностного экрана.

Answer 6

Кроме того, если у человека есть широкоэкранный монитор, работающий на 1024x786, это создавало бы странные вещи.

Answer 7

Это касается правильного центрирования.

Без HTML немного сложно понять, что происходит, но я действительно не вижу CSS, который бы центрировал вещи.

Уловка центрирования в CSS заключается в том, что вы хотите равное количество места влево и вправо от элемента, но поскольку вы не знаете, насколько велика будет окно пользователя, вы не знаете, насколько велика это пространство будет.Решения должны использовать margin: 0 auto;

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

Вот развертывание на примере страницы:

CSS-:

#page { 
    /* 
     width must be specified or the div will take up all the horizontal 
     space it can (can be ems, %, whatever) 
    */ 
    width:860px; 
    /* 
     Top and bottom margins are zero. 
     Left and right are automatically the same. 
    */ 
    margin:0 auto; 
} 

HTML-

<div id="page"> 
    <h1>Something interesting</h1> 
    <p>Something enthralling</p> 
</div> 

Answer 8

Я в конечном итоге рестайлинга веб-страницы в 1024х768. Затем все было разработано для всех других резолюций.