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

Резиновый дизайн или как быть с его наполнением

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


Закрытая тема
 
Опции темы
Старый 07.03.2012, 00:01   #1
Здравствуйте уважаемые форумчане. Решил помаленьку изучать верстку и столкнулся с такой проблемой: Я привык работать с фиксированным макетом, вырезал картинку в фотошопе(например фон, пункт меню и т.д) и вставил ее с оригинальными размерами на сайт. А если дизайн резиновый, как быть с определением размеров элементов веб-страницы? Я имею в виду не основных резиновых блоков, а вложенных в них(кнопки, формы, узоры, поля Edit, меню, ссылки, текст). Как мне высчитать их размер в процентах? И как вообще нужно правильно поступать в таких случаях?
 
Старый 07.03.2012, 00:01
Ссылки
Старый 07.03.2012, 09:22   #2
кнопки, формы, узоры, поля Edit, меню, ссылки
оставляй это неизменно. на самом деле сложно давать какие-либо советы, хорошо бы увидеть дизайн и с ним поработать над вопросами.
 
Старый 07.03.2012, 13:50   #3
Ну к примеру. Имеется такой сайт(см. вложение). Макет по сути фиксированный, но хочется сделать такой же- резиновый. И тут у меня возникает вопросы:
1) На шапке текст "Тридевять земель" является ссылкой. Как ее сделать ее резиновой для различных разрешений монитора?
2)Опускаемся чуть ниже и видим горизонтальное меню. Само меню делаем width:100%. А как поступить с боковыми закруглителями и разделителями, какие размеры им задать? Хочется чтобы все тянулось- макет то резиновый))
3) Боковое меню. Как подобрать размеры фона меню, текста и разделителей в процетах?

//-------------------------
вся проблема в том, чтобы научиться подбирать процентные размеры элементов веб страницы, если блок в который они вложены является резиновым))
Изображения
Тип файла: jpg макет пример.jpg (480.0 Кб, 13 просмотров)
 
Старый 07.03.2012, 23:00   #4
Ау! Есть ли здесь профессионалы которые разбираются в этом вопросе?))
 
Старый 07.03.2012, 23:35   #5
http://htmlbook.ru/samlayout/tipovye-makety
https://www.google.ru/search?q=%D0%B...w=1416&bih=679
Макет с пропорциональным маштабированием изображений, шрифтов и т.д. называется "эластичный", резиновый - это макет с изменяющейся шириной колонок.
Эластичные дизайны делают крайне редко, Вы определитесь, что именно собираетесь верстать, какие элементы и как меняются, вопрос отпадет скорее всего сам собой.
 
Старый 08.03.2012, 00:22   #6
В данном случае я хочу сверстать двухколоночный резиновый макет(см вложение). Как мне проставить размеры картинок меню и разделителей в процентах? если быть точнее не могу уловить суть, вот вырежу я картинку фиксированного размера. Хочу чтобы она тянулась и шрифт тянулся, а как оптимальный размер в процентах им подобрать- вот что я не могу!
 
Старый 08.03.2012, 01:40   #7
Цитата:
Сообщение от lodas Посмотреть сообщение
В данном случае я хочу сверстать двухколоночный резиновый макет(см вложение). Как мне проставить размеры картинок меню и разделителей в процентах? если быть точнее не могу уловить суть, вот вырежу я картинку фиксированного размера. Хочу чтобы она тянулась и шрифт тянулся, а как оптимальный размер в процентах им подобрать- вот что я не могу!
в данном случае не целесообразно верстать резиново, здесь нужна фиксированная ширина, ты представь себе на широком мониторе что это за чудо будет, когда текст расплывется в стороны и придется пропорционально увеличить шапку, меню, слайдер... уродство.
 
Старый 08.03.2012, 01:49   #8
Я не собираюсь его выкладывать в интернет. Просто хочу научиться верстать резину)) Так же я подумал о ограничителе ширины width-max. Но суть не в этом, подскажите мне хоть кто нибудь: возьмем например горизонтальное меню с разделителями. Если сайт резина какой размер задается боковым закруглителям и блокам <li>, хочется чтобы они тянулись пропорционально..

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

Мне важно понять в psd макете все размеры фиксированы: и шапка, и меню и т.д Когда я захочу делать резину как мне переводить фиксированные размеры той же шапки, меню и контента в резиновые т.е %ные)))))

Последний раз редактировалось lodas; 08.03.2012 в 01:49.. Причина: Добавлено сообщение
 
Старый 08.03.2012, 09:33   #9
1. Шапка. Задаешь слой с шапкой-боксом. Ширина 100%, высота 248px с фоновым оранжевым цветом и position: relative.
в этом боксе будет еще три слоя: девушка с деревьями бусами(или хз что это), фотки со звездой и третий слой это надпись, все эти слои позиционируешь как надо и задаешь им position: absolute;.
Надпись и все картинки оставляешь в таком размере как на макете, не надо их тянуть или еще что-то делать, только спозиционировать.

2. Навигация. Скругление углов делается на css3 очень легко у любого элемента. Это будет слой-бокс, в котором будут пункты навигации и поиск.
Если на css3 не хочется делать, то можно сделать табличку из трех колонок, в крайних будет рисунок с закругленными углами, по центру навигация и поиск.

3. Боковая навигация. Оставляй ее таким размером как на макете, не надо ее тянуть, будет ужасно. Делай фиксированным размером.

4. Контент. Блок со всем контентом тянешь на всю ширину.

Для более легкого способа можно весь сайт заключить в таблицу, это позволит на начальном этапе много проблем избежать со слоями.
 
Старый 08.03.2012, 11:58   #10
Спасибо Udav- то что мне и было нужно)) Единственное что я не понял- это второй пункт, скругление углов. Ты предлагаешь вырезать фон весь фон с закругленными углами сразу или вырезать скругленные углы отдельно и наложить их сверху на фон меню? Если вырезать их отдельно какие размеры им задать? Фотки со звездой и девушкой в шапке оставлять фиксированный размер как и на макете?))
 
Старый 08.03.2012, 11:58
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Резиновый макет на div Ok_ HTML, CSS, JavaScript 5 10.08.2012 19:18
Быть ли сайту, или не быть manyashka80 Скамейка запасных 3 09.12.2011 11:51
резиновый div OverSet HTML, CSS, JavaScript 16 16.07.2011 20:23
Резиновый сайт Soulkeeper HTML, CSS, JavaScript 1 16.05.2009 13:54
Можно или нельзя? (Быть или не быть Ii) ulsk Кальянная 14 28.12.2005 10:30


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

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