выпуск с полноэкранным веб-макетом с использованием css

У меня есть полноэкранный веб-макет с двумя «плавающими» текстовыми полями, которые расположены примерно посередине экрана. Вот CSS для коробок (они одинаковы для вертикальной ориентации на странице, за исключением):выпуск с полноэкранным веб-макетом с использованием css

#home-box-1 
{ 
background-image:url('../images/px_trans_brown.png'); 
margin-top:16%; 
margin-left:25%; 
width:850px; 
height:176px; 
}

В полноэкранном режиме в 1920 х 1080, он выглядит прекрасно. Ящики установлены так, чтобы они соответствовали минимальному размеру (1024 x 768), с каждой комнатой для хранения. Однако, когда размер экрана изменяется, на левой стороне находится много мертвого пространства, а окно справа от экрана.

Я не эксперт в css, но у меня создалось впечатление, что «margin-left: 25%» сохранит 25-процентный запас от края экрана, независимо от размера окна браузера.

У кого-нибудь есть ключ к тому, как я могу это исправить?

источник

2012-06-14 optionsix

Я неправильно понял? Обе коробки установлены на ширину 850 пикселей или это ширина их контейнера? –

Есть две коробки (только один из перечисленных выше), как @ 850px. Таким образом, ящики представляют собой контейнеры для содержимого, но для ящиков вне тега тела нет контейнера (если это имеет смысл) – optionsix

«margin-left» составляет 25% от ширины родительского элемента, в этом случае ' '. Поэтому, когда 'body' имеет ширину 1024 пикселя, они будут 256 пикселей от левого края, а при 1920 пикселях они будут 480 пикселей от края. Попробуйте установить левое и правое поле на 'auto'. См. Https://developer.mozilla.org/en/CSS/margin –

Это будет держать ячейки в центре и держать вокруг них небольшой запас.

body { 
    margin-left: 75px; 
    margin-right: 75px; 
} 
#home-box-1 { 
    background: #aaa; 
    margin-top:16%; 
    margin-left:auto; 
    margin-right: auto; 
    max-width:850px; 
    height:176px; 
}

источник

2012-06-14 14:34:10

Пробовал это, все еще делая то же самое :(Предположим, вы просматриваете в 1920x1080 (это то, что дизайнеры разработали, к сожалению), в полноэкранном режиме. это из полноэкранного, плавающего окна браузера. Ящики меняют положение, но не так далеко, как мне кажется, они должны иметь 25-процентный запас. Возможно, я использую неправильный метод, используя поля. Я просто хочу, чтобы эти поля оставайтесь в центре экрана, независимо от того, какой размер (до тех пор, пока он не будет меньше 1024x768) – optionsix

Так же, как примечание стороны, @ 1024x768, по-прежнему должно быть хорошее 75-100 пикселей пространства на каждой стороне ящики, как они разработаны.Есть ли способ покончить с полями и центрировать их с помощью другого метода? – optionsix

Хорошо, это очень помогает. Если все, что вам нужно, это ящики, чтобы оставаться центрированными, измените «margin-left» 'to' margin-left: auto; 'и добавить' margin-right: auto; 'и это должно сделать t он трюк. Для дополнительного места по бокам попробуйте добавить «margin-left: 75px; margin-right: 75px' в 'body {' или родительский контейнер ваших полей. –

выпуск с полноэкранным веб-макетом с использованием css

ответ

Смежные вопросы