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

Сервис обмена электронных валют

Партнерская программа Kredov

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

#1 dragon666999

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

Отправлено 04 Февраль 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 Февраль 2013 - 22:45

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

#3 dragon666999

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

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

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

#4 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

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

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


http://jsfiddle.net/T6Cw3/

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


#5 yury

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

Отправлено 05 Февраль 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 Февраль 2013 - 15:16

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

yury

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

#7 yury

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

Отправлено 05 Февраль 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 Февраль 2013 - 16:22

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

#9 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

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

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

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


#10 dragon666999

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

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

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

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

robot

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


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