Форум Сайтостроение Веб-строительство

Вопрос по html5

mff
На сайте с 21.02.2008
Offline
282
mff
1038

Здравствуйте коллеги!

Подскажите, как грамотно отверстать на html5:

<nav>
        <a href="/">Главная</a>      
        <a href="catalog/">Каталог</a>
        <a href="prices/">Цены</a>
        <a href="contacts/">Контакты</a> 
        <a href="clients/">Клиентам</a> 
        <a href="articles/">Статьи</a>        
        <a href="jobs/">Вакансии</a> 
        <form><input type="text" id="" name=""  /> <input type="submit" value="Искать"/></form>
</nav>
мне нужно все ссылки позиционировать слева, а поле ввода текста и кнопку - справа.
HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строковых (<span>) элементов, например, <nav> (блок навигации по сайту)...

Что же использовать вместо <div>, тег - <aside> ?

Управление репутацией в сети: https://timbook2.ru/
[Удален]
#1

проще <ul id="nav"> и не париццо... ))

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#2

1. Какое отношение к блоку навигации имеет форма? Вынести за пределы блока.

2. 


<nav>

  <ul>

    <li><a></li>

  </ul>

</nav>
- так будет разумней.

Форму же можно позиционировать рядом с блоком навигации всеми возможными способами. Зависит от окружающей структуры документа.

mff
На сайте с 21.02.2008
Offline
282
mff
#3
Olldman:
Какое отношение к блоку навигации имеет форма? Вынести за пределы блока.

Верно, но как:

<nav>
  <ul>
    <li><a href="/">Главная</a> </li>
    <li> <a href="catalog/">Каталог</a></li>
    <li><a href="prices/">Цены</a></li>
    <li><a href="contacts/">Контакты</a> </li>
    <li><a href="clients/">Клиентам</a></li>
    <li><a href="articles/">Статьи</a></li>
    <li><a href="jobs/">Вакансии</a></li>
  </ul>
  <aside class="right_nav">
    <input type="text" id="search" name="search" />
    <input type="submit" value="Искать"/>
  </aside>
</nav>

nav {
	background: #CCC;
	padding:10px;
}
nav ul {
	margin:0;
	padding:0;
	display:inline-block;
}
nav li {
	display:inline-block;
	margin-right:30px;
}
.right_nav {
	float:right;
}
Olldman:
Зависит от окружающей структуры документа

Мне нужно чтобы вот так выглядело:

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#4

Ну вы же сами привели цитату:

<nav> (блок навигации по сайту)

- блок навигации - в нем никак места форме нет.

Примерный выход: 


<div>

<nav>

  <ul>

    <li><a href="/">Главная</a> </li>

    <li> <a href="catalog/">Каталог</a></li>

    <li><a href="prices/">Цены</a></li>

    <li><a href="contacts/">Контакты</a> </li>

    <li><a href="clients/">Клиентам</a></li>

    <li><a href="articles/">Статьи</a></li>

    <li><a href="jobs/">Вакансии</a></li>

  </ul>

</nav>

  <form class="right_nav">

    <input type="text" id="search" name="search" />

    <input type="submit" value="Искать"/>

  </form>

</div>

Позиционировать можно разными способами, это и float, и position:absolute. Все зависит от ваших фантазий.

В данном случае не стОит бояться применить элемент div, т.к. он и служит для объединения структурных элементов в один блок.

Как получить расширенный сниппет Тарас Шаров: «Результат нового Google представил новую версию
mff
На сайте с 21.02.2008
Offline
282
mff
#5
Olldman:
В данном случае не стОит бояться применить элемент div, т.к. он и служит для объединения структурных элементов в один блок.

Спасибо за разъяснения!

[Удален]
#6
Olldman:
Код: <nav>
<ul>
<li><a></li>
</ul>
</nav> - так будет разумней

лишняя оболочка получается - зачем? ))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий