Резиновая верстка под разные разрешения

@vanyakilkil · Регистрация: 13.06.2012

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

Вот к примеру имеются блоки. Сам сайт рассчитан под мой монитор 1600px, если взять меньший монитор или даже сузить браузер - появляется полоса прокрутки (имеется ввиду ширина).
И так как трудно помещать блоки рядом, использую margin, и то не везде помогает (скрин). Вот как например в таких блоках сделать нормальный вид под все мониторы? Так-же хотелось бы услышать замечания по коду (возможно что-то не так пишу, возможно лучше другое свойство). Присылаю скрин, код и архив. Всем спасибо.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
body
{
margin: 0px;
}
 
 
#shapka
{
margin: 0px;
height: 100px;
border: 1px solid black;
}
 
 
#menu
{
margin-left: 200px;
margin-top: 5px;
width: 150px;
height: 200px;
border: 1px solid red;
}
 
 
#osnova
{
margin-left: 360px;
margin-top: -202px;
width: 1000px;
height: 800px;
border: 1px solid green;
}
 
 
#spam
{
margin-right: 10px;
width: 210px;
height: 800px;
margin-top: -800px;
margin-left: 1380px;
border: 1px solid black;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Резиновый сайт</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="shapka">
</div>
<div id="menu">
</div>
<div id="osnova">
</div>
<div id="spam">
</div>
</body>
</html>

@MVS76 · 13.05.2013, 23:07

Ну так вы используйте ширину в процентах

CSS
1
2
3
width: 100%;
max-width: 1600px; // максимально растягивать 
min-width: 990px; // минимально сужать

@vanyakilkil · 14.05.2013, 11:31 **[ТС]**

Я не пробовал еще использовать max-width/min/width.. Просто ставил в процентах и очень некрасиво было когда сужаешь/расширяешь браузер.. Попробую эти свойства.

@Lovrentiy · 16.05.2013, 19:06

Блоки положи в родительский блок, которому задай 100% (и боди с аштмл), остальные блоки варьируй как удобнее в % относительно родителя, либо фиксированной ширины\длины, но чередую я другими % блоками.

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

CSS
1
overflow: hidden

@vanyakilkil · 16.05.2013, 19:14 **[ТС]**

В родительский блок, а разве не то же будет внутри него? Ведь он будет на 100% ширина и высота, то-бишь под весь монитор, ну а мониторы то у всех разные. Или я чего не так понял? Можете на примере показать если не сложно ?

@MVS76 · 16.05.2013, 20:54

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

@vanyakilkil · 16.05.2013, 22:32 **[ТС]**

Сообщение от MVS76

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

А еще такой вопрос, там как я понял отдельный стиль для ИЕ.. С помощью if привязывается? Или как? И еще такой вопрос, какая верстка больше востребована среди заказов, резиновая или адаптивная?

@MVS76 · 16.05.2013, 22:40

Для каждого проекта свое решение, ведь резину не везде поставишь, и адаптивная не везде смотрится.
Файл css для IE ложится в корень сайта, если не хотите в корень, тогда положите в папку css и пропишите путь в href индексном файле на папку.
пример на папке css:

HTML5
1
<!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->

если в корне сайта, тогда

HTML5
1
<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->

Но это как пример, для IE6 его можно не использовать - уже отстой.
Может пригодится Internet Explorer не хочет показывать сайт нормально

@vanyakilkil · 16.05.2013, 22:47 **[ТС]**

HTML5
1
<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->

То-есть для оперы например было бы так-же, только заменено не opera ? Мда.. Как я понял нужно на отлично знать все виды верстки. Вот мне интересно, ну я верстаю примерно такие макеты, и то долго и бывают ошибки, которые исправляю потом http://ivandobychin.vv.si . На изучение этих основ мне понадобилось примерно месяца два. Все так? Как я понял, для того, чтобы изучить полностью верстку, без проблем верстать любым способом нужен примерно минимум год? ну чтобы идеально верстать... Вы долго обучались (если не секрет)

@MVS76 · 16.05.2013, 22:52

Хотел сразу написать для оперы, но передумал
Был баг с оперой(танцы с бубном, название браузера само о себе говорит), решение нашел не сразу, но работает по сей день, все нормальные браузеры отображают нормально, даже IE всех версий, а опера не хотела, вот так заставил ужимать картинку

HTML5
1
2
3
4
<style>
_:-o-prefocus, .div_img img {  
height: 75%;};
</style>

Все знать не возможно, постоянно узнаешь что-то новое - это нормально!

@vanyakilkil · 16.05.2013, 22:54 **[ТС]**

а я такого вообще не знал даже...

@MVS76 · 16.05.2013, 22:57

Сообщение от vanyakilkil

а я такого вообще не знал даже...

Я бы тоже не знал если б не посмотрел отображение блока в опере, при том с тех пор уже вышло два релиза, а баг остался, без такого смешного кода - неработает.

@vanyakilkil · 16.05.2013, 22:59 **[ТС]**

Сообщение от MVS76

Я бы тоже не знал если б не посмотрел отображение блока в опере, при том с тех пор уже вышло два релиза, а баг остался, без такого смешного кода - неработает.

Я вообще пользуюсь оперой и пишу как-то под нее. Наверное не стоит тогда?

@MVS76 · 16.05.2013, 23:07

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

@vanyakilkil · 16.05.2013, 23:09 **[ТС]**

Ну а если не секрет, сколько у вас ушло времени примерно для того, чтобы нормально начать верстать разными способами?

@MVS76 · 16.05.2013, 23:27

Это большой секрет

- я не знаю. Я начинал писать еще на MQL4 под заказ, это аналог С+, потом создал сайт на юкозе так как опыта в программировании HTML не было, но были задатки к программированию, начал на юкозе тренироваться, со временем понял что это не то - он очень ограничен, перешел на бесплатный хостинг и уже осваивал PHP, очень много читал, смотрел, изучал но и сейчас иногда бывают ситуации что не можешь сам решить, прихожу сюда и создаю тему с просьбой о помощи.
Вообще можно и 15лет учить, и ничего не понимать, а можно за пару месяцев асом стать - главное желание и интуиция.

Добавлено через 5 минут
Посмотрел, сайт на юкозе создан в 2008 году

@vanyakilkil · 16.05.2013, 23:32 **[ТС]**

та не, юкоз даже не пользовался, даже не знаю как оно выглядит. Изначально была политика "все сам..".... Ибо заказчику я не наверстаю сайт на юкозе. Да и так, самому все нужно, самому. Как по мне, воспользоваться программой ума не нужно, а написать код самому уже подумать, не правда ли? Хотя, нормальные, более менее шаблоны хтмл/ксс я научился верстать после того, как я поработал над уже готовым шаблоном

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	14.05.2013, 11:31 [ТС]
	Я не пробовал еще использовать max-width/min/width.. Просто ставил в процентах и очень некрасиво было когда сужаешь/расширяешь браузер.. Попробую эти свойства. 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	16.05.2013, 19:14 [ТС]
	В родительский блок, а разве не то же будет внутри него? Ведь он будет на 100% ширина и высота, то-бишь под весь монитор, ну а мониторы то у всех разные. Или я чего не так понял? Можете на примере показать если не сложно ? 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	16.05.2013, 22:54 [ТС]
	а я такого вообще не знал даже... 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	16.05.2013, 23:07
	я пользуюсь хромом и пишу только на нем, в большинстве случаев получается кроссбраузерно + удобство редактирования стилей и кода в хроме, главное привыкнуть, средство разработчика реализовано на все 100%, показывает ошибки, быстрый доступ к путям картинок и многое другое, работаю в связке тоталкомандер + хроме. Денвер не использую. 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	16.05.2013, 23:09 [ТС]
	Ну а если не секрет, сколько у вас ушло времени примерно для того, чтобы нормально начать верстать разными способами? 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	16.05.2013, 23:27
	Это большой секрет - я не знаю. Я начинал писать еще на MQL4 под заказ, это аналог С+, потом создал сайт на юкозе так как опыта в программировании HTML не было, но были задатки к программированию, начал на юкозе тренироваться, со временем понял что это не то - он очень ограничен, перешел на бесплатный хостинг и уже осваивал PHP, очень много читал, смотрел, изучал но и сейчас иногда бывают ситуации что не можешь сам решить, прихожу сюда и создаю тему с просьбой о помощи. Вообще можно и 15лет учить, и ничего не понимать, а можно за пару месяцев асом стать - главное желание и интуиция. Добавлено через 5 минут Посмотрел, сайт на юкозе создан в 2008 году 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	16.05.2013, 23:32 [ТС]
	та не, юкоз даже не пользовался, даже не знаю как оно выглядит. Изначально была политика "все сам..".... Ибо заказчику я не наверстаю сайт на юкозе. Да и так, самому все нужно, самому. Как по мне, воспользоваться программой ума не нужно, а написать код самому уже подумать, не правда ли? Хотя, нормальные, более менее шаблоны хтмл/ксс я научился верстать после того, как я поработал над уже готовым шаблоном 0