Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Резиновый макет на div в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Всем привет! Помогите , пожалуйста, разобраться с макетом. Я больше по части дизайна и аудита. Резиновый макет делала только таблицами. Вот здесь пример ...


Закрытая тема
 
Опции темы
Старый 05.08.2012, 16:14   #1
Ok_

Всем привет!

Помогите , пожалуйста, разобраться с макетом. Я больше по части дизайна и аудита. Резиновый макет делала только таблицами.

Вот здесь пример того, что мне нужно:

http://s47.radikal.ru/i118/1208/be/59e3f72b6a0dt.jpg

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


задача:

нужно, что бы при разных размерах монитора картинка оставалась неизменной. Т.е. в маленьком мониторе картинка становится маленькой но полной, а в большом, она растягивается.
Сам макет отображается на весь экран без скрола.

вопросы:

1) какой посоветуете делать макет - меню - фикс, а правый блок - резина? или оба блока резиновые?

2) сейчас размеры картинки 900х590. Каковы должны быть правильные размеры с учетом задачи? Какая в принципе д.б. ширина рисунка, чтобы он был во всю ширину любого экрана, т.е. чтобы на любом экране он был 100%, И как можно оптимизировать рисунок, чтобы он точно как бы "подгонялся" по ширине экрана?

3) как нужно прописать css,что бы макет одинаково смотрелся хорошо во всех браузерах.

заранее всем спасибо)

п.с. на htmlbook.ru была, инет "лопатила", может кто объяснит доступным языком?

Последний раз редактировалось Ok_; 05.08.2012 в 16:19..
 
Старый 05.08.2012, 16:14
Ссылки
Старый 05.08.2012, 18:03   #2
Смотря что в правой колонке? БЛОК С ФОНОМ ИЗОБРАЖЕНИЯ (css background), ИЛИ БЛОК СО ВСТАВЛЕННЫМ ИЗОБРАЖЕНИЕМ РАСТЯНУТЫМ НА НА ВЕСЬ БЛОК (<img>)
 
Старый 05.08.2012, 20:18   #3
Ok_

Цитата:
Смотря что в правой колонке?

не знаю что лушче, подскажите)
сама делала второй вариант - БЛОК СО ВСТАВЛЕННЫМ ИЗОБРАЖЕНИЕМ РАСТЯНУТЫМ НА НА ВЕСЬ БЛОК
 
Старый 06.08.2012, 11:39   #4
Ну тут в зависимости, что у вас будет и должно быть в правой колонке:
1) Будут выводиться различные изображения
2) Будет выводиться текст. а фоном будет изображение

Добавлено через 3 часа 0 минут

я попытался быстренько сфарганить, но такое УГ вышло
http://testbird.xe0.ru/

На самом деле, необходимо делать по принципу Response Design + CSS запросы для адаптивности изображений... конечно в теории все это легко, но на практике нужно отрабатывать

Добавлено через 11 часов 20 минут

Я проработаю пример и снова выложу чуть позже

Добавлено через 14 секунд

Я проработаю пример и снова выложу чуть позже

Последний раз редактировалось maxefect; 06.08.2012 в 11:39.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо maxefect за это полезное сообщение:
Ok_ (06.08.2012)
Старый 07.08.2012, 00:41   #5
Резиновый, адаптивный макет на div

вот моя статья:
Вложения
Тип файла: zip desk.zip (15.1 Кб, 18 просмотров)
 
2 пользователя(ей) сказали cпасибо:
JohnJ (09.08.2012), Ok_ (07.08.2012)
Старый 10.08.2012, 19:18   #6
Такой вариант подойдёт или я не так понял задачу? http://jsfiddle.net/Ruyqa/
ПС: у maxefect-а подсмотрел идею как как сделать два столбца в один при узком экране

Добавлено через 27 минут

ответы:
1. меню фиксированное, правый блок резиновый
2. лучше всего сделать несколько картинок, например штуки три. И грузить в зависимости от ширины экрана. Но это уже только с участием скрипта. Хотя... используя хитрость от maxefect-а, можно и без скриптов обойтись. Маленькое изображение, например 500 пикселей шириной на экраны <=500 пикселей. Среднее изображение, например 800-900 пикселей на экраны, соответственно от 500 до 800-900 пикселей, и на остальные экраны крупное изображение размером 1280 и более пикселей. Дело в том, что уменьшаются изображения лучше, чем увеличиваются. При увеличении - они размываются. Поэтому можно было бы оставить одно крупное изображение и уменьшать его, но зачем пользователя с экраном 400 пикселей заставлять загружать изображение шириной в 1280?
Тут ещё нужно учесть, правда, что твоё изображение не на весь экран, а только справа. Т.е. если меню 300 пикселей, то это нужно учитывать.

Последний раз редактировалось JohnJ; 10.08.2012 в 19:18.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо JohnJ за это полезное сообщение:
Ok_ (10.08.2012)
Старый 10.08.2012, 19:18
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Резиновый дизайн или как быть с его наполнением lodas HTML, CSS, JavaScript 10 09.03.2012 10:44
резиновый div OverSet HTML, CSS, JavaScript 16 16.07.2011 20:23
Резиновый флеш Wir2al Технологии Flash 7 01.09.2010 14:35
Резиновый сайт Soulkeeper HTML, CSS, JavaScript 1 16.05.2009 13:54
Резиновый сайт web_smile HTML, CSS, JavaScript 21 13.03.2009 23:17


Текущее время: 07:14. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум