Как правильнее будет использовать <nav>

[logicface]

Здравствуйте я хотел бы поинтересоваться как в данной ситуации будет правильнее использовать тег <nav>.

Вот что мы имеем:

В самом темном диве идет список <ul> как видно из картинки в большом диве 3 маленьких, уже в них еще по 2 дива. В верхнем диве просто текст, это даже не ссылка.

А вот в темном диве идут ссылки. Вот у меня и возник вопрос. Вместо большого дива сделать <nav>, или 3 дива которые в большом сделать <nav>, или только 3 самые темные дивы сделать <nav>.=D

Подскажите как будет лучше.

[psywalker]

Имхо, я бы сделал один <nav> контейнером, в который положил бы все эти три блока. Ведь, по сути, это одна навигация, пусть и с разными секциями.

[logicface]

Тоесть самый светлый блок делать nav? Или нужно постараться что бы был только светлый блок без внутренних?

Вот мое меню в неупращенной версии, полное=DDD

Я наверное переборщил с дивами, да?)

Каждый квадратик это див=) в последних квадратиках (самых маленьких уже лежат теги ul иди a.

Edited November 22, 2012 by logicface

[psywalker]

  On 11/22/2012 at 10:50 PM, logicface said:

Тоесть самый светлый блок делать nav? Или нужно постараться что бы был только светлый блок без внутренних?

Вот мое меню в неупращенной версии, полное=DDD

Я наверное переборщил с дивами, да?)

Каждый квадратик это див=) в последних квадратиках (самых маленьких уже лежат теги ul иди a.

Хаа, такой ты хитрец) всё прибавляешь и прибавляешь объектов на картинке)

Я говорил про вот этот блок весь.

[logicface]

Спасибо большое, я еще решил дивов уменьшить и в итоге у меня получилось по коду что то типо такого:

<div class="общий блок">
     <header class="хэдер">
     </div>
          <nav class="навигация">
          </nav>
</div>

Единственное что плохо, так это то, что в хэдер попадают ссылки Вход | Регистрация, ну я думаю эт ничего страшного=)

Спасибо большое вам за совет, эт значительно уменьшило количество дивов странице и я понял как лучше использовать нав.=)

[psywalker]

  On 11/23/2012 at 11:39 AM, logicface said:

Спасибо большое, я еще решил дивов уменьшить и в итоге у меня получилось по коду что то типо такого:

<div class="общий блок">
     <header class="хэдер">
     </div>
          <nav class="навигация">
          </nav>
</div>

Единственное что плохо, так это то, что в хэдер попадают ссылки Вход | Регистрация, ну я думаю эт ничего страшного=)

Спасибо большое вам за совет, эт значительно уменьшило количество дивов странице и я понял как лучше использовать нав.=)

Ну, кстати, погоди. Во-первых, я лошара и меня слушать тоже не вариант), а во-вторых, Вход и Рега тоже важные разделы тоже важная херня.

Я бы сделал так. Хедер - общий блок, в нём Нав (в котором 4 блока. Все кроме лого с подписью, и ссылки справа левые), и отдельно лого.

А ваще мне бы самому интересно было послушать нормальную знающую братву)

[logicface]

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

Других вариантов я вообще не вижу, потому что чисто физические не смогу тогда расположить Div в котором ссылки вход и регистрация находятся. Если я вынесу див с этими ссылками из зеленого блока, то невозможно будет сделать такую обтекаемость как в этом меню. А слушать все же лучше вас, так как у вас больше опыта=)

Вот рисунок.

[RodgerFox]

<nav>
<ul>
<li>Лучшее<ul><li>link</li><li>link</li><li>link</li></ul>
<li>новые<ul><li>link</li><li>link</li><li>link</li></ul>
<li>добавить<ul><li>link</li><li>link</li><li>link</li></ul>
</li>
</ul>
</nav>

вот и все

По последней картинке:

<section>
<div class="logo + login" />
<!-- суда код выше с менюшкой --> 
</section>

[logicface]

А где тогда будет <header>? Как я понял очень плохо делать блок nav'ом если в нем будут лежать другие дивы, нужно что бы в нем лежало непосредственно меню? Тогда это добавляет кучу проблем как по мне. Да я и бы хотел узнать как лучше сделать непосредственно в моем случае, не хотелось бы ложить список в список как вы предлагаете, так как я его пока не смогу так оформить, мало знаний еще, что бы так оперировать списком.=)

Чувствую проще уже будет забить на эти навы и так далее и верстать по старинке.=)

Edited November 23, 2012 by logicface

[RodgerFox]

А чем плох список в список? И при чем тут header? не надо вставлять все знакомые вам блоки во все щели.

[logicface]

Просто я не смогу так оформить список в списке как на рисунке, потому что еще мало знаю и эта конструкция для меня выглядит очень запутанной, тем более что 4 пункт имеет совсем другой стиль нежели 3 первые. Ну просто надо же 1 раз header где то вставить=) Вот сейчас кстати как только вы написали про список в списке, пробую так делать, чисто для интереса, ничего не выходит=D

Хотя вот по тихоньку получается, только слишком ного классов приходиться использовать, я еще плохо знаю css и не могу писать такие комбинации как nav ul li ul {} =DDD ну или как правильно что бы классы не использовать=)

Edited November 23, 2012 by logicface

[logicface]

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

