17:15 

Основы Diary CSS для начинающих и продвинутых. Часть 2.

Совершенству эволюция не нужна.
Перед вами - вторая часть руководства по diary CSS под моим авторством и редакцией Рёцке. Здесь вы найдете информацию о поэлементном составе страницы вашего дневника и конкретных приемах работы с CSS.

     6. Элементы дизайна дневника.


     Со вводной информацией покончено, перейдем к делу. Начнем с того, что рассмотрим основные элементы, присутствующие на странице вашего дневника. Их теги должны быть прописаны так, как здесь, с соблюдением заглавных и строчных букв!
     Во-первых, body. Это само «тело» страницы – ее основное поле, она сама. На ней расположены все остальные объекты. И шрифты с цветами, которые вы прописываете стандартными средствами оформления дневника (без КСС) выполняются именно для body. Т.е., если вы ставите для тела фон черного цвета, то этот фон будет как бы для всего дневника в целом, остальные элементы будут расположены на этом фоне.
     Body имеет различные селекторы для разных страниц дневника - главной, комментариев, избранного и т.п. - селектор #Journal для главной страницы и классы:

.left – когда меню располагается слева от постов
.right – меню справа.
.journal_list
.block_design – если дизайн блочный.

     Эти классы не обязательно используются на странице, поэтому в начале работы лучше их не трогать.
     Другие элементы представляют собой таблицы и блоки. Что есть таблица (блок) – это прямоугольник заданной ширины и высоты, имеющий свойства и внутри которого можно размещать другие элементы и/или блоки, текст, фон, картинки.
     #wrapper – основной элемент дизайна – общий блок, на котором (внутри которого) расположены все остальные. Другие элементы позиционируются и процентируются относительно этого, являясь дочерними.
     #page-c – блок, на котором фактически размещаются сообщения дневника. Он служит главным блоком записей.
     #page-t – блок, дочерний к page-c, на нем размещаются посты. Находясь внутри page-c, этот блок перемещается и меняется одновременно с родительским, поэтому если вы хотите использовать возможности обоих блоков, то прописывайте для page-t отдельные свойства.
     #side – блок меню. На нем находятся, во-первых, название дневника (ссылка на его адрес), фотография и логин пользователя, а во-вторых – ссылки на элементы меню (Мой дневник, Настройки и т.п.) и баннер статистики от li.ru.
     #extratop – отключенный по умолчанию элемент, который расположен над блоками page-c и side, но внутри wrapper’а. Основное его предназначение – это «шапка» страницы, в которой можно разместить картинку или вынести пункты меню.
     #extrabottom – отключенный по умолчанию элемент, который расположен ниже блоков записи и меню, но также внутри блока wrapper. Это таблица, у которой можно задать фон в виде картинки, дополнив свой дизайн нижним «основанием».
     #epigraph – это эпиграф дневника.
     #post0 – это содержание эпиграфа, оно находится внутри #epigraph’а

     Элементы меню (#side). Фактически это всё ссылки, но для каждого элемента можно прописать отдельные свойства. Список таких элементов собирали еще Tex, Zolotzzze=) и другие, я же помещу его сюда в полном виде отдельно.

     Элементы колонки меню:
     Группировки элементов:

     У каждой группировки имеется класс .menuSection , описывающий ее свойства. Редактируйте свойства этого класса, чтобы менять оформление для всех группировок сразу.
     #thisDiaryLinks – поле ссылок на чужой дневник (Избранное автора, Цитатник автора, Ссылки автора и т.д.)
     #myDiaryLinks – поле ссылок на ваш дневник (Мой дневник, Новая запись, U-mail и т.д.)
     #YaSearch - Поиск по дневнику
     #thisDiaryOwner – поле ссылок, относящихся к автору (Написать на Умайл, поднять в списке)
     #globalLinks – поле глобальных ссылок (Главная страница, Каталог сообществ, Случайный дневник)
     #myLinks – поле «Мои ссылки»
     #Stats – поле, где расположен баннер статистики от li.ru
     #pchs – поле постоянных читателей (если отображаете его через Опции)
     #lastComments – поле последних комментариев (если отображаете)

     Сами элементы:
     #authorFav - Избранное автора
     #authorQuot - Цитатник автора
     #authorLiks - Ссылки автора
     #authorAlbum - Альбом автора
     #authorRSS - RSS автора
     #writeToAuthor - Написать на U-mail
     #subscribeEmail - Подписаться на дневник
     #unsubscribeEmail - Отписаться от дневника
     #myNotepadLink или #notepad - Блокнот
     #addToFav - Добавить в избранное
     #delFromFav - Удалить из избранного
     #postsCalendar - Календарь записей
     #albumLink - Альбом
     #rssLink - RSS
     #joinThisComunity - Вступить в сообщество
     #writeThisComunity - Написать в сообщество
     #comunityFav - Избранное сообщества
     #leaveThisComunity - Покинуть сообщество
     #headlineList - Список заголовков
     #tagslistlink - Темы записей
     #myDiaryLink - Мой дневник
     #writeThisDiary - Новая запись
     #myDraftLink - Черновики
     #umailLink - U-mail
     #myFavLink - Избранное
     #myQuotLink - Цитатник
     #discussionLink - Дискуссии
     #myLinksLink - Мои ссылки
     #myProfileLink - Мой профиль
     #optionsLink - Настройки
     #photolibLink - Библиотека изображений
     #upInChart - Поднять в списке
     #allDiaryLink - Все дневники
     #mainpageLink - Главная страница
     #favListLink - Список избранных
     #pchListLink - Список ПЧ
     #communityCatalogueLink - Каталог сообществ
     #myCommunitiesLink - Мои сообщества
     #myCommunityLink - Моe сообществo
     #randomDiaryLink - Случайный дневник
     #diarySpiritLink - @дневники: изнутри
     #diarySupportLink - Техподдержка
     #paySupportLink - Техподдержка платных
     #faqLink - FAQ
     #iAmQuit - Выход
     #Stats - Моя статистика
     #comments - Комментарии +
     #subscribe - Подписаться
     #unsubscribe - Отписаться
     #addToQuote - Добавить в цитатник
     #quote_post - написать у себя (это под записью)
     #quote_comment - написать у себя
     #prevPostLink - предыдущая запись
     #nextPostLink - следующая запись
     #urlLink - URL
     #sortOrder - кнопка Сортировать записи
     .editPostLink - кнопка "Редактировать запись/эпиграф/коммент"
     .delPostLink - кнопка "Удалить запись/коммент"
     #myDraftLink - Черновик
     #thisDiaryPhoto - Фото владельца дневника

     Цитата прописывается классом span.quote_text, для которого также можно задать свойства стандартными методами. Если вы хотите оформить цитаты, сделанные в постах или комментариях, несколько иначе, чем обычный наклонный текст, то воспользуйтесь этим классом: span.quote_text {свойства}

     Оффтопик - классом .eot

     Перейдем к описанию более сложных элементов.
     #div_img – Тег отображения картинок, которые вы выкладываете в постах. ( ..)
     #div_img:hover – Оформление картинок, когда курсор мыши находится на ними.
     #authorName – Имя (логин) автора, располагается изначально под фотографией.
     #side h1 A – ссылка на ваш дневник, располагается над фотографией и отображает название дневника.
     #topNav – для табличного дизайна это поле, где размещаются ссылки «Главная», «Все дневники», «Случайный дневник» и т.д. наверху страницы. Альтернативное меню.
     #topNavLinks – сами ссылки в этом поле.
     div.clear – этот служебный класс используется для разделения постов и других элементов между собой. Располагается под всеми постами и эпиграфом и в случае чего с ним можно поиграться, но осторожно)
     #thisDiaryInfo – Блок, в котором располагается название дневника, фотография и имя автора, то есть #side h1 A, #thisDiaryPhoto и #authorName
     #postsArea – блок внутри page-t, в котором располагаются посты. К этому блоку применяется класс .bordered
     Собственно, что есть .bordered? Это класс, который применяется к нескольким элементам страницы – меню и постам. Описывает он область, внутри которой меню и посты находятся, поэтому, изменяя его свойства, вы влияете на отображение и того и другого.
     .order_button – класс описания области над постами, где располагаются кнопки сортировки. Используется для div (div.header order_button)
     #sortOrder – описывает область, в которой находятся кнопки сортировки записей. Эта область совсем небольшая и находится прямо вокруг самих кнопок.
     #sortFromBegin – кнопка сортировки записей в порядке следования
     #sortFromEnd – кнопка сортировки записей в обратном порядке
     #sortFromLastComment – кнопка сортировки по последним комментариям.
     .singlePost – класс, описывающий стиль для одиночного поста в вашем дневнике. Сверху – заголовок, в середине текст записи, внизу ссылки на URL, комментарии, цитатник и подписку на пост.
     .countFirst и .countSecond – классы, применяемые для оформления постов «через раз». По умолчанию, если взглянуть на ваши записи, то видно что цвета записей немного различаются – то один цвет, то другой поочередно. Так вот, это реализовано через данные классы – одному посту дается один класс, следующему – второй, потом снова первый и так далее.
     .first – класс, описывающий последний сделанный вами пост.
     .countFirstDate, .countSecondDate, .postDate, .uline – классы, относящиеся к описанию поля, где расположена дата написания поста.
     .header – класс описания заголовка постов и эпиграфа.
     .postTitle – класс описания заголовка поста.
     .commentAuthor – описывает блок информации о человеке, оставившем комментарий к записи. Этот блок содержит:
     .avatar – класс описания аватара.
     .sign – класс описания подписи под аватаром.
     #commentsArea – блок комментариев к записи. Открывается, когда вы нажимаете на «комментировать» и содержит, естественно, комментарии.
     .postContent – класс описания содержимого поста (его текста и прочего)
     .postInner – содержимое поста.
     .paragraph – текстовое содержимое поста. Все эти классы описывают содержимое записи, но .postContent применяется для общего описания, а .paragraph – уже для самого конкретизированного.
     .atMusic – описывает поле @Музыка
     .atMood – описывает поле @Настроение.
     .atTag – описывает поле @Темы

     Элементы поста:
     Предыдущая запись - .prevPostLink
     Следующая запись - .nextPostLink
     u-mail - .umail
     E-mail - .email
     Дневник - .diary
     Профиль - .profile
     Добавить в цитатник - .addToQuote
     Подписаться - .subscribe
     Комментарии - .comments
     Написать у себя - .quote_post

     .postLinksBackg – Класс описания блока ссылок внизу поста (комментировать, подписаться и т.п.)
     .postLinks – описание ссылок Комментировать, Подписаться и В цитатник.
     .urlLink – описание ссылки на URL.
     #pageBar и класс .pageBar описывают блок под всеми постами, где расположены ссылки на страницы дневника (номера страниц, «следующая» и т.п.)
     .pages_str – описывает ссылки на предыдущую и следующую страницы.

     Итак, практически со всеми элементами и классами страницы мы познакомились, теперь можно для каждого из них задавать свойства в CSS.
     Поэкспериментируйте – закройте дневник на время и меняйте свойства различных элементов и классов, потом сохраняйте и смотрите, что получается в итоге. Так вы представите себе картину расположения блоков дневника подробнее и поймете, как вам лучше действовать в плане изменения их оформления.

     7. Основные методы работы.


     В этой главе речь идет о тех приемах, которые обычно используются для редактирования оформления дневника в CSS. Также рассмотрим главные принципы работы с оформлением, использующим CSS.

     Самое главное – значения ширины, высоты, толщины и прочие, связанные с измерениями, измеряются в пикселях, и после каждого значения нужно писать px, например
    
#side {width: 300px; border: 2px solid black;}

     Если нужно указать величины в процентном соотношении, то пишем %

     Второе – краткий курс английского.
Top – верх
Bottom – низ
Left – лево
Right – право.
Center - центр.

     Третьеотступы. Есть два вида свойств – margin и padding. Обязательно и подробно читаем здесь - htmlbook.ru/css/margin.html htmlbook.ru/css/padding.html
     Margin задает отступ между краем родительского элемента и текущего.
     Padding – внутренний отступ между краем текущего элемента и его содержимого.
     Большинство проблем с некорректным отображением совместного расположения элементов заключается в том, что у этих объектов проставлены отступы. Выставляйте margin:0 и padding:0 , чтобы избежать таких проблем.
     Для начала неплохо бы убрать все отступы в body, чтобы не было расстояния между краями экрана и элементами
body {margin:0; padding:0;}
, это позволит избежать некоторых нестыковок в отображении в разных браузерах! Потом вы можете вернуть отступы, если они вам нужны.

     Четвертое – важность. Тег !important показывает, что свойство имеет большую важность, и должно выполняться именно так, как прописано вами в CSS. Пишется только так, а не иначе:
{background: #b5d23a !important; width: 200px !important;}
– после свойства пробел и !important и ТОЛЬКО ПОТОМ точка с запятой.
     Все про этот тег читаем на htmlbook.ru/css/!important.html

     Вложенность
     Записи типа #селектор ul или #селектор li означают, что свойства, прописанные для этих связок, действуют на подэлемент элемента, обозначенного #тегом. Чтобы разобраться, как это работает, нужно знать состав страницы:
Div – это блок с содержимым типа текста, ссылок и прочего. Для него задаются классы (.class) или селекторы (#selector). С помощью div задано множество элементов страницы дневника, к ним применены различные классы.
Ul – устанавливает маркированный список, например для списка постоянных читателей, отображаемого на вашей странице. Элементы такого списка обозначаются тегом li.
Li – сам элемент маркированного списка.
A – ссылка.
Таким образом вы можете видеть, для чего используется оформление в готовом коде.

     Если нужно прописать два элемента с одними и теми же свойствами, используйте запятые: #odin, #dva, .tri {свойства}
     Такое написание немного уменьшает код страницы и увеличивает удобность его просмотра.

     a – используется для описания ссылок. :hover – показывает, что описывается момент, когда курсор мыши находится над элементом.

     Как сделать элемент невидимым? Поможет свойство «display: none» . Использование такой конструкции убирает элемент из документа, так что место под него не резервируется, помните об этом.

     Свойство display также поддерживает другие значения, например block – часто используется в коде дневников. Почитайте об использовании здесь - htmlbook.ru/css/display.html и обратите внимание на поддерживающие браузеры.

     Фон. Фон можно применить для любого блока, вот как это делается:
     Картинка для фона берется ТОЛЬКО из вашей библиотеки изображений. Загрузите картинку туда, но помните – ее «вес» в килобайтах – залог удобства использования вашего дневника. Чем меньше вес, тем лучше для читателя, поэтому постарайтесь доводить количество килобайтов ваших картинок до минимума.
     Если у вас есть Фотошоп, значит должен быть и ImageReady – пакет как раз таки предназначенный для оптимизации изображений. Открыв в Фотошопе картинку, выберите вместо пункта «Сохранить как», пункт «Сохранить для сети» (“Save for web”), расположенный сразу после. Откроется окно, в котором вы можете выставить параметры оптимизированной картинки. Есть несколько стандартных установок (Preset), имеющих уже подобранные параметры оптимизации, например GIF с разным числом цветов или Jpeg в трех качествах. Самое низкое качество означает наименьший размер, превью помогает увидеть оптимизированную картинку, согласно которой вы сами можете выставить ползунок качества так, как вам надо. А под картинкой находится ее размер в оптимизированном виде (в килобайтах), который меняется автоматически при изменении качества – следите за ним. Скажем так – картинка в jpeg размерами 1000х200 в среднем должна весить килобайт 50 – отталкивайтесь от этой цифры. Если в вашей картинке цветов мало и это не фото, то выставьте тип сжатия GIF с различной цветностью, это совсем уменьшит картинку. Совсем маленькие картинки тоже лучше делать в gif.
     Если же Фотошопа у вас нет совсем, то скачайте оптимизатор изображений Ashampoo Photo Optimizer, разберитесь, как он работает и уменьшайте картинки в нем.
     Программу для ознакомительной работы вы можете скачать тут:
     rapidshare.com/files/72805523/Ashampoo.Photo.Op...
Пароль к архиву – netzor.org
     Так вот, вернемся к нашим баранам:
     Загрузив картинку в библиотеку, вы увидите ссылку на нее – URL. Скопируйте ссылку и используйте ее в следующем коде:
    
Элемент {background: url('/userdir/дальнейший_адрес_изображения.jpg');}

     Например
#extratop {background: url('/userdir/1/117/3454565656.jpg');}

     В кавычках находится адрес вашей картинки из библиотеки, все, что находится до /userdir/ надо удалить, остальное оставить.
     Какие еще издевательства можно учинить над фоном, а также абсолютно все свойства бэкграунда расписал bokonist вот здесь - diarycss.diary.ru/p23302335.htm#93256451
 &;;nbsp;   Запомните – сначала идет указание позиции фона по вертикали (top, center, bottom и т.п.), потом по горизонтали (left, center..)
     Шрифты. Они могут применяться для любого блока, который содержит текст.
     Свойств по теме много – font, font-family, font-size, font-style, читайте о них тут - htmlbook.ru/css/font.html
     В сообществе есть материал, посвященный смене шрифта на «нестандартный» - diarycss.diary.ru/p23314167.htm#
     А вот разбор шрифтов от Tex - tex.diary.ru/p51528605.htm#
     Рамки вокруг блоков. Обвести блоки рамкой можно с помощью свойства border.
     htmlbook.ru/css/border.html
     Если нужны рамки только с некоторых сторон объекта, то пользуйтесь свойствами border-left (слева), border-right (справа), border-top (сверху), border-bottom (снизу).
     Примеры:
    
#page-c {border: 4px dotted #56400a} 
#extrabottom {border-top-width: 3px; border-bottom: 2px solid #5bff6c}

     Ширина и высота объектов. Вы можете менять эти параметры у объектов страницы, если вам это нужно, при этом их содержимое по-разному будет воспринимать изменение размеров. Корректно будет смотреться, если размеры внутреннего (дочернего) объекта равны, либо меньше размеров внешнего (материнского). Например, размеры page-t не должны быть больше, чем у page-c. Внимательнее читайте описание объектов, приведенные во 2 части данного руководства.
     Ширина задается через width, высота через height.
     Вы можете задать их значение пикселями (400px), либо в процентном соотношении (50%)
     А теперь важное замечание! Процентаж ширины и высоты элемента зависит от размеров его материнского объекта! То есть, если вы задали ширину заголовка поста в 40%, то он будет отображаться в 40% от ширины самого поста, а не ширины страницы. Процентное соотношение хорошо использовать, чтобы создавать объекты, динамические изменяющиеся со сменой, скажем, разрешения монитора. Но всегда лучше начинать процентирование именно со внешних главных объектов – по умолчанию большинство их внутренних элементов уже меняют свои размеры вместе с ними.
     К) Смена положения объектов. Все очень любят изменять положение элементов страницы, поэтому внимательно прочитайте данный абзац.
     Дочерние элементы страницы позиционируются относительно своих родительских элементов! И если вы будете изменять именно их положение, то родительские свойства будут влиять них, и некоторые аспекты изменения местоположения связанных объектов не позволят вам получить именно то, чего хотелось бы. Сейчас подробнее.
     Положение объекта определяется свойством position (позиция). Оно имеет четыре возможных значения:
     static – значение по умолчанию. Оно показывает, что объект находится там, куда его определили кодом страницы.
     absolute – определяет, что элемент с такой позицией имеет свои собственные параметры расположения, и не участвует в распределении других объектов по странице. Они выстраиваются уже как будто без него, а положение его определяется свойствами объекта – top, bottom, left и right, выражаемыми в пикселях. О них подробнее чуть позже.
     relative – Позиция определяется относительно исходного расположения объекта. Использование left, right, top, bottom, смещает объект относительно его расположения.
     fixed – Положение определяется как и у absolute, но оно не меняется при прокручивании страницы и изменении разрешения экрана и размера страницы. (И не работает в IE6)
     Теперь о свойствах положения.
     left в пикселях показывает смещение объекта относительно левого края (родительского объекта либо экрана), top – смещение относительно верхнего края и так далее. МОЖНО использовать МИНУСЫ, то есть выражать позиции отрицательными значениями (-100px). Особенно это касается дочерних объектов – они будут смещаться относительно родительских, если те находятся не с краю, то логично было бы поставить отрицательное значение, если надо вынести дочерний объект за край.
     Другое важное замечание – если положение родительских объектов не определено в точности, то положение дочерних объектов может меняться при изменении страницы, разрешения экрана и даже в разных браузерах при абсолютном позиционировании! Поэтому, если вы определили позицию какой-нибудь ссылки меню, а она показывается по-разному в разных случаях, то проверьте позиционирование самого меню, лучше всего ставить absolute или fixed для обоих объектов и начинать с главного. Когда он будет всегда отображаться так, как вам надо, приступайте к оформлению внутренних элементов. Этот прием хорош в любом случае – всегда лучше начать оформление с глобальных вещей.
     Позиционирование по процентам также возможно.
Если нужно разместить элемент в точке, расположенной на 1/5 расстояния от левого края экрана, то указывайте позицию как left: 20%. Помните о связях объектов – они будут позиционироваться от тех точек, на которых расположены их «родители».

     Дизайн фиксированной ширины по центру, слева и справа.
     Это – стандартная схема оформления дневника, которую многие используют, и которая удобна и хороша. Вот тут Tex все подробно описал - tex.diary.ru/p41771510.htm
     Не забывайте о разном разрешении экрана у пользователей – если вы сделаете блоки очень узкими, то у людей с широким экраном они будут занимать 30% страницы и смотреться не очень хорошо.

     Картинки вверху и внизу экрана. Этот прием характерен и удобен для дизайна фиксированной ширины, описанного в прошлом абзаце. Делается все просто – нужно задать ширину и высоту для #extratop и #extrabottom и поместить туда картинки в качестве фона. Для фиксированного дизайна ширина объектов задается такой же, как ширина блока wrapper, не больше. Высота равна высоте картинки, при этом саму картинку нужно подогнать по ширине к основному блоку.
     Вот пример:
    
#extratop {width: 700px; height: 200px; background: url('/userdir/…4545.jpg') no-repeat top left;} 
#extrabottom {width: 700px; height: 100px; background: url('/userdir/…34468.jpg') no-repeat center center;}


     Если #extrabottom отображается некорректно. Существует две главных проблемы с его отображением: между ним и блоком записей пробел, и он отображается сразу после меню, либо после #extratop.
     Первая проблема связана со свойствами классов блока записей. А именно – с отступами в них. Убирайте отступы с помощью margin и padding:
    
div.bordered {margin-bottom:0 !important; }
– убираем нижний отступ для класса описания поля постов и меню.
     То же самое можно прописать для #page-c.

     Вторая проблема связана с позиционированием. Если вы что-то меняли в блоках, то вполне возможно нарушили «общую картину» кода страницы. Но выход есть –
     Свойство float: left; для #extrabottom показывает, что элемент выровнен по левому краю, а другие элементы должны обтекать его по правой стороне. В некоторых случаях это работает, попробуйте добавить в свойства блока.
     Свойство clear: both, для #extrabottom наоборот, запрещает обтекание элемента с обеих сторон. Работает для других случаев. В общем, если появились проблемы подобного рода, пробуйте одно из этих решений, а если не получается, то пишите в сообщество diarycss.diary.ru

     Динамически изменяющийся размер блоков, динамический дизайн.
     Фиксированная ширина не всегда хороша и интересна, поэтому пользуйтесь возможностями CSS для создания объектов, меняющих свои свойства при смене разрешения экрана или размера страницы.
     Тут поможет процентирование, а именно – указание ширины блока (width) в процентах. При таком описании ширина объекта будет задаваться относительно других элементов страницы, и если они будут менять свои свойства, то вслед за ними изменится и текущий объект. Например,
     #wrapper {width: 80%;} заставит основной блок всегда занимать 80% экрана, а #page-t {width: 90%;} покажет, что поле с постами будет занимать 90% от ширины блока page-c (родительского). Конечно, подобного эффекта можно добиться и отступами, но ширину родительского элемента все равно лучше задать процентами.
     Основной способ организации динамического дизайна заключается в следующем:
     Выставляем ширину #wrapper в процентах, проще всего 100% (от ширины экрана).
     Ширину блока #page-c делаем в процентном соотношении так как удобнее, и она, завися от ширины wrappera, будет изменяться также относительно ширины экрана.
     При этом всегда нужно следить, чтобы меню #side (зависит от #wrapper) занимало при этом не больше оставшегося пространства, иначе оно будет отображаться не там, где нужно. Проверить это можно, выставив разрешение монитора поменьше, например 1024*768 и посмотрев на свою страницу. Такое разрешение имеет множество пользователей, поэтому ориентируйтесь в первую очередь на них.
     Установите фиксированную ширину для #side. Чтобы меню не «уезжало», надо чтобы #page-c занимал, допустим (1024 минус ширина_меню) пикселей. Больше – можно.
     Для меню #side в таком случае еще хорошо помогают строки position:absolute; clear: left; - они абсолютно позиционируют меню «вне кода» и показывают, что другие элементы должны обтекать меню по правому краю.
     Кроме того, позиция #page-c не должна перекрывать позицию меню. Следите, чтобы граница #side находилась на том же уровне, что и граница блока записей, или имелось расстояние между ними (см. позиционирование и отступы).
     В своем коде я решил проблему так:
    
#side { width:150px !important; margin:0 !important; position:absolute; clear: left; top: 450px;} 
#page-c {width:73% !important; margin:0 !important; padding-left: 150px !important; }

     Отступ в 150px помогает содержимому #page-c всегда быть вне действия зоны меню, кроме того само меню показывает, что его нужно обтекать справа.

     Также помогает свойство min-width. Это свойство показывает ширину, меньше которой элемент быть не может, и прописываем его так:
#page-c {min-width: 500px; width: 70%;}
. Тогда при уменьшении страницы по ширине элемент уже не будет меньше заданного значения, вместо этого появится скроллбар. Есть еще max-width, где прочитать о нем, вы уже должны запомнить.

     8. Более сложные и заковыристые приемы оформления.



     Прозрачность элементов. Добавление к ссылкам в меню иконок. Объединил, так как описание находится в одной статье от Tex.
     У прозрачности есть одно незыблемое свойство – она тормозит, и злоупотреблять ею не стоит.
     Все остальное читайте здесь - tex.diary.ru/p28585287.htm#

     Один элемент поверх другого. Можно сделать так, чтобы один элемент находился как бы ближе к пользователю, чем остальные, и если элементы накладываются один на другой по позиции, то этот элемент будет как бы «выше».
     Используется свойство z-index. Все очень подробно описано тут - htmlbook.ru/css/z-index.html

     Изменить стиль горизонтальных полос между постами. Обсуждение тут - diarycss.diary.ru/p23118546.htm

     Если проблемы с кнопками редактора сообщений - tex.diary.ru/p53968256.htm#

     Другие виды рамок вокруг элементов - tex.diary.ru/p1892740.htm#

     Изменение оформления ссылокпри наведении курсора мыши:
     diarycss.diary.ru/p23386358.htm - подчеркивание
     diarycss.diary.ru/p25368822.htm - шрифт

     Если нужно задать фиксированный размер элемента, но его содержимое «не влазит» в этот размер, можно воспользоваться скроллбаром - diarycss.diary.ru/p41016364.htm#
     Читаем про overflow тут - htmlbook.ru/css/overflow.html

     Если вы еще не поняли, как убрать некоторые элементы (а я писал), то diarycss.diary.ru/p25244058.htm
Меню, как у Tex. Если вам нравится такое меню, скрывающее до поры до времени ненужные ссылки, то обсуждали его здесь - diarycss.diary.ru/p40633222.htm

     Нужен специальный фон для аватаров? Смотрим тут - diarycss.diary.ru/p39533346.htm# . Рамка вокруг аватара? - diarycss.diary.ru/p32381787.htm# . Тень под аватаром? - diarycss.diary.ru/p26469571.htm#

     Как менять курсор в различных случаях - diarycss.diary.ru/p24320654.htm

     О фонах записей и постов - diarycss.diary.ru/p26228551.htm

     Буквица (заглавные буквы в каждом начале поста) и скругленные края блоков от Рёцке - diarycss.diary.ru/p26611303.htm

     Фотография в крупном виде - diarycss.diary.ru/p25953655.htm

     Изменение названия ссылок - diarycss.diary.ru/p26830286.htm

     Если ссылки нужно разместить в одну строку, а они упорно отображаются в две или более, то задавайте для них свойство width! Это сделает их ширину не зависящей от ширины родительского объекта.

     Проверка CSS. Если есть желание проверить код не на дневнике, а где-то еще, то воспользуйтесь предложением от Рёцке - diarycss.diary.ru/p47019938.htm

Я искренне надеюсь, что вы прочитали это руководство и получили хоть какую-то полезную для себя информацию. Спасибо за внимание.

@темы: diary css, Дизайн

URL
Комментарии
2008-11-29 в 02:50 

дядяГСС
Только война. Только хардкор. Только мясо, милая.
а пачму прошлый пост был перекрыт?

2008-11-29 в 14:11 

Совершенству эволюция не нужна.
дядькаГСС
Тут типа понятнее читать, зачем два поста про одно и тоже?

URL
2008-11-29 в 15:58 

Fialka-Olga
Доброе мировое зло! :D
Спасибо за такой ликбез. :super:

2008-11-30 в 18:25 

Liera
^.^ / Так презирай меня... на пути в ад.
Кубички бегают и полосочка внизу ^^. Спасибо за текст.

2008-12-01 в 04:54 

Roldo читать дальше
использовал эту часть, чтобы выравнивание всего текста было по центру: по центру выравнялось всё, кроме строки с датой. что нужно написать, чтобы дата тоже была по центру?

2008-12-01 в 06:03 

Совершенству эволюция не нужна.
.WishmasteR.
Я думал, что забыл про это, а это ты просто пропустил)
.countFirstDate, .countSecondDate, .postDate, .uline – классы, относящиеся к описанию поля, где расположена дата написания поста.

URL
2008-12-01 в 06:04 

Roldo Т_Т сильно извиняюсь, видимо проворонил.

2008-12-01 в 06:05 

а их каждый в отдельной строке прописывать, чтобы положение задать, или можно как-нибудь кучей?

2008-12-01 в 06:08 

Совершенству эволюция не нужна.
.WishmasteR.
Это тоже было написано))
через запятую - .countFirstDate, .countSecondDate, .postDate, .uline {text-align: center}

URL
2008-12-01 в 06:12 

Roldo >_< чую, мне пора бы уже идти спать. Ещё раз прошу прощения за невнимательность. и последний (не менее глупый, печёнкой чую) вопрос - то, что экстратоп исчезает на странице с комментариями - это так и надо? этому можно помешать с помощью какого-либо кода?

2008-12-01 в 06:21 

Roldo сорри, разобрался. Это ж надо так тупить О_О
[ушёл спать.]

2008-12-01 в 06:22 

Совершенству эволюция не нужна.
.WishmasteR.
Так и надо, но почему он исчезает, я, хоть убей, не знаю. Не разбирался. Об этом задай вопрос в сообществе или поищи там же, они как-то сделали хотя бы эпиграф в комментариях.

URL
2008-12-06 в 01:23 

Оффтопик - классом .eot
у меня не работает это. зато работает .offtop

