В чем различие .header-outer, .header-inner и тд?

Модератор: Fleelancer

<<

Celsus

Аватара пользователя

Автор темы

Сообщения: 45

Зарегистрирован: 02 дек 2011, 14:29

Благодарил (а): 15 раз.
Поблагодарили: 3 раз.

Сообщение 06 дек 2011, 13:41

В чем различие .header-outer, .header-inner и тд?

В какой div header'а помещать картинку и текст?
Какие блоки можно убрать? Для чего столько блоков?

Неясно отличие div.content-outer от div.content-inner. При перемещении настроек css из одного класса в другой, визуальной разницы нет.

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

Добавлено спустя 7 минут 50 секунд:
Забыл написать изначальный код
CSS:
  Код:
/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;

  color: $(header.text.color);

  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}

.Header img, .Header #header-inner {
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: $(header.padding);
  padding-right: $(header.padding);
}

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 130%;
}


HTML:
  Код:
<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(заголовок)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>


1. Верно ли, что нужно вставлять картинку заголовка сюда:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(заголовок)' type='Header'/>
</b:section>

И, соответственно, редактировать class или ID header (.header, #header)?

2. <div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'> какое назначение этих блоков, например? Если так, что для чего нужны header-outer и header-inner и остальные блоки? Особенно вводит в ступор <div class='fauxborder-right header-fauxborder-right'/>.

3. $(header.border.radius) - подобные значения это первоначальные значения по умолчанию, указанные в самом начале страницы кода Variable definitions?
<<

sv9t

Аватара пользователя

Сообщения: 727

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 06 дек 2011, 18:08

Re: В чем различие .header-outer, .header-inner и тд?

Celsus писал(а):В какой div header'а помещать картинку и текст?

надо не в div а в background-image. И градиент убери с шапки.

Celsus писал(а):Какие блоки можно убрать? Для чего столько блоков?
Неясно отличие div.content-outer от div.content-inner. При перемещении настроек css из одного класса в другой, визуальной разницы нет.

Celsus писал(а):2. <div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'> какое назначение этих блоков, например? Если так, что для чего нужны header-outer и header-inner и остальные блоки? Особенно вводит в ступор <div class='fauxborder-right header-fauxborder-right'/>.

А ты попробуй удали и увидишь), ты ж урл блога не даешь. Вот тебе и пальцем в небо - что то связано с отображением шапки блога.
Celsus писал(а):3. $(header.border.radius) - подобные значения это первоначальные значения по умолчанию, указанные в самом начале страницы кода Variable definitions?

Да.
Последний раз редактировалось sv9t 06 дек 2011, 18:08, всего редактировалось 1 раз.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Celsus

Аватара пользователя

Автор темы

Сообщения: 45

Зарегистрирован: 02 дек 2011, 14:29

Благодарил (а): 15 раз.
Поблагодарили: 3 раз.

Сообщение 06 дек 2011, 22:50

Re: В чем различие .header-outer, .header-inner и тд?

В шаблоне Венецианское окно (№3) (Дизайн основной части№1 Дизайн нижнего колонтитула№2) пытаюсь сделать как на рисунке:
http://linkme.ufanet.ru/images/2a07081e ... 3715af.png

Голубые рамочки - это виджеты: Значок и панель навигации
Желтая - это верхняя часть, div, которую хочу создать для header и горизонтального меню
Розовая - это горизонтальное меню, есть мысль сделать его на месте скрытого (не добавленного) виджета, расположенного между header и контентом. Только где и как в коде отыскать этот скрытый гаджет и куда вставить div с меню...
Фиолетовая - это нижняя часть, которая содержит контент, еще что-нибудь, и, footer. Хотя, может, footer вынести за пределы нижней фиолетовой части и оформить отдельно, но пока не получается даже сделать первое разделение.
Зеленая - это контент post-outer (посты).

Сложность - где какие div ставить.

Примерно так чтобы получилось. Но шаблон испорченный. http://ninjaturtles-donatello.blogspot.com/
Вот тестовый, готовый к разделению на 2 или 3 части шаблон: http://7698757949989.blogspot.com/
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 07 дек 2011, 01:12

