Как сделать такой каркас для сайта?

Question

[BlackWolf]

Как сделать так, чтобы блоки не изменялись и не падали вниз при изменении ширины браузера? Вот, например, сделал каркас из header, leftsidebar, content, footer, а он при изменении ширины браузера падает вниз.. Если есть возможность, приведите, пожалуйста, пример каркаса для сайта, чтобы он был стабильным и не изменялся при изменении ширины браузера. Заранее спасибо

Comments

[Александр Лысенко]

Если есть возможность, приведите, пожалуйста, примеры того что вы имеете и того, что вы хотите получить. Но на вскидку вам нужна НЕ адаптивная верстка с соответствующими значениями width и min-width

[BlackWolf]

AlexanderZe: Что я имею ввиду? Ну вот я посетил много сайтов, и на большинстве из них, когда меняешь ширину браузера, сайт сильно меняется, т.е большая часть блоков, текста, картинок "падает" вниз. А теперь возьмем в пример ВКонтакте, там когда меняешь ширину браузера все остается на месте и ничего не меняется, не сжимается. Вот я и прошу нормальный, стабильный пример каркаса. Просто хочется понять, почему так происходит, и как добиться нормального стабильного каркаса.

[Александр Лысенко]

blacknightwolf: Собственно как я и сказал. Большинство сайтов что вам не нравятся адаптивны, т.е. их структура и стили выстроены таким образом, чтобы все элементы удачно "падали" друг под друга, а что-то даже исчезало. Вам нужен обратный эффект, т.е. НЕ адаптивный сайт.

Не используйте meta name="viewport"
Задайте фиксированную ширину для контейнеров.

[BlackWolf]

AlexanderZe: Большое спасибо за ответ, получается сайт ВКонтакте НЕ адаптивный сайт? Т.е он не сжимается и не изменяется благодаря тому, что там используются width, height и min-width, min-height? И не используется meta name="viewport"

[Александр Лысенко]

blacknightwolf: В общих чертах да. Если упростить — фиксированная ширина блоков.

[BlackWolf]

AlexanderZe: А есть ли сайты в которых есть пример фиксированных блоков? Просто не очень понятно какие значения подбирать к блокам. min-height и min-width видимо недостаточно, попробовал применить их на блоках, все равно слетают.. :( Хочется чтобы при изменении окна браузера сайт не видоизменялся, а только скролл добавлялся, т.е как у ВК.

[Александр Лысенко]

blacknightwolf: Вот

[BlackWolf]

AlexanderZe: Спасибо, посмотрел стили сайта, в них нету min-height и min-width, а сайт все равно не изменяется при изменении ширины браузера. Как так? Получается такого эффекта можно добиться применив теги position: absolute, display: block, и z-index?
position: absolute;
display: block;
width: 760px;
height: 200px;
background: url(images/bb_masthead.jpg) no-repeat top center;
z-index: 4;

[Александр Лысенко]

blacknightwolf: Нет, для этого надо указать widthи обозначить min-width. Плюс отцентрировать сайт с помощью margin: 0 auto; Погуглите css решение grid 960gs

[BlackWolf]

AlexanderZe: Спасибо за grid960, но хочу пока самостоятельно попробовать. Решил посмотреть простую сетку на сайте htmlacademy, скопировал код сетки в notepad++, открыл с помощью браузера Chrome, но эта сетка при изменении ширины браузера начала "падать". Вот стили сетки. Хотелось бы узнать, как сделать ее неподвижной, какие стили нужно убрать, или может добавить?
div {
margin-bottom: 15px;
padding: 10px 25px 10px 25px;
background-color: #dff0d8;
}
.left-column {
float: left;
width: 50%;
min-height: 100px;
background-color: #fcf8e3;
}
.right-column {
float: right;
width: 25%;
min-height: 100px;
background-color: #d9edf7;
}
.footer {
clear: both;
}

[Александр Лысенко]

blacknightwolf: Напишите лучше мне на почту в профиле, так как тут отвечать на такие вопросы достаточно обременительно

Answer 1

[Максим Тимофеев]

getbootstrap.com/examples/blog - оно?

Comments

[BlackWolf]

Нет, я имел ввиду это :Ну вот я посетил много сайтов, и на большинстве из них, когда меняешь ширину браузера, сайт сильно меняется, т.е большая часть блоков, текста, картинок "падает" вниз. А теперь возьмем в пример ВКонтакте, там когда меняешь ширину браузера все остается на месте и ничего не меняется, не сжимается. Вот я и прошу нормальный, стабильный пример каркаса. Просто хочется понять, почему так происходит, и как добиться нормального стабильного каркаса.

[Максим Тимофеев]

blacknightwolf: сделать фиксированный контейнер, разумно составить медиа запросы. И поинить, что то что хорошо для контакта, для другого сайта может быть глупостью.

[BlackWolf]

Максим Тимофеев: Медиа-запросы можно составить так, чтобы при уменьшении ширины браузера та часть, которая окажется за пределами окна просто не была видна и появлялся скролл?

[Максим Тимофеев]

blacknightwolf: медиа запросы это css для определенных размеров экрана (если упростить). Так что да. Они для этого и существуют, что бы css был зависимым от ширины, высоты, ориентации экрана и т.д.
Ссылка которую я дал ведет на css framework bootstrap3, там то что Вам надо уже реализовано, посмотрите на grid.