|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
24.12.2015, 11:09 | #1 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Как выравнять меню по ширине и не дать ему разъезжаться?
Следующая проблема: меню на сайте при изменении размера окна разъезжается в две строчки. Я решил это проблему оставив справа небольшое свободное место. Но этот отступ отлично виден при сравнении с нижеследующими элементами. Как сделать, чтобы меню шло до самого края враппера и при этом не разъезжалось при изменении размера экрана? На одном форуме мне порекомендовали задать wrapper фиксированный размер. Это можно, но мне необходимо чтобы верстка была резиновой. Заранее спасибо
|
24.12.2015, 20:26 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Влом качать твой проект, выкидывай код сюда или заржай в фидл/кодпен. Вариантов масса, зависит от твоего решения
Alar, верни репу!
|
26.12.2015, 08:59 | #3 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Вот код:
Код HTML:
<!doctype html> <html> <head> <title>BMG.TJ</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name = "description" content = "Описание услуг BMG.TJ"> <style> *{ margin: 0; padding: 0; } body { font: 10px Verdana, sans-serif; background-color: #efefef; } .wrapper { /*margin: auto;*/ width: 79.1%; margin-left: 8.1%; background: yellow; min-width: 980px; max-width: 1500px; } header { color: white; } nav ul { font-size: 0; display: table; background: gray; } nav li{ display: inline-block; font: 18px verdana, sans-serif; } .menu{ position: relative; margin-left: auto; width: 62.7%; } .menu a { color: white; text-decoration: none; } .menu li { padding: 2.2% 3.6% 2.2% 3.6%; background: green; } .top-menu li:first-child{ padding-left: 2%; border-left: 1px solid #b42522; border-radius: 0 0 0 7%/17%; } .top-menu li:last-child { border-right: none; padding-right: 2%; border-right: 1px solid #b42522; border-radius: 0 0 7%/17% 0; } section { position: relative; border: #acacac solid 1px; background-color: white; padding: 4px; top: 38px; } .ability { background-color: #bc191a; color: white; padding: 1.7% 0 1.2% 2.5%; } .ability h1{ font-size: 25px; font-style: italic; font-weight: bold; line-height: 1.5; } </style> </head> <body> <div class="wrapper"> <header> <nav> <ul class="menu"> <li><a href="">главная</a></li> <li><a href="">форум</a></li> <li><a href="">заказы</a></li> <li><a href="">о компании</a></li> <li><a href="">контакты</a></li> </ul> </nav> </header> <section> <div class="ability"> <h1>Добро пожаловать </h1> </div> </section> </div> <footer> </footer> </body> </html> |
26.12.2015, 14:35 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Есть два не убиваемых варианта верстать нужную тебе фигню инлайн-блоками:
1. задать процентную ширину (у тебя 5 пунктов, выдать каждому по 20%), при этом не должно быть текстовых нод между элементами, общего css решения по этому поводу нет 2. верстка по ширине (justify) Решения хороши во всех смыслах, когда по дизайну не требуется, чтобы сами эти блоки служили навигации, если вдруг надо, то есть другие варианты: - верстка под таблицы (зависит от поддерживаемых браузеров, если нужно полное дно[ie6-7], то можно и реальной таблицей сверстать) - флекс + цейлс (для ИЕ) опятьже без говнобраузеров фолбэка на старые ишаки у тебя нет, значит они тебе не нужны, так что советую второй вариант. P.S. 1. ты уже в курсе, что вертикальные отступы, поля и рамки (margin, padding, border) в процентах считаются относительно ширины родителя? 2. убивай все общие стили, особенно * 3. убивай любой каскад 4. убивай текстовые ноды между эелементами, которые планируешь верстать инлайн-блоками (если без джастифая) - их можно склеить - можно вставить между ними <!--коммент-->, я обычно юзаю этот вариант 5. на пиши селекторы по тэгам, даже для body; избавится от этого потом трудно, отвечаю. 6. не пиши цвета названиями (думаю, это было для примера, но не делай так) 7. ты объявил список таблицей и вложил в него строчно-блочные элементы списка... нахрен? 8. если враппер для ссылки имеет поля, натяни ссылку на эти поля (однохренственные поля и отрицательные отступы)
Alar, верни репу!
|
27.12.2015, 14:31 | #5 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Спасибо. Но не совсем понял про justify. Проблема же в том, что сумма размеров ширины li не совпадает с шириной ul. Чем justify тут поможет? Или имеется ввиду применять его с процентной шириной?
Кстати, флекс - это что за свойство? Что касается пунктов p.s. 2. * решил использовать, чтобы не было неожиданностей. Как то больше трех часов искал причину появления отступа, пока не понял, что это отступ сверху заголовков. 3. Каскад, если не ошибаюсь, это приоритет браузеров при обработке стилевых правил. Или нет? 4, 7. Решение об удалении пробелов между пунктами меню брал отсюда:http://css-live.ru/articles/zagadoch...n-blokami.html Там было и решение с комментариями. Я решил попробовать оттуда второй вариант, display: table, если коротко, костыль для safari. 5. Чем плохо использование селекторов по тегам? Если эта возможность есть, и она удобней, чем постоянно вводить класс, то почему нет? Нашел только один недостаток - если кто-то другой будет читать твой код, ему удобнее ориентироваться по классам. Дело в этом? 6. Если цвет полностью соответствует тому, который имеет название, почему нет?(правда, у меня только один раз был такой случай - белый) 8. Не понял этот пункт, поясни. Я не спорю с тобой, просто действительно не понимаю того о чем написал выше. Просто я новичок, и считаю, что лучше понимать причины тех или иных правил. p.s. А если нужно, чтобы страница ужималась до таких размеров, что ее можно комфортно просматривать на телефоне, то нужно через @media динамически уменьшать шрифт, или есть другой вариант? Последний раз редактировалось AlexKain; 27.12.2015 в 14:35. Причина: Забыл дописать |
30.12.2015, 23:20 | #6 | ||||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Нет смысла. Когда знаешь проценты, лучше не тратить время флоу браузера на инлайн-блоки, а делать плавающие (float). Тут они сработают надежнее, симпатичнее и быстрее. это технология, состоящая из комплекса свойств, служит для разметки. Цитата:
Код:
Цитата:
3.1. само собой оно тащит за собой приоритет, ведь если уже заданы стили для ссылки, а ты говоришь, что ссылка внутри абзаца должна быть желтой, то внутри абзаца она должна быть желтой. Значит чтобы перекрыть это, тебе придется еще раз указывать каскад. 3.2. обработка браузером Код:
Но Интернет повидал много гениев, которые пишут как в примере из п.2, разработчики браузеров сильно постарались увеличить скорость конечного рендера страницы. Но потом мы ноем, что хром/фаерфокс сожрал 8гб оперативы. 3.п.с. соберешься работать в Яндексе, тебя нормально на собеседовании прогонят за эту тему, как за любую другую оптимизацию. Цитата:
Но костыль — есть костыль, решение не логично с точки зрения документации, а значит будь готов его переделывать с новым обновлением.
Alar, верни репу!
|
||||
30.12.2015, 23:20 | #7 | ||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
а еще есть два таких цвета: grey = #808080 и gray = #808080 знаешь почему? Потому что разработчики из hp не знали как правильно пишется "серый", зато все знают как написать #808080, все поймут, что это примерно-средний серый между ч и б, а кто не поймет, наберет его в девтулз или фотошопе. + я знаю как назвать желтый: #ff0, как его правильно на английском написать я без понятия и еще причина, дизайнеры никогда не используют цвета из стандартной сетки паскаля) Будь готов увидеть на фоне #fff однопиксельную полоску #fefefe=)) Чем проще попасть кликом по ссылке, тем круче. Идеал, если ссылка не меньше, чем 36х36 пикселей, для любых девайсов. Важно следить, чтобы ссылки не налазили друг на друга, нельзя, чтобы юзер хотел ткнуть по одной ссылке, а попал по другой. Так вот, по традиции, меню оформляют списком (на уровне html), и поисковики подхватили это и воспринимают <ul> наравне с <nav>. Так вот, работать надо больше для пользователей, чем для поисковых роботов. Если у твоего <li> есть поля, то натяни на него <a> Код:
Цитата:
p.s. Лично я не люблю мобильные версии сайтов, лучше если мне на телефоне откроется то-же самое, что и на десктопе, а я там буду приближать что мне нужно удалять, проматывать итд. Еще ниразу не встретил удачной на мой взгляд адаптации к мобилке сайта, свои я тоже считаю ущербными.
Alar, верни репу!
|
||
30.12.2015, 23:22 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Что за говно, господа, нахрен это ограничение в 5к символов?
Alar, верни репу!
|
31.12.2015, 17:18 | #9 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Спасибо, все понятно. Правда, насчет натягивания ссылок - там ведь нужны пиксели? По крайней мере у меня в процентах не работает. Нашел (сам) такое решение. В html части писать не
Код HTML:
<ul> <li><a>Текст</a></li> <li><a>Текст</a></li> </ul> Код HTML:
<ul> <a><li>Текст</li></a> <a><li>Текст</li></a> </ul> |
09.01.2016, 02:33 | #10 | |||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
А это: Цитата:
Цитата:
А зачем? Если насрать на здравый смысл, то и валидатор не помощник.
Alar, верни репу!
|
|||
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
блок с логотипом занимает по всей ширине окна а с права от него хочу сделать меню, а получается только под этим блоком | nikytt | HTML и CSS | 1 | 27.11.2015 17:33 |
CSS! Гориз. резиновое меню из ul li, как его расстянуть по ширине на весь экран? | AlienNation | HTML и CSS | 1 | 21.01.2012 01:27 |
Выбор пункта в меню не выполняет назначенную ему процедуру | СтуденT | Помощь студентам | 2 | 21.12.2011 14:20 |
TWebBrowser-как перехватить команду скрипта для закрытия окна и не дать ему закрыться | Вовик | Компоненты Delphi | 5 | 03.10.2007 12:17 |