2008-12-06 в 10:25 

Совершенству эволюция не нужна.
.crimson
Странно, я соответствие проверял в программе, которая сама видит все селекторы и классы. Спасибо, поразбираюсь.

URL
2008-12-18 в 16:55 

symbolia
мир в ладонях
т.е. кроме как из библиотеки ничего засунуть в extratop не получится =[[[[[[[[[[[[[[[[[[[

2008-12-18 в 17:06 

Roldo
Совершенству эволюция не нужна.
.символ.
Да.
Только дело не в этом. Я писал, как оптимизировать картинки.

URL
2008-12-18 в 17:24 

symbolia
мир в ладонях
Roldo

да там не оптимизируется, качество сразу падает
=] ну все равно спасибо

2008-12-18 в 17:27 

Roldo
Совершенству эволюция не нужна.
.символ.
Ну естественно падает, но уж не настолько, чтобы отказываться. ImageReady оптимизирует довольно прилично, особенно если не делать полноцветный ГИФ размером 2000 на 1300. Нужен JPG, не знаю какие там размеры, но в 200 килобайт можно уложиться по любому.

URL
2008-12-18 в 17:49 

symbolia
мир в ладонях
Roldo

картинка не черно белая
она реально падает
img.photobucket.com/albums/v74/iLLuminati/provo...

2008-12-18 в 17:56 

Roldo
Совершенству эволюция не нужна.
.символ.
Потому что она уже в png! Надо пересканировать в jpg.

URL
2008-12-18 в 17:57 

symbolia
мир в ладонях
Roldo
да ладно все
я разберусь

2008-12-19 в 22:39 

Борюсь с хаосом. Хаос обречен.
.символ.
не мучайтесь ;-)
150кб. Особой разницы в качестве не заметил.

2008-12-20 в 13:01 

symbolia
мир в ладонях
ой нет разница сильная
спасибо, я сама разберусь

2009-01-05 в 17:11 

Вам неприятны гомосексуалисты? Потому что вам неприятен «сам процесс»? Ну, тогда вы просто извращенец, любящий подглядывать в замочную скважину чужой спальни, еще и возмущаясь при этом: «Фи, какая гадость!»
спасибо большое за подробное описание. буду учиться

2009-01-09 в 20:48 

Noblesse Oblige
Roldo :beg: хэлп
У меня фон для комментариев прозрачный, хочу залить каким-то цветом. Вводила:
#commentsArea{background:#faa7ca;}
не помогает:weep:

2009-01-09 в 21:46 

Noblesse Oblige
Roldo вопрос отпал :gigi:

2009-01-10 в 09:02 

Совершенству эволюция не нужна.
океания
хм, ну ладно) а я сегодня как раз собирался поискать какие еще теги используются для комментариев.

URL
2009-01-10 в 12:09 

Noblesse Oblige
нет-нет! вы поищите, сделайте постик, а я его в цитатник добавлю *___*
:red:

2009-02-26 в 21:15 

спасибо за материал) очень нужная вещь! освоить бы еще.

2009-04-06 в 04:11 

zolotzzze
Я тебя люблю. Сильно-сильно люблю. Но ты мне уже не нравишься
Предыдущая запись - .prevPostLink
Следующая запись - .nextPostLink
.postLinksBackg – Класс описания блока ссылок внизу поста (комментировать, подписаться и т.п.)
.postLinks – описание ссылок Комментировать, Подписаться и В цитатник.
.urlLink – описание ссылки на URL


спаси!! как обозвать блок с "след. запись/пред.запись"?
дело собсна в чем: на .postLinksBackg поставила рамку. она распространилась и на блок снизу. смотриться - ппц уродливо. прополола весь исходный код и консоли оперы и мозиллы... на цсс не реагирует вообще. пыталась прописать типа так вот:
.prevPostLink, .nextPostLink {border: none !important;}
или вот к этому тоже пробовала:
.postLinksBackg prevnext
.postLinksOld prevNextLinks


короче, или я дурак, или лыжи не едут........
буду очень-очень благодарна :shuffle2:

2009-04-06 в 07:39 

Roldo
Совершенству эволюция не нужна.
Zolotzzze=)
.prevNextLinks

URL
2009-04-06 в 10:23 

zolotzzze
Я тебя люблю. Сильно-сильно люблю. Но ты мне уже не нравишься
Roldo не помогает.... =((

2009-09-06 в 18:25 

Время...
Все изменится. Рано или поздно. Так или иначе.
народ, а что делать вот с этими ссылками? (так оно отображается, если мой дневник читает не зарегенный на дайрях пользователь... )

я может не доглядела, искала в элементах колонки меню..

2009-09-07 в 16:24 

Roldo
Совершенству эволюция не нужна.
Время...
Разобралась уже?

URL
2009-09-07 в 16:45 

Время...
Все изменится. Рано или поздно. Так или иначе.
ну не то, чтобы... кароче одна замечательная кодерша сделала почти все за меня, ибо ксс это определенно - не мое призвание)))))
скоро покажу какой кавай вышел..

2009-09-07 в 16:50 

Время...
Все изменится. Рано или поздно. Так или иначе.
Roldo , кстате, нужна твоя помощь, как КссГуру вот в чем: Дискуссии и у-мейл в меню заменены на картинки. если есть новый ответ в дискуссии - вместо единички дублируется картинка еще раз, и ничего не помогает с этим справиться :/

2009-09-07 в 17:08 

Совершенству эволюция не нужна.
Время...
А если фону этой ссылки прописать background: такой-то no-repeat ?

URL
2009-09-07 в 17:40 

Время...
Все изменится. Рано или поздно. Так или иначе.
попробуем... (:

2009-09-08 в 22:04 

Время...
Все изменится. Рано или поздно. Так или иначе.
нипомогает

2009-09-09 в 06:03 

Совершенству эволюция не нужна.
вечерком попробую разобраться, что там не так.

URL
2009-10-26 в 17:26 

Lemniscate
Не знаю отчего, мне кажется, что в голове моей крутой обрыв, и каждый, каждый день беззвучно осыпается земля.
Roldo, пожалуйста, добавьте в ваш пост селектор к Блокноту.
Поиски в др. дайрах дали стандартный #notepad, но у меня, например, он не сработал. Потом нашлось вот это diarycss.diary.ru/p71612150.htm, и все заработало с селектором #myNotepadLink.
Кстати, если есть информация, почему селекторов для Блокнота несколько и разных (3 шт., судя по комментариям др. пользователей), тоже было бы здорово её знать (там, от типа дневника зависит, или еще что). Спасибо.

2009-10-26 в 17:28 

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

URL
2009-12-11 в 04:52 

AuRinko =)
Не нужно бояться, что жизнь закончится... Нужно бояться, что она не начнется (с)
Roldo
О, боги, спасибо тебе!!! Преклоняюсь пред вашим умом и смекалкой! Это ж надо все это в голове держать, разбираться, все знать... и не полениться написать все... Спасибо! Боооольшое, человеческое спасибо!

2009-12-11 в 06:12 

Совершенству эволюция не нужна.
Да в общем-то, не за что))

URL
2012-04-02 в 08:29 

Lyurika
добрая тварь
Подскажите пожалуйста что я делаю не так?
Пытаюсь поставить Картинку вверху экрана.
Дело в том что она появляется и исчезает.

2012-04-02 в 08:37 

Roldo
Совершенству эволюция не нужна.
URL-то неправильно прописан. Вот так надо:
background: url("/userdir/2/4/5/2/2452524/74219461.png")

URL
2012-04-02 в 08:52 

Lyurika
добрая тварь
Roldo, спасибо.)

2013-07-17 в 23:29 

Ксаксиксюльц
[Весь мир - большой толковый словарь, а я в нем - codex seraphinianus]
Roldo, Здравствуйте, извините за беспокойство, подскажите пожалуйста, а то я уже замучилась... как мне #page-c поставить по средине относительно #wrapper?


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

вот то, что у меня служит кодом:

2013-07-18 в 07:51 

Roldo
Совершенству эволюция не нужна.
ksaksiksjulz,
Да я уж два года не прикасался к CSS) Можно ведь написать в сообщество: diarycss.diary.ru/

URL
2013-07-18 в 12:45 

Ксаксиксюльц
[Весь мир - большой толковый словарь, а я в нем - codex seraphinianus]
Roldo, тогда извините... Просто я в сообществе уже спрашивала (верхний пост), и поняла, что чайникам вроде меня, там мягко говоря не рады... но ничего разберусь как-нибудь :alien:

2013-07-18 в 12:59 

Roldo
Совершенству эволюция не нужна.
ksaksiksjulz,
Обычное дело. Если не рады, пускай дают ссылку на FAQ, или на конкретный пост с такой же проблемой.

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Воинствующий пофигизм

главная