Разрешение монитора меняет внешний вид сайта

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%).

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

Answer 2

Это правильное центрирование.

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

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

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

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

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 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

разместить код?

Answer 7

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

Answer 8

Я закончил рестайлинг веб-страницы в 1024X768. Тогда все получилось для всех остальных разрешений.