Перейти к содержимому

Реферальная программа Мегаплана


Разработка шаблона для сайта

#11 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0
0

Отправлено 06 Февраль 2013 - 01:25

И еще вопрос ребят, между ЦЕНТРАЛЬНЫМ БЛОКОМ и ШАПКОЙ САЙТА (см. Рисунок) я вставил еще один ДИВ высотой 50px;, там будет ГОРИЗОНТАЛЬНЫЙ СПИСОК стандартный <ul><li><li></ul> состоящий из 6 элементов (т.е 6 теговl <li>) . А теперь вопрос, как сделать так чтобы эти элементы красиво расположились по всей ширине САЙТА , а то у меня они сейчас идут по порядку начиная слева направо, и если элементы короткие по названию то остается СПРАВА МЕСТО. Единственный вариант я думаю это сделать между тегами LI margin-right. то есть подобрать отступ так чтобы они на всю ширину расползлись, а если у меня с БД постоянно разные по длине элементы списка будут?? то MARGIN-ом уже не подгадаешь. Есть функция такая которая бы сама в зависимости от длины элементов списка растягивала или делала интервал так чтобы список был на всю ширину страницы...?
  • 0

#12 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 06 Февраль 2013 - 11:31

А теперь вопрос, как сделать так чтобы эти элементы красиво расположились по всей ширине САЙТА

dragon666999,
зависит от обстоятельств:
* если кол-во элементов меню фиксированное и меняться не будет, то я бы указал ширину тегов <li> в процентах (100/6=16.6%), это самый простой и короткий вариант
* а если хочется универсальный вариант на все случаи жизни: и чтоб кол-во элементов было произвольное и название влезало почти любой длины и даже многострочные названия можно было вклинить, то почитайте вот этот рецепт: Резиновое меню из блоков
  • 1

#13 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 07 Февраль 2013 - 21:54

Тоесть получается представить UL LI меню как строку и ячейки таблицы и сделать у тегов <А> ширину 1000px??? только непойму в вашем скинутом уроке, для чего делать каждой ссылке в КСС ширину 1000px?????
  • 0

#14 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 08 Февраль 2013 - 00:26

dragon666999,
вообще-то по ссылке не урок, а рецепт, хотя и снабженный рассуждениями автора(ов).
Так вот, в обсуждении 2 варианта рецепта один из авторов весьма подробно рассказывает для чего используется этот костыль-распорка в виде width:1000px;, почему это криво и как от него можно избавиться.
Так что у вас есть возможности
* либо не задумываясь воспользоваться готовым рецептом, ибо работает
* либо внимательно прочитать рецепт и вместе с авторами искать более правильные и семантичные способы верстки такого меню, ибо интересно
* либо задуматься на тему: а оно вам надо? Именно такое, растянутое меню. Есть подозрение, что растянутые на всю ширину резиновой страницы кнопки меню далеко не всегда будут хорошо смотреться. Мне так больше нравятся кнопки предсказуемо-фиксированной ширины, даже в случае резиновой страницы. И за примером далеко ходить не надо: см менюшку на этом форуме.
  • 0

#15 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 08 Февраль 2013 - 09:08

Не, в моем случае растянутое меню будет содержать ключевые навигационные элементы в количестве 6-7 штук, и менятся врядли будут, они тем более будут являтся элементов дизайна на сайте, поэтому мне нужно именно на всю ширину
  • 0

#16 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 08 Февраль 2013 - 09:47

И еще такой вопрос yury, после полученного резинового меню, мне нужно чтобы самый левый и самый правый элемент меню LI был с закругленными крями, я пробовал применить border-top-left-radius и border-bottom-left-radius для левого а аналогично для правого элемента меню чтобы закруглить КОНЦЫ МЕНЮ, но ничего не меняются, попробовал 1 и 6 элемент меню загнать в ДИВ и сделать бордер радиус, но тоже не видно результата, как сделать закругление правого и левого конца меню??
  • 0

#17 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 08 Февраль 2013 - 10:47

Не, в моем случае растянутое меню будет содержать ключевые навигационные элементы в количестве 6-7 штук, и менятся врядли будут, они тем более будут являтся элементов дизайна на сайте, поэтому мне нужно именно на всю ширину

Если меняться не будет, то проще и правильнее задать ширину пунктов меню в процентах и не извращаться с универсальностью:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>пример резинового меню из блоков</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
*{
  margin: 0;
  padding: 0;
}
nav{
  min-width: 700px;
  display: block;
}
nav ul {
  list-style: none;
  height: 50px;
}
nav ul li {
  float: left;
  width: 16.66%;
  text-align: center;
  height: 50px;
}
nav ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background: #600;
}
nav ul li a:hover {
  background: #900;
}
</style>
</head>
<body>
<nav>
  <ul>
   <li><a style="border-top-left-radius: 16px; border-bottom-left-radius: 16px;" href="#">Главная</a></li>
   <li><a href="#">Собираем</a></li>
   <li><a href="#">Без цензуры</a></li>
   <li><a href="#">Учимся</a></li>
   <li><a href="#">Учимся</a></li>
   <li><a style="border-top-right-radius: 16px; border-bottom-right-radius: 16px;" href="#">Справочники</a></li>
  </ul>
</nav>
</body>
</html>


как сделать закругление правого и левого конца меню??

Вроде все закругляется, если изменить в примере так:
<div class="main">
<nav>
<ol id="nav">
<li><a style="border-top-left-radius: 16px; border-bottom-left-radius: 16px;" href="#">Главная</a></li>
<li><a href="#">Собираем</a></li>
<li><a href="#">Без цензуры чхать на цензуру</a></li>
<li><a href="#">Учимся</a></li>
<li><a style="border-top-right-radius: 16px; border-bottom-right-radius: 16px;" href="#">Справочники</a></li>
</ol>
</nav>
</div>

  • 0

#18 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 08 Февраль 2013 - 12:07

Тут вот проблемка почему то, у меня в левом сайдабаре установлено 200px ширина, а когда навожу мышкой на текст в ЦЕНТРАЛЬНОм блоке , то загорается наведение на ЛЕВОМ САЙДБАРЕ, то есть такое чувство как будет ЛЕВЫЙ САЙДБАР у меня на всю ширину РАСТЯНУЛСЯ, что это может быть?

На приложенном СКРИНЕ ЧЕРНАЯ СТРЕЛКА это положение КУРСОРА, и как видите ЭЛЕМЕНТ ПРАВОГО МЕНю загорается красным цветом как будто на него навели, почему так происходит?? ведь левое меню привязно FLOAT LEFT + WIDTH стоит 200px
Изображение
  • 0

#19 dragon666999

dragon666999
    Topic Starter
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 08 Февраль 2013 - 12:23

Прошу прощения за небольшую тупость) костыль просто который я вставил, применил для всех тегов А ) поправил) все работает) поставьте мне плиз + репутацию а то красным не айс)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru