X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Разработка шаблона для сайта
dragon666999
dragon666999
Topic Starter сообщение 4.2.2013, 23:07; Ответить: dragon666999
Сообщение #1


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


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


--------------------
Размещу статью тут: Конструктор сайтов okis или тут: Строительство и ремонт ну или тут: Туризм
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dragon666999
dragon666999
Topic Starter сообщение 5.2.2013, 11:08; Ответить: dragon666999
Сообщение #3


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


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


http://jsfiddle.net/T6Cw3/

И еще к этому, можно было в секшн и эсайд всадить див, которому задаешь цвет и округление
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 5.2.2013, 13:50; Ответить: yury_mw
Сообщение #5


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.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dragon666999
dragon666999
Topic Starter сообщение 5.2.2013, 16:16; Ответить: dragon666999
Сообщение #6


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


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

Пользуйтесь на здоровье
оказывается всей проблемой было просто ПОМЕСТИТЬ в каждый САЙД БАР внутрь тегов 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 и прочая были помещены, чтобы отделить форматирование начинки от структурирования документа и еще это иногда помогает решить некоторые проблемы совместимости со старыми браузерами. Можно конечно и без них обойтись, просто так удобнее.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dragon666999
dragon666999
Topic Starter сообщение 5.2.2013, 17:22; Ответить: dragon666999
Сообщение #8


спасибо за информацию, я просто начал писать очень насыщенный сайт, а на Joomla и других КМС не захотел писать, мне они просто не нравятся, да и там не замутить того что иногда хочется, если возникнут вопросы я к вас обращусь еще)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Symphony
Symphony
сообщение 5.2.2013, 17:36; Ответить: Symphony
Сообщение #9


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

а я вам перед этим не это написал?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dragon666999
dragon666999
Topic Starter сообщение 5.2.2013, 18:00; Ответить: dragon666999
Сообщение #10


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

А все ребят, я сам разобрался) я забыл указать стиль бордера)) прошу прощения)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29158 Вчера, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6360 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1351 26.3.2024, 21:43
автор: c4p1t4l15t
Горячая тема (нет новых ответов) Делаю полностью уникальный дизайн для сайтов!
46 AlexDIZ 93430 26.3.2024, 20:03
автор: AlexDIZ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1116 26.3.2024, 14:13
автор: knezevolk


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:10
Дизайн