Re: В чем различие .header-outer, .header-inner и тд?

Нет ничего хуже, чем взять сложный шаблон, где чёрт ногу сломит, и пытаться его "упростить".
Тогда как легче найти самый примитивный одноколоночный шаблон и доставлять в него необходимое по мере надобности.
По крайней мере в промежутках между конструированиями можно вести блог.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 07 дек 2011, 16:14

Re: В чем различие .header-outer, .header-inner и тд?

Celsus писал(а):Какие блоки можно убрать? Для чего столько блоков?

Столько блоков для того, чтобы вы в Дизайнере шаблонов могли выбрать по своему вкусу с какой стороны и в каком количестве делать виджеты.
Кто-то хочет только с одной стороны виджеты, кто-то с двух, вот для всего этого и делается универсальный шаблон.

Celsus писал(а):1. Верно ли, что нужно вставлять картинку заголовка сюда:
  Код:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(заголовок)' type='Header'/>
</b:section>


Это код виджета заголовка, но картинка вставляется не в шаблон, т.е. не именно в это место, а в виджет, который находится на вкладке Элементы страницы.

Celsus писал(а):3. $(header.border.radius) - подобные значения это первоначальные значения по умолчанию, указанные в самом начале страницы кода Variable definitions?

Да.
<<

Celsus

Аватара пользователя

Автор темы

Сообщения: 45

Зарегистрирован: 02 дек 2011, 14:29

Благодарил (а): 15 раз.
Поблагодарили: 3 раз.

Сообщение 08 дек 2011, 20:39

Re: В чем различие .header-outer, .header-inner и тд?

Все получилось, но пришлось крайне долго (мягко говоря) всматриваться в код (в том числе при помощи встроенного в Chrome инструмента "Посмотреть код элемента" и Notepad++) и пробовать найти, где что открывается и закрывается. Но получилось только после того, как стало ясно, что где закрывается.
Непонятно, почему Notepad++ при нажатии на <div class='content-outer'> не подсвечивает начало и конец тега. Но, если нажать на его </div>, то подсвечивает. То же самое с <div class='content'> и некоторыми другими тегами - чтобы узнать, где они закрываются, надо тыкать на их </div>.

.content-outer разделил на две части. На всякий случай во вторую часть перенес <div class='fauxborder-left content-fauxborder-left'> и <div class='content-inner'>

Вписал после блока (div) горизонтального меню и перед <div class='main-outer'>

  Код:
</div>
   </div>
   </div>
   
   <div class='content-outer2'>
   <div class='fauxborder-left header-fauxborder-left'>
        <div class='content-inner'>


class второй части? как видно, назвал content-outer2

Добавил .content-outer2 сюда, иначе она была прилеплена к левому краю браузера.
  Код:
<![CDATA[
      body {
        min-width: $(content.width);
      }

      .content-outer, .content-outer2, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

Теперь Header и горизонтальное меню в верхней части, а сообщения и контент в нижней. К счастью, в элементах страницы все ровно (в прошлый раз было криво).

Вопрос отличия inner и outer остался, предназначение каждого из них неизвестно.

Куда лучше вставить изображение для header? В правило #header?
Имеет значение, с чем работать, с header inner или header-outer или #header?

Вот результат: /go.php?http://7698757949989.blogspot.com
Почему-то в Internet Explorer 9 не работает закругленность для content-outer'ов и кнопок. А также не работает градиент для кнопок. А еще нет эффекта нажатия кнопок. Может из-за отсутствие поддержки аппаратного ускорения встроенным видеоадаптером, читал об этом на одном английском блоге, если ничего не спутал?
Последний раз редактировалось Celsus 19 дек 2011, 12:25, всего редактировалось 4 раз(а).
<<

sv9t

Аватара пользователя

Сообщения: 727

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 08 дек 2011, 22:47

Re: В чем различие .header-outer, .header-inner и тд?

Celsus писал(а):Вопрос отличия inner и outer остался, предназначение каждого из них неизвестно.

конечно блог у тебя заморочен, как в нем разберешься до конца можешь считать себя профи). outer и outer2 - это два блока верх и низ, ты их как раз разъединил. а вот inner это дивы внутри них, и кстати, многие не работают, но присутствуют.

Celsus писал(а):Куда лучше вставить изображение для header? В правило #header?
Имеет значение, с чем работать, с header inner или header-outer или #header?

Я так понял с header-outer, а вообще поэкспериментируй. И скачай дополнение для FF firebug, оно лучше chroma в плане просмотра, нажмешь на стрелку в панели - сразу поймешь и inner и outer. хотя, имхо, в chrom мне нравится что показывает сразу все битые ссылки.
Последний раз редактировалось sv9t 08 дек 2011, 22:48, всего редактировалось 1 раз.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Celsus

Аватара пользователя

Автор темы

Сообщения: 45

Зарегистрирован: 02 дек 2011, 14:29

Благодарил (а): 15 раз.
Поблагодарили: 3 раз.

Сообщение 17 дек 2011, 22:26

Re: В чем различие .header-outer, .header-inner и тд?

sv9t писал(а):
Celsus писал(а):а вообще поэкспериментируй.

Этим занимаюсь, хотя, уверен, есть где-то (скорее всего, на английском) документация или объяснение по поводу отличия -outer от -inner. В гугле пока не нашел.

В данный момент (пока не буду менять) можно увидеть по ссылке в моем профиле, как Internet Explorer 9 обрабатывает content-outer и content-inner.
Настройки стилей одинаковые (за исключением того, что в content-inner background = transparent, но я его делал таким же, какой сейчас у content-outer, разницы не было).

Так как разделил content-inner на 2 части, то перенес стили из content-outer, округлости не перенеслись.
Затем прописал в CSS правила, удалив подобные: $(content.background.color) и т.п. Вообще удалил блок из /* Variable definitions

  Код:
<Variable name="content.margin" description="Content Margin Top" type="length" default="20px" value="30px"/>
   <Variable name="content.padding" description="Content Padding" type="length" default="0" value="25px"/>
   <Variable name="content.background" description="Content Background" type="background"
       default="transparent none repeat scroll top left" value="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/>
   <Variable name="content.border.radius" description="Content Border Radius" type="length" default="0" value="15px"/>
   <Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="0" value="3px"/>

Предназначение /* Variable definitions осталось загадкой. Зачем оно, если есть правила CSS ?

Кстати, пробовал вообще удалять /* Variable definitions, ничего плохого не случилось (конечно, пришлось перенести оттуда в CSS все правила, иначе бы шаблон изменился бы визуально до неузнаваемости)

Остается неизвестным, почему Internet Explorer не хочет округлять углы в content-inner

Прилепил скриншот:

PS Верхняя часть это Content-inner, затем рядом идет див tabs-outer (виджет с меню), затем рядом нижняя часть content-inner2.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось Celsus 17 дек 2011, 22:40, всего редактировалось 2 раз(а).
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 19 дек 2011, 11:52

Re: В чем различие .header-outer, .header-inner и тд?

Celsus писал(а):Предназначение /* Variable definitions осталось загадкой. Зачем оно, если есть правила CSS ?

Никакой загадки в этом нет. Шаблоны Blogger - это смесь HTML и XML, все вместе образует XHTML. Если вы почитаете, что такое XML, то все встанет на свои места. Это язык гипертекстовой разметки, который позволяет создавать свои собственные теги. Так вот разработчики создали собственные теги, чтобы определить стили по умолчанию. Вопрос: Зачем так сделали? Думаю, это связано с дизайнером шаблонов. Именно по этим стилям можно менять внешний стиль своего блога, не зная CSS, через внешний интерфейс.

Вернуться в Вопросы от новичков

Кто сейчас на конференции

Зарегистрированные пользователи: Google Feedfetcher, Yandex [Bot]

cron
Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo