Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.12.2015, 11:09   #1
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 50
По умолчанию Как выравнять меню по ширине и не дать ему разъезжаться?

Следующая проблема: меню на сайте при изменении размера окна разъезжается в две строчки. Я решил это проблему оставив справа небольшое свободное место. Но этот отступ отлично виден при сравнении с нижеследующими элементами. Как сделать, чтобы меню шло до самого края враппера и при этом не разъезжалось при изменении размера экрана? На одном форуме мне порекомендовали задать wrapper фиксированный размер. Это можно, но мне необходимо чтобы верстка была резиновой. Заранее спасибо
Вложения
Тип файла: rar Проект.rar (1.1 Кб, 11 просмотров)
AlexKain вне форума Ответить с цитированием
Старый 24.12.2015, 20:26   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Влом качать твой проект, выкидывай код сюда или заржай в фидл/кодпен. Вариантов масса, зависит от твоего решения
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 26.12.2015, 08:59   #3
AlexKain
Пользователь
 
Регистрация: 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>
AlexKain вне форума Ответить с цитированием
Старый 26.12.2015, 14:35   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 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, верни репу!
Naive вне форума Ответить с цитированием
Старый 27.12.2015, 14:31   #5
AlexKain
Пользователь
 
Регистрация: 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. Причина: Забыл дописать
AlexKain вне форума Ответить с цитированием
Старый 30.12.2015, 23:20   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от AlexKain Посмотреть сообщение
Спасибо. Но не совсем понял про justify. Проблема же в том, что сумма размеров ширины li не совпадает с шириной ul. Чем justify тут поможет?
Justify — один из методов упинать пункты меню в ширину самого меню. Отталкиваться нужно от дизайна, конечно.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Или имеется ввиду применять его с процентной шириной?
Нет смысла. Когда знаешь проценты, лучше не тратить время флоу браузера на инлайн-блоки, а делать плавающие (float). Тут они сработают надежнее, симпатичнее и быстрее.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Кстати, флекс - это что за свойство?
это технология, состоящая из комплекса свойств, служит для разметки.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Что касается пунктов p.s.
2. * решил использовать, чтобы не было неожиданностей. Как то больше трех часов искал причину появления отступа, пока не понял, что это отступ сверху заголовков.
В моем понимании "неожиданность" — это когда элемент, с заданными для него свойствами ведет себя не так, как это описано в официальной документации. Если я ставлю заголовок первого уровня, абзац, нумерованный список с парами пунктами, а вся эта фигня слипается в единый поток текста — это неожиданность. Когда забыл что-то перекрыть из стандартных стилей — это ожиданность как раз таки, сиди и изменяй конкретно для этого элемента, для этого класса, а не пиши стили в духе "ну все же так делают". Нет. Не все. (сори) за крик души, но достало, уже год приходится писать хаки, чтобы обходить заглушки вроде "ну так же удобней":
Код:
* * {
  box-sizing: border-box;
}
А такая политика к этому и приведет, потому что какому-то дятлу не доперло в голову как оно верстается по-человечески, и так типа логичнее.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
3. Каскад, если не ошибаюсь, это приоритет браузеров при обработке стилевых правил. Или нет?
Каскад — это механизм стилизирования элементов, находящихся внутри других элементов. Утопия.
3.1. само собой оно тащит за собой приоритет, ведь если уже заданы стили для ссылки, а ты говоришь, что ссылка внутри абзаца должна быть желтой, то внутри абзаца она должна быть желтой. Значит чтобы перекрыть это, тебе придется еще раз указывать каскад.
3.2. обработка браузером
Код:
 #some-list .some-llist-item a { color: red }
dom-дерево уже построено, время делать флоу страницы (че за хрень я несу можешь узнать из статьи израильской кодерши, которая прокурила исходники вебкита и мозиллы, how browsers work): прочитав данное правило, браузер увидит команду "сделай ссылки красными", он найдет все ссылки на странице, а потом будет отсеивать, спрашивать, находится ли ссылка внутри элемента, класс у которого будет .some-llist-item, дойдет до корня, и не найдя выкинет из списка, а для найденных побежит проверять опять.
Но Интернет повидал много гениев, которые пишут как в примере из п.2, разработчики браузеров сильно постарались увеличить скорость конечного рендера страницы. Но потом мы ноем, что хром/фаерфокс сожрал 8гб оперативы.
3.п.с. соберешься работать в Яндексе, тебя нормально на собеседовании прогонят за эту тему, как за любую другую оптимизацию.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
4, 7. Решение об удалении пробелов между пунктами меню брал отсюда:http://css-live.ru/articles/zagadoch...n-blokami.html Там было и решение с комментариями. Я решил попробовать оттуда второй вариант, display: table, если коротко, костыль для safari.
Костыль он и в африке костыль. По доке ясно, что внутри таблицы не может быть текстовых нод, дочерними элементами могут быть только тейбл-хеад, тейбл-боди и тейбл-футер. Когда вставляешь строку прямо в тело таблицы, то сам браузер вокруг всех строк нарисует тейбл-боди (это к слову браузерной защиты от дурака). Если ты у строки таблицы юзанешь псевдо-элемент ::before, то он будет юзаться как первая ячейка строки. Это я говорил про html-таблицы, а те, что нарисованы через CSS-синтаксис... честно, побаиваюсь их...
Но костыль — есть костыль, решение не логично с точки зрения документации, а значит будь готов его переделывать с новым обновлением.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
5. Чем плохо использование селекторов по тегам? Если эта возможность есть, и она удобней, чем постоянно вводить класс, то почему нет? Нашел только один недостаток - если кто-то другой будет читать твой код, ему удобнее ориентироваться по классам. Дело в этом?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 30.12.2015, 23:20   #7
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от AlexKain Посмотреть сообщение
6. Если цвет полностью соответствует тому, который имеет название, почему нет?(правда, у меня только один раз был такой случай - белый)
ну еще black = #000
а еще есть два таких цвета:
grey = #808080
и gray = #808080
знаешь почему? Потому что разработчики из hp не знали как правильно пишется "серый", зато все знают как написать #808080, все поймут, что это примерно-средний серый между ч и б, а кто не поймет, наберет его в девтулз или фотошопе.
+ я знаю как назвать желтый: #ff0, как его правильно на английском написать я без понятия
и еще причина, дизайнеры никогда не используют цвета из стандартной сетки паскаля) Будь готов увидеть на фоне #fff однопиксельную полоску #fefefe=))

Цитата:
Сообщение от AlexKain Посмотреть сообщение
8. Не понял этот пункт, поясни.
Чем проще попасть кликом по ссылке, тем круче. Идеал, если ссылка не меньше, чем 36х36 пикселей, для любых девайсов. Важно следить, чтобы ссылки не налазили друг на друга, нельзя, чтобы юзер хотел ткнуть по одной ссылке, а попал по другой. Так вот, по традиции, меню оформляют списком (на уровне html), и поисковики подхватили это и воспринимают <ul> наравне с <nav>. Так вот, работать надо больше для пользователей, чем для поисковых роботов. Если у твоего <li> есть поля, то натяни на него <a>
Код:
.nav-list-item {
  padding: 10px 16px;
}

.nav-list-link {
  display: inline-block;
  padding: 10px 16px; 
  margin: -10px -16px; 
}
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Я не спорю с тобой, просто действительно не понимаю того о чем написал выше. Просто я новичок, и считаю, что лучше понимать причины тех или иных правил.
p.s. А если нужно, чтобы страница ужималась до таких размеров, что ее можно комфортно просматривать на телефоне, то нужно через @media динамически уменьшать шрифт, или есть другой вариант?
Если шрифт большой, а-ля 40pt, то конечно уменьшать, самый труЪ — 12pt ~ 14px, на телефоне хороши заголовки в 32px—24px, которые типа как на лендингах хорошо оформлены.

p.s. Лично я не люблю мобильные версии сайтов, лучше если мне на телефоне откроется то-же самое, что и на десктопе, а я там буду приближать что мне нужно удалять, проматывать итд. Еще ниразу не встретил удачной на мой взгляд адаптации к мобилке сайта, свои я тоже считаю ущербными.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 30.12.2015, 23:22   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Что за говно, господа, нахрен это ограничение в 5к символов?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 31.12.2015, 17:18   #9
AlexKain
Пользователь
 
Регистрация: 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>
Вроде все работает, по крайней мере в тех версиях браузеров, что я использовал. На валидность не проверял
AlexKain вне форума Ответить с цитированием
Старый 09.01.2016, 02:33   #10
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от AlexKain Посмотреть сообщение
Спасибо, все понятно. Правда, насчет натягивания ссылок - там ведь нужны пиксели? По крайней мере у меня в процентах не работает.
Ну так читай как работают проценты и от чего.
А это:
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Нашел (сам) такое решение.
Код HTML:
<ul>
<a><li>Текст</li></a>
<a><li>Текст</li></a>
</ul>
лютая смерть мозга. Внутри списка должны быть только элементы списка!
Цитата:
Сообщение от AlexKain Посмотреть сообщение
Вроде все работает, по крайней мере в тех версиях браузеров, что я использовал.
браузеры старше тебя, друг мой. Разработчики браузеров уже давно поняли, что верстальщики особой сообразительностью не отличаются и соревнуются в олимпиаде "кто лучше поймет дурака". Побеждает хром пока.
Цитата:
Сообщение от AlexKain Посмотреть сообщение
На валидность не проверял
А зачем? Если насрать на здравый смысл, то и валидатор не помощник.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
блок с логотипом занимает по всей ширине окна а с права от него хочу сделать меню, а получается только под этим блоком 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