Резиновый макет на CSS

@shellist2 · Регистрация: 23.08.2012

Студворк — интернет-сервис помощи студентам

Подскажите как правильно нужно сделать, делаю первый сайт блочными элементами Div,есть два вопроса
1) блок в ну-три других блоков, при выборе ориентации телефон в дримвайвере увеличиваются в размере блоки меню по бокам,а блок по середине уменьшается, при планшетном чуть меньше, и при полном размере экрана отоброжаеться как нужно, как лучше прописать что бы коректно отображался сайт на любых экрана, извиняюсь что пишу не очень понятно, не могу описать грамотно, поэтому прикладываю скриншоты

Общий блок:

CSS
1
2
3
4
5
6
7
8
#container {
    background:#70E2FF;
    width: 80%;
    height:1080px;
    margin: 0 auto;
    min-width:480px;
    max-width:2666px;
}

Левая и права сайдбары:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#menu_left {
    background:#C4C4C4;
    float:left;
    width:180px;
    height:860px;
}
#menu_right {
    background:#C4C4C4;
    float:right;
    width:180px;
    height:860px;
}

2) вопрос: можно ли сделать резиновое изображения в хедере? что бы при изменение размера браузера, изображение тоже корректно коректировалось

@msheal · 10.03.2015, 04:14

1) Проблема заключается в фиксированной ширине боковых меню, поставь процентное, если нет желания писать медиазапрос, хотя по-хорошему для разных разрешений всё-таки придётся писать их (не будешь же ты весь контент показывать на телефонах, любуясь скроллбарами?)
2) Для того, чтобы картинка в хедере не плыла, попробуй проставить ей: width:100%; height:auto;
П.С. Я бы не использовал дримвивер в качестве редактора кода, тем более на первых порах - уж больно он перегружен функционалом + некоторые вещи делает за тебя, что плохо влияет на опыт.

@shellist2 · 10.03.2015, 10:40 **[ТС]**

Поставил в % ширину боковых, но при уменьшения браузера вылазит текст за края

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#menu_left {
    background:#C4C4C4;
    float:left;
    width:14%;
    height:870px;
}
#menu_right {
    background:#C4C4C4;
    float:right;
    width:14%;
    height:870px;
}

пробовал в CSS прописать для общего блока: мин-макс разрешения тоже не помогло

CSS
1
2
    min-width:480px;
    max-width:2666px;

@msheal · 10.03.2015, 12:31

Текст залазит на область контента из-за фиксированной высоты сайдбаров. Но проблема даже не в том, что текст отображается не так, как надо, а в самом принципе верстки под мобильные устройства. Обычно на телефонах/планшетах контент отображается по-разному, некоторые блоки вобще убираются, меню делают выезжающим и т.д. Так что вы априори не получите сайт, который будет хорошо отображаться везде

@shellist2 · 10.03.2015, 13:15 **[ТС]**

получается не стоит заморачиваться на старые телефоны? ибо сайт верстаеться для мониторов скорей.

скажите мин-макс разрешение нужно указывать для главного блока или нет?

@msheal · 10.03.2015, 14:20

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

Если отпадает надобность верстать под телефоны/планшеты, то и возиться с мин/макс шириной тоже нет смысла, как и нет смысла делать резиновый макет. Делайте общею ширину сайта 960-1000 пикселей, это избавит от кучи мороки. Но если уж очень хочется верстать резину, то указывать мин/макс ширину для блока с контентом не обязательно, его ширина ведь рассчитывается относительно сайдбаров.

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	10.03.2015, 04:14
	1) Проблема заключается в фиксированной ширине боковых меню, поставь процентное, если нет желания писать медиазапрос, хотя по-хорошему для разных разрешений всё-таки придётся писать их (не будешь же ты весь контент показывать на телефонах, любуясь скроллбарами?) 2) Для того, чтобы картинка в хедере не плыла, попробуй проставить ей: width:100%; height:auto; П.С. Я бы не использовал дримвивер в качестве редактора кода, тем более на первых порах - уж больно он перегружен функционалом + некоторые вещи делает за тебя, что плохо влияет на опыт. 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	10.03.2015, 12:31
	Текст залазит на область контента из-за фиксированной высоты сайдбаров. Но проблема даже не в том, что текст отображается не так, как надо, а в самом принципе верстки под мобильные устройства. Обычно на телефонах/планшетах контент отображается по-разному, некоторые блоки вобще убираются, меню делают выезжающим и т.д. Так что вы априори не получите сайт, который будет хорошо отображаться везде 0

@shellist2 0 / 0 / 0 Регистрация: 23.08.2012 Сообщений: 10
	10.03.2015, 13:15 [ТС]
	получается не стоит заморачиваться на старые телефоны? ибо сайт верстаеться для мониторов скорей. скажите мин-макс разрешение нужно указывать для главного блока или нет? 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	10.03.2015, 14:20
	Если в тз было чётко указано, что сайт должен быть оптимизирован для телефонов, то разумеется заморачиваться стоит, но тогда придётся усложнять себе жизнь медиазапросами и лишними часами вёрстки. Если отпадает надобность верстать под телефоны/планшеты, то и возиться с мин/макс шириной тоже нет смысла, как и нет смысла делать резиновый макет. Делайте общею ширину сайта 960-1000 пикселей, это избавит от кучи мороки. Но если уж очень хочется верстать резину, то указывать мин/макс ширину для блока с контентом не обязательно, его ширина ведь рассчитывается относительно сайдбаров. 1