Форум hotibo.ru
Сайты - по стандартам, но не стандартные сайты!
#1 21.06.2011 17:54
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Вопрос по резиновой вёрстке.
Во общем смотрите: надо сделать резиновую вёрстку такого меню:
Как бы простая версия:
И резиновая:
Получается что между каждой кнопкой меню меняется расстояние.
Но они должны быть на всю ширину блока в котором они находятся.
Ширина самих картинок меню -- разная.
Всё что пришло в голову так это взять каждую картинку меню в div с width:12.5%.
Они заполняться равномерно с шириной блока в котором они находятся, но между ними расстояние разное.
_http://globus-tours.com.ua/watch/ - вот, что пока получилось.
Спасибо за внимание.
p.s. надеюсь я понятно выразился.
Нет на форуме
#2 22.06.2011 00:57
- MT
- Опытный
- Откуда: Moscow
- Зарегистрирован: 23.11.2009
- Сообщений: 241
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Варианта два:
— таблица,
— легонько постучать дизайнеру по голове, чтобы больше такого не выдумывал. ;-)
браузер | блог
Нет на форуме
#3 22.06.2011 10:32
- dark-demon
- Moderator
- Зарегистрирован: 23.02.2011
- Сообщений: 229
Re: Вопрос по резиновой вёрстке.
теоретически можно ещё указать отступы в процентах... но это будет криво...
кстати, не стоит пихать div внутрь a - мозилле от этого не по себе ;-) вообще, тебе хватило бы тут классического ul+li+a
Отредактированно dark-demon (22.06.2011 10:36)
Нет на форуме
#4 22.06.2011 10:44
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
Я так понимаю в таблице внутренними паддингами нужно сделать расстояние?
Нет на форуме
#5 22.06.2011 12:24
- vashurin
- Moderator
- Зарегистрирован: 14.09.2010
- Сообщений: 287
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Локи написал:
Я так понимаю в таблице внутренними паддингами нужно сделать расстояние?
Можно таблице задать длину в 100%, а картинки внутри ячеек таблицы центрировать.... возможно, что и выйдет.
dark-demon написал:
кстати, не стоит пихать div внутрь a - мозилле от этого не по себе ;-)
Это точно, не стоит
С уважением, Вашурин Владимир.
Нет на форуме
#6 22.06.2011 12:28
- ash
- Новичок
- Откуда: Москва
- Зарегистрирован: 28.04.2011
- Сообщений: 28
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Я делал такое без таблицы, работало везде, кроме Firefox
Идея такая: блок, в нём строчные элементы - картинки, например. Растяжение на всю ширину блока происходит за счёт text-align: justify в блоке, а необходимое для растяжения переполнение строки осуществляется за счёт невидимого очень широкого строчного же элемента. Например прозрачной картинки с указанной шириной 100%.
Мало того, с помощью такой технологии можно целый искусственный интеллект сделать 
То есть если задать невидимой картинке ширину 40%, то растягиваться на всю ширину контент будет, если он занимает более 60%. То есть можно управлять моментом, начиная с которого происходит разверка.
Забавно конечно, но это работает 
Удачи
actually, my native language is C++
Нет на форуме
#7 22.06.2011 12:30
- ash
- Новичок
- Откуда: Москва
- Зарегистрирован: 28.04.2011
- Сообщений: 28
- Вебсайт
Re: Вопрос по резиновой вёрстке.
dark-demon написал:
кстати, не стоит пихать div внутрь a - мозилле от этого не по себе ;-)
мозилле от этого нормально
а вот валидатор материться начинает
actually, my native language is C++
Нет на форуме
#8 22.06.2011 15:09
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
Всем спасибо еще раз за внимание.
Из всего предложенного воспользовался вариантом с списком. Почти получилось.
_http://globus-tours.com.ua/watch/
Только в разных разрешениях монитора картинки не правильно смещаются, и получается в 2 ряда.
Я так понимаю нужно установить margin в процентах? Но как его вытащить.
Нет на форуме
#9 22.06.2011 22:50
- dark-demon
- Moderator
- Зарегистрирован: 23.02.2011
- Сообщений: 229
Re: Вопрос по резиновой вёрстке.
ash написал:
мозилле от этого нормально
http://dark-demon.nm.ru/web/samples/moz_margin_bug.htm
Нет на форуме
#10 24.06.2011 15:18
- ash
- Новичок
- Откуда: Москва
- Зарегистрирован: 28.04.2011
- Сообщений: 28
- Вебсайт
Re: Вопрос по резиновой вёрстке.
2 dark-demon: Отредактированно ash (24.06.2011 15:19)
Ерунда какая-то. Похоже, что очень специфические условия нужны. Вообще так баги не демонстрируют, этож хрен просечёшь как его организовать. Вообще, если не брать во внимание этот баг (?), никто не запрещал сделать блоком и запихнуть внутрь
2 Локи:
Вы бы попробовали как я посоветовал - говорю же: просто и работает. Если нужен список (семантика и всё такое) - пожалуйста, каждый элемент меню складывается в Считать в таком случае самому расстояния, отступы и т.п. - неудачная идея, имхо; считать всё должен браузер.
actually, my native language is C++
Нет на форуме
#11 25.06.2011 05:38
- dark-demon
- Moderator
- Зарегистрирован: 23.02.2011
- Сообщений: 229
Re: Вопрос по резиновой вёрстке.
Нет на форуме
#12 26.06.2011 01:54
- prayer
- Новичок
- Зарегистрирован: 19.04.2011
- Сообщений: 4
Re: Вопрос по резиновой вёрстке.
у него остаётся семантика строчного элемента.
DTD всё равно никто не читает.
Нет на форуме
#13 26.06.2011 02:30
- dark-demon
- Moderator
- Зарегистрирован: 23.02.2011
- Сообщений: 229
Re: Вопрос по резиновой вёрстке.
это заблуждение.
Нет на форуме
#14 26.06.2011 21:46
- Коля Дубр
- Новичок
- Зарегистрирован: 07.04.2011
- Сообщений: 3
Re: Вопрос по резиновой вёрстке.
ash, грандиозный респект за Ваш метод, сам бы не догадался! Очень вовремя, как раз сейчас такую проблему решаю
Нет на форуме
#15 27.06.2011 12:57
- locker
- Разбирающийся
- Зарегистрирован: 25.02.2010
- Сообщений: 54
- Вебсайт
Re: Вопрос по резиновой вёрстке.
КОля, а вы не тот Коля Дубр который на СЕ тусуется?
Нет на форуме
#16 27.06.2011 13:55
- Коля Дубр
- Новичок
- Зарегистрирован: 07.04.2011
- Сообщений: 3
Re: Вопрос по резиновой вёрстке.
locker, ну а какой же еще? Правда не тусуюсь я там давненько, некогда...
Нет на форуме
#17 27.06.2011 14:34
- locker
- Разбирающийся
- Зарегистрирован: 25.02.2010
- Сообщений: 54
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Понятно. Приятно
Нет на форуме
#18 29.06.2011 15:16
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
Всем привет.
С меню разобрался. Спасибо за помощь. Но есть ещё проблемы:
http://globus-tours.com.ua/watch/index2.html - почему не тянется блок #top по высоте?
Нет на форуме
#19 29.06.2011 15:43
- vashurin
- Moderator
- Зарегистрирован: 14.09.2010
- Сообщений: 287
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Локи написал:
Всем привет.
С меню разобрался. Спасибо за помощь. Но есть ещё проблемы:
http://globus-tours.com.ua/watch/index2.html - почему не тянется блок #top по высоте?
перед закрывающим тегом этого блока поставь
, тогда этот блок и будет тянуться вниз в зависимости от высоты его содержимого.С уважением, Вашурин Владимир.
Нет на форуме
#20 29.06.2011 16:01
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
vashurin написал:
Локи написал:
Всем привет.
С меню разобрался. Спасибо за помощь. Но есть ещё проблемы:
http://globus-tours.com.ua/watch/index2.html - почему не тянется блок #top по высоте?перед закрывающим тегом этого блока поставь
, тогда этот блок и будет тянуться вниз в зависимости от высоты его содержимого.
Возможно Вы имели введу
Даже если так, то оно не помогает.
Нет на форуме
#21 29.06.2011 16:08
- vashurin
- Moderator
- Зарегистрирован: 14.09.2010
- Сообщений: 287
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Локи написал:
Возможно Вы имели введу
style="clear:both">?
Даже если так, то оно не помогает.
да, именно это.
Хм., я сейчас зашел и ожидал увидет такой код:
Код:
С уважением, Вашурин Владимир.
Нет на форуме
#22 29.06.2011 16:14
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
Я просто пробовал у себя на локальном сервере.
Поправил и на хостинге. Смотрите.
Но не тянет оно блок.
Нет на форуме
#23 29.06.2011 16:20
- vashurin
- Moderator
- Зарегистрирован: 14.09.2010
- Сообщений: 287
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Локи написал:
Я просто пробовал у себя на локальном сервере.
Поправил и на хостинге. Смотрите.
Но не тянет оно блок.
Все, посмотрел еще раз CSS, более внимательно:
Код:
#top {
background-color: #000000;
height: 785px;
background-image: url(i/bg_1.jpg);
background-position: bottom;
background-repeat: repeat-x;
}Так содержимое больше, вот и вылезает. Уберите из описания height.
Я б
С уважением, Вашурин Владимир.
Нет на форуме
#24 29.06.2011 16:32
- Локи
- Новичок
- Зарегистрирован: 29.06.2010
- Сообщений: 21
Re: Вопрос по резиновой вёрстке.
О, сработало.
Благодарствую.
А как в целом оцените вёрстку ?
Нет на форуме
#25 29.06.2011 16:43
- vashurin
- Moderator
- Зарегистрирован: 14.09.2010
- Сообщений: 287
- Вебсайт
Re: Вопрос по резиновой вёрстке.
Локи написал:
О, сработало.
Благодарствую.
А как в целом оцените вёрстку ?
Не за что.
Про верстку: не валидно 
.
С уважением, Вашурин Владимир.
Нет на форуме