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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

    Ixman (o5cat.ru)
    Очков активности: 346.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 165 0 тем, 22 сообщения, 5 баллов репутации

  • Фотография Андрей WPMasterKZ
    #3

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 153 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #4

    OlgaGetman
    Очков активности: 111 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #5

    magnet (rbfxdirect.com)
    Очков активности: 67.5 0 тем, 15 сообщений, 3 балла репутации

  • Фотография Cheaplinks
    #6

    Cheaplinks (cheaplinks.pro)
    Очков активности: 63 0 тем, 21 сообщение, 2 балла репутации

  • Фотография Mandarin
    #7

    Mandarin
    Очков активности: 61.5 0 тем, 41 сообщение, 1 балл репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография Ilya74
    #9

    Ilya74
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 49.5 0 тем, 11 сообщений, 3 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 22.01.2019
Топ 5 участников по репутации


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

#1 dragon666999

dragon666999
  • Неактивные
  • 11 сообщений
  • Репутация: 0
0

Отправлено 04 February 2013 - 22:07

Ребят привет, тут такая проблема, от которой я не могу избавится, начал писать сайт, до этого написал интернет магазин, но шаблон сделан на ТАБЛИЦЕ, и потом уже внутри дивы которые бегают сверху вниз по мере заполнения в столбцах таблицы, на таблицах делал так как не силен в КСС, теперь мне необходимо сделать сайт на ДИВАХ, либо на новых тегах которые добавили в хтмл5, это section и aside, теперь самая главная задача в чем, я выложил рисунок буду по нему обьяснять, вот мне нужно сделать ПРАВЫЙ и ЛЕВЫЙ САЙД Бар на теге ASIDE. сами знаете облегчает оптимизацию, а центральный блок плевать как, на дивах либо section-ом. Задача в том что ШАБЛОН должен быть резиновый, тоесть ПРАВЫЙ И ЛЕВЫЙ САЙД Бар должны быть фиксированны 200px , а вот центральный резиновый , чтобы когда экран с 1920 уменьшался до 1024, ПРАВЫЙ И ЛЕВЫЙ САЙД БАР оставались НЕИЗМЕННЫ а ЦЕНТРАЛЬНЫЙ БЛОК вместе с контентом СУЖАлся на оставшееся место, короче это стандартный запрос любого польователя, но на таблицах это было сделать расплюнуть, но когда дело дошло до создания САЙТА на БЛОКАХ то у меня никак не получается, я СТАВЛЮ левому сайдбару на теге <ASIDE> ABSOLUT и ширину 200, а вот чтобы не делал с ПРАВЫМ САЙДБАРОМ и ЦЕНТРАЛЬНЫЙ БЛОКОМ, либо правый сайд бар УХОДИТ вниз либо ЦЕНТРальный блок на всю ширину растягивается на максимум и закрывает правый сайд бар, ПОМОГАЕТ только установка ФИКСИРОВАННЫЙ величины центральному блоку путем прописки в КССе - position: absolute и width, но он тогда не сжимается при уменьшении разрешения,а если делаешь Relative position то правый САЙД бар улетает вниз либо ЦЕНТРАЛЬНЫЙ блок становится поверх ПРАВОГО САЙД БАРА РЕБЯТ подскажите пожалуйста как сделать такой стандартный случай но только на тегах DIV SECTION ASIDE. чтобы сайд бары не сжимались и были фиксированые как на рисунке а центральный блок тупо сжимался и правый сайд бар никуда не улетал и не затмевал центральный блок, я надеюсь на вашу помощь, если чтото непонятно в написанно могу тут же подробнее обьяснить...

Прикрепленные изображения

  • Безымянный.jpg

 

 

  • 0

#2 PhotoShopRND

PhotoShopRND
  • Неактивные
  • 209 сообщений
  • Репутация: 53

Отправлено 04 February 2013 - 22:45

Может генератором воспользуетесь? http://csstemplater.com Тут вам и резина и дерево...
  • 0

#3 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 05 February 2013 - 10:08

Спасибо за подсказку, но я им как раз таки изначально и создавал, но потом пришло код поправить а назад вернуть не смог, а поправить пришлось потому что я хотел чтобы ЦЕНТРальный блок и ПРАВЫЙ САЙД Бар были другого цвета нежели бэкграунд и самое главное чтобы закругленные края, а на ТЕГ ASIDE и на тег SECTION border-radius не применяется никак....поэтому пришлось изменить вкоде ASIDE на дивы и тогда понеслось поехало СЬЕЗЖАние ДИВОВ вразные стороны, тогда вопрос, как сделать у ASIDE и SECTION тегов, закругление краев , цвет получается , а вот закругление как сделать?? на ASIDE оно не работает
  • 0

#4 Symphony

Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 05 February 2013 - 11:50

самое главное чтобы закругленные края, а на ТЕГ ASIDE и на тег SECTION border-radius не применяется никак....поэтому пришлось изменить вкоде ASIDE на дивы


http://jsfiddle.net/T6Cw3/

И еще к этому, можно было в секшн и эсайд всадить див, которому задаешь цвет и округление
  • 0


#5 yury

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

Отправлено 05 February 2013 - 12:50

dragon666999, как-то так
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>tst</title>
<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
*{
  margin: 0;
  padding: 0;
  text-align: left;
}
header, section, footer, aside{
  display: block;
}
body{
  min-width: 600px;
}
header .txt{
  background:#fc0;
  color:#fff;
}
footer .txt{
  background:#0cc;
  color:#fff;
}
section.warp{
  overflow: hidden;
  zoom: 1;
}
section.content{
  margin: 0 200px;
}
section.content .txt{
  background:#0c0;
  color:#fff;
}
aside{
  width: 200px;
}
aside.left{
  float: left;
}
aside.right{
  float: right;
}
.txt{
  border: 0;
  border-radius: 10px;
  padding: 20px;
}
aside.left .txt{
  background:#c00;
  color:#fff;
}
aside.right .txt{
  background:#00c;
  color:#fff;
}
</style>
</head>
<body>
<header><div class="txt">
  Header
</div></header>
<section class="warp">
  <aside class="left"><div class="txt">
    left
  </div></aside>
  <aside class="right"><div class="txt">
    right
  </div></aside>
  <section class="content"><div class="txt">
    Content
  </div></section>
</section>
<footer><div class="txt">
  Footer
</div></footer>
</body>
</html>
Внимание: не допилено для ИЕ6.
  • 2

#6 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 05 February 2013 - 15:16

спасибо вам огромное

yury

вы меня очень выручили) то что я и хотел) оказывается всей проблемой было просто ПОМЕСТИТЬ в каждый САЙД БАР внутрь тегов ASIDE еще по ДИВУ чтобы класс Border-radius воспринимались??? просто тут вопрос напрашивается, для поисковых систем добавление ДИВОВ внутрь ASIDE никак не повлияет? просто теги ASIDE придуманы для маршрутизации ПС и облегчения оценки страниц
  • 0

#7 yury

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

Отправлено 05 February 2013 - 16:18

вы меня очень выручили) то что я и хотел)

Пользуйтесь на здоровье

оказывается всей проблемой было просто ПОМЕСТИТЬ в каждый САЙД БАР внутрь тегов ASIDE еще по ДИВУ чтобы класс Border-radius воспринимались???

Нет. Достаточно выдать "новым" тэгам из HTML5 блочность (display: block; или float: left; и т.п.):
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>tst</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
*{
  margin: 0;
  padding: 0;
  text-align: left;
}
section{
  display: block;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  background:#00c;
  color:#fff;
}
aside.left{
  float: left;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  background:#c00;
  color:#fff;
}
</style>
</head>
<body>
<section>
  Section
</section>
<aside class="left">
  left
</aside>
</body>
</html>
Ну и ИЕшкам древнее 9й рассказать, что такие тэги бывают:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

просто тут вопрос напрашивается, для поисковых систем добавление ДИВОВ внутрь ASIDE никак не повлияет? просто теги ASIDE придуманы для маршрутизации ПС и облегчения оценки страниц

Влиять не должно: тэги aside остались, а как отформатирована их начинка это уже дело десятое.

Дивы внутрь section, aside и прочая были помещены, чтобы отделить форматирование начинки от структурирования документа и еще это иногда помогает решить некоторые проблемы совместимости со старыми браузерами. Можно конечно и без них обойтись, просто так удобнее.
  • 1

#8 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 05 February 2013 - 16:22

спасибо за информацию, я просто начал писать очень насыщенный сайт, а на Joomla и других КМС не захотел писать, мне они просто не нравятся, да и там не замутить того что иногда хочется, если возникнут вопросы я к вас обращусь еще)
  • 0

#9 Symphony

Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 05 February 2013 - 16:36

оказывается всей проблемой было просто ПОМЕСТИТЬ в каждый САЙД БАР внутрь тегов ASIDE еще по ДИВУ чтобы класс Border-radius воспринимались???

а я вам перед этим не это написал?
  • 1


#10 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

Отправлено 05 February 2013 - 17:00

еще такой вопрос к вам, вот я сейчас использую то что вы предложили, как в этом коде сделать так чтобы ПРАВЫЙ САЙДБАР и ЦЕНТРАЛЬНЫЙ блок имели по окантовке БОРДЕР толщиной 3px и другим цветом, отличном от цвета всего блока, я дописываю border-width и border-color к .txt в КСС файле у вас, но ничего не происходит. окантовка не меняет цвет и не УТОлщается

А все ребят, я сам разобрался) я забыл указать стиль бордера)) прошу прощения)
  • 0

#11 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

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

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

#12 yury

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

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

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

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

#13 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

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

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

#14 yury

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

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

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

#15 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

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

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

#16 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

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

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

#17 yury

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

Отправлено 08 February 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 February 2013 - 12:07

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

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

#19 dragon666999

dragon666999
    Topic Starter
  • Неактивные
  • 11 сообщений
  • Репутация: 0

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

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

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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