P.S. Исправил эту проблему, но появилась новая на счет которой точно не знаю что делать. Если уменьшить количествопунктов в последнем меню, то весь список прыгнет вверх, а так не должно быть он должен быть в любом сслучае как на картинке, причем если в последнем списке не имеет значения сколько пунктов они должны быть выровненны по вертикали.=(

http://codepen.io/anon/pen/hfAmq

Edited November 23, 2012 by logicface

[RodgerFox]

Да все просто, представьте что вы решетка - # и действуйте, действуйте!

HTML:

<nav>
<ul>
	<li>Лучшее
		<ul><li>link</li>
		    <li>link</li>
		   <li>link</li>
		</ul>
	</li><!-- end лучшее -->
	<li>новые
		<ul><li>link</li>
		    <li>link</li>
		    <li>link</li>
		</ul>
	</li><!-- end новые -->
	<li>добавить
		<ul><li>link</li>
		    <li>link</li>
		    <li>link</li>
		</ul>
    </li><!-- end добавить -->
</ul>
</nav>

CSS:

ul { text-align: center;}
ul li {font-size: 16px; text-align: center; color: gold; float: left; display: block; width: 32%; margin-left: 2%; /* 32+32+2+2=100% */ }
ul li:first-child {margin-left: 0px;}
ul li ul {overflow: hidden;}
ul li > li {float: left; color: #fff; font-size: 14px; float: none; width: auto; /* тут лучше заставить все элементы брать всю ширину которая им дается, если все фиксированно то еще легче. Не забывай, что дочерние элементы могут брать значения у родителя, их надо обнулять или менять на свои. */}

палочки или при ксс делать, типа border или отдельные <li/>.

Пример:

<li>link</li>
<li>|</li>
<li>link</li>
<li>|</li>
<li>link</li>

p.s. делал по этой картинке - ( _http://fotohost.org/images/a144826b-93kB.jpg )

Я кажется писал выше, сделайте последнее меню по правому краю, шапку с ссылками авторизации по левому, меню по центру. Аминь.

Edited November 23, 2012 by RodgerFox

[logicface]

Спасибо большое, за все объяснения и за ваше терпение, но у меня последний вопрос возник.=)

Так ведь то меню, которое как вы говорили должно быть размещено по правому краю это же тоже навигация, выходит оно должно быть вместе с этой навигацией, то бишь в одном большом диве.=)

По любому получиться то же самое что и у меня, только на дивов будет еще немного меньше ну и более красивое и грамотное исполнение.=)

Но все равно будет большой общий див в котором лежит 2 дива. В 1 левое меню, в одном правое.=)

Edited November 23, 2012 by logicface

[RodgerFox]

<section>
<!-- тут или див или что захотите в нем находится лого и ссылки на авторизацию -->
<nav><!-- наше меню большое -->
<!-- какие ссылки тут будут? можно опять же использовать простой див. -->
</section>

Пример более подробный:

<section>
<nav class="menu2 float-r"><!-- идет список типа: <a href="#"></a><a.../> --></nav>
<div class="logo float-l"><!-- лого + авторизация --></div>
<nav> <!-- наше меню --></nav>

float-r - float: left;
float-r - float: right;

Сначала правый ставится, а попробуйте поставить в конце поймете причину.

Edited November 23, 2012 by RodgerFox

[logicface]

Я понимаю, что если его поставить в конце он должен съехать под блоки. Я не понимаю вот чего. Как я понял в любом случае будет так. Вы предлагаете сделать так:

Красное - <section>

Черное - это обычный див где будет лого и ссылки на вход и регистрацию. На сайте <header> вообще не будет.

Зеленое - <nav>

Желтое - <section> или див. Уже в нем лежит первое <ul>, которое большое.

Розовое - тоже самое что и желтое только там лежит второе <ul>, которое поменьше.

Короче я прочитал еще на css.ru, что лучше все же что бы было желтое - это 1 nav и розовое это другой nav, то есть 2 nav'a, в одном лежит большое меню в другом остаток правый.=) Тогда можно будет убрать зеленый блок совсем.

Edited November 23, 2012 by logicface

[mrnobody]

Красный блок сильно смущает, да и вообще все section`ы, они не служат просто для обертки других элементов.

http://css-live.ru/articles/element-section.html

[logicface]

Я понимаю но тогда невозможно сверстать будет это меню, красный блок не обязательно должен быть <section>, можно заменить его на <div>? я его хоте вообще сначало сделать <header> но потом подумал что внутри лежит див с авторизацией на сайт, а я его не хочу выносить за этот блок=)

[RodgerFox]

все верно кроме зеленого блока ну и теперь получается еще тега section =\

Edited November 23, 2012 by RodgerFox

[logicface]

ТОгда если убрать зеленый блок получиться что красный блок это header. Черный блок вообще просто див в котором лежит лого и авторизачия. А зеленый и розовый блоки это 2 блока nav?=)

[RodgerFox]

Да зачем хеадер?

Красный див, зеленый убрать и все.

[logicface]

Ну просто это титульная страница, и это шапка, вот я и подумал что красный блок должен быть хэдер)

[RodgerFox]

да не, header вообще другое, ну я его чаще использую только для блоков цельных. На пример блок товара. у него есть шапка, контент, доп. что то... во... чуть позже скину в личку делаю один интернет магазин. Там все сразу станет понятно

[logicface]

Хорошо, спасибо вам большое за помощь, шапку переделал полностью как вы советовали списков в списке) Только по своей методике=D