Конкурс на кращу запис тижні!
Елементи меню (#side). Фактично це все посилання, але для кожного елемента можна прописати окремі властивості. Список таких елементів збирали ще Tex. Zolotzzze =) і інші, я ж розміщу його сюди в повному вигляді окремо.
Отже, практично з усіма елементами і класами сторінки ми познайомилися, тепер можна для кожного з них ставити властивості в CSS.
Експериментуйте - закрийте щоденник на час і міняйте властивості різних елементів і класів, потім зберігайте і дивіться, що виходить в результаті. Так ви уявите собі картину розташування блоків щоденника докладніше і зрозумієте, як вам краще діяти в плані зміни їх оформлення.
7. Основні методи роботи.
У цьому розділі мова йде про тих прийомах, які зазвичай використовуються для редагування оформлення щоденника в CSS. Також розглянемо головні принципи роботи з оформленням, що використовують CSS.
Найголовніше - значення ширини, висоти, товщини і інші, пов'язані з вимірами, вимірюються в пікселях, і після кожного значення потрібно писати px, наприклад
#side
Якщо потрібно вказати величини в процентному співвідношенні, то пишемо%
Друге - короткий курс англійської.
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). це дозволить уникнути деяких нестиковок у відображенні в різних браузерах! Потім ви можете повернути відступи, якщо вони вам потрібні.
Четверте - важливість. Тег! Important показує, що властивість має велику важливість, і має виконуватися саме так, як прописано вами в CSS. Пишеться тільки так, а не інакше: - після властивості пробіл і! Important і ТІЛЬКИ ПОТІМ крапка з комою.
Все про цей тег читаємо на htmlbook.ru/css/! Important.html
Друга проблема пов'язана з позиціонуванням. Якщо ви щось міняли в блоках, то цілком можливо порушили «загальну картину» коду сторінки. Але вихід є -
Властивість float: left; для #extrabottom показує, що елемент вирівняний по лівому краю, а інші елементи повинні обтікати його по правій стороні. У деяких випадках це працює, спробуйте додати в властивості блоку.
Властивість clear: both. для #extrabottom навпаки, забороняє обтікання елемента з обох сторін. Працює для інших випадків. Загалом, якщо з'явилися проблеми подібного роду, пробуйте одне з цих рішень, а якщо не виходить, то пишіть в співтовариство diarycss.diary.ru
О) Динамічно змінюється розмір блоків, динамічний дизайн.
Фіксована ширина не завжди хороша і цікава, тому користуйтеся можливостями CSS для створення об'єктів, що змінюють свої властивості при зміні дозволу екрану або розміру сторінки.
Тут допоможе опроцентуванням, а саме - вказано ширини блоку (width) в процентах. При такому описі ширина об'єкта буде задаватися щодо інших елементів сторінки, і якщо вони будуть міняти свої властивості, то слідом за ними зміниться і поточний об'єкт. наприклад,
#wrapper змусить основний блок завжди займати 80% екрану, а # page-t покаже, що поле з постами буде займати 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
# Page-c
Відступ в 150px допомагає вмісту # page-c завжди бути поза дією зони меню, крім того саме меню показує, що його потрібно обтікати справа.
Також допомагає властивість min-width. Це властивість показує ширину, менше якої елемент бути не може, і прописуємо його так: # page-c. Тоді при зменшенні сторінки по ширині елемент вже не буде менше заданого значення, замість цього з'явиться скроллбар. Є ще max-width. де прочитати про нього, ви вже повинні запам'ятати.
8. Більш складні і хитромудрі прийоми оформлення.
9. Додатки та рекомендації (рекомендується до прочитання)
Якщо є ще питання.
Перш ніж їх ставити, зробіть ось що:
Скористайтеся пошуком по текстам мого керівництва (ctrl + F), наберіть слово, яке вас цікавить, і подивіться всю інформацію, яку вдається знайти. Прочитайте уважно.
Скористайтеся пошуком по спільноті diarycss.diary.ru. Наберіть пару цікавлять слів, і ВСЕ, що ви хотіли б знати, відобразиться в знайдених постах.
Повірте мені - так можна знайти абсолютно все і відразу, а не чекати, поки вам дадуть відповідь «йдіть за цим посиланням». Ви самі можете прекрасно це посилання знайти.
Тикніть в тег спільноти, що цікавить вас, і відобразяться всі повідомлення по цій темі.
Якщо ж все одно нічого не допомогло, і проблема має місце бути, то задавайте питання в співтовариство, при цьому:
- тримайте свій щоденник відкритим
- випишіть ваш код
- поясніть толком, чого б вам хотілося бачити.
Я постараюся вносити всі характерні питання в це керівництво, так що воно буде оновлюватися.
Готові дизайни.
Ходіть по чужим щоденникам - в їх дизайнах ви знайдете багато корисних для себе придбань. Особливо раджу заглянути сюди - diary-design.diary.ru
Ось запропонований дизайн від Tex - tex.diary.ru/p30948279.htm# з кодом. Характерне меню, фіксована ширина, солідний вигляд.
Ось моє творіння - diary-design.diary.ru/p49766406.htm# з кодом. Тут реалізована динамічна ширина, а також фон навколо постів і поєднання фонів різних елементів в єдиний колаж.
Я щиро сподіваюся, що ви прочитали цей посібник і отримали хоч якусь корисну для себе інформацію. Дякуємо за увагу. Roldo.