Правильное позиционирование элементов в шаблоне HTML/CSS?

Question

[onhoric]

Столкнулся с проблемой во время самообучения, в мануалах описываются различные способы позиционирования элементов на странице. Но как правильно и оптимально это делать непонятно. При создании шаблона jsbin.com/rezukela/4/edit подсознательно понимаю, что делаю неправильно, но как по другому не знаю.

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

P.S. Так же хотелось бы понять, как доработать сайт под любое разрешение и изменение масштаба.

Answer 1

[denisko_t]

Кнопки вверху внеси в свой список, чтоб не отрывать. Тег button использую только в формах и то... Оставь только "а". Добавь к навигации тег "nav", переходи на новую разметку. Относительно респонсив @media screen and

Меню к примеру так оформи

<nav>
 <ul>
  <li><a href="#">Загрузить</a></li>
  <li><a href="#">Помощь</a></li>
  <li><a href="#">Документы</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a class="btn" href="#">Зарегистрироваться</a></li>
  <li><a class="btn" href="#">Войти</a></li>
 </ul>
</nav>

nav > ul{
  float: right;
  margin-top: 10px;
}
nav > ul > li{
  display: inline-block;
  padding: 0 5px;
}
nav > ul > li > a{
  color: #fff;
}
nav > ul > li > a.btn{
  border: 1px solid #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 4px 8px;
}

Comments

[onhoric]

благодарю, но как избавится от промежутков между пунктов меню в который курсор вертикальным(для редактирования текста)

[onhoric]

jsbin.com/rezukela/15/edit

[Руслан]

@onhoric font-size:0; для ul и font-size:12px; для li

[denisko_t]

У Вас просто в коде лишнии пробелы. Поставьте все елементы списка в строку без лишних пробелов.

[denisko_t]

Ну и для надежности можете дописать nav > ul {margin: 10px 0 0; float right;} вместо nav>ul{float: right; margin-top: 10px;}

[denisko_t]

Незачто

[onhoric]

спасибо) я был слеп, но я прозрел)

Answer 2

[Виталий Желтяков]

Замечания следующие:
- Повторяется font-size. font-size устанавливается для body в абсолютных значениях, а для всех дочерних элементов в em.
- position:relative вообще уберите. position:relative + left (или другая сторона) - плохо, т.к. делает элемент зависимым от вытеснения.
- Для позиционирования float-элементов используйте margin.
- Для резинового сайта используйте относительные размеры body с заданными max и min значениями, а дочерние контейнеры старайтесь делать плавающими.