«Верстка для 1c-bitrix» - дещо перебільшена висловлювання, тому як будь-який html-макет можна адаптувати в шаблон для цієї CMS. Але, не дивлячись на це, я спробую виділити кілька характерних особливостей, які допоможуть при шаблонізаціі. А також будуть розглянуті деякі типові помилки, що призводять до спотворень уявлення сайту в режимах «редагування» і «розробка».
Мало не половина проблем пов'язана з усіма улюбленим дідусем IE 6. Відмовлятися від нього рано, він впевнено тримає свої кілька% користувачів, до того ж його впровадити офіційно заявлена самим розробником. Хоч в 9й версії і обіцяють відмовитися.
Загальні принципи розміщення стилів
У шаблоні Бітрікс за замовчуванням під стилі відводиться 2 файли:
Наприклад, нехай код html виглядає так
при зміні буде показаний червоним кольором, в той час як з правилом
- в template_styles.css складаємо все що пов'язано з розміткою самого шаблону
На етапі верстки можна відразу наповнювати обидва файли, що прискорить роботу в подальшому.
назви стилів
В одній з тем форуму писали що клас .mail викликав помилку «Не вдалося виявити код виклику компонента». Відтворити помилку не вдалося, так що користуватися можна без побоювання. Залишив тут як приклад непередбачуваності Бітрікс :)
Плаваючі блоки в режимі розробки
По можливості для обтічних елементів слід задавати явну ширину. Якщо це не робити і в такий блок помістити компонент \ включається область, то IE6 розтягне його на 100%, зсунувши всі інші вниз.
Часто експлорер зміщує блоки один під одного навіть з фіксованими розмірами. Таке відбувається коли їх сума по горизонталі дорівнює ширині батьківського контейнера. Лікується декількома способами:
Для всіх компонентів з зовнішнього блоку ставимо автоматичну ширину пунктиру виділення. Спрацьовує не завжди.
Діє безвідмовно, але втрачається пунктир навколо компонентів зліва і справа.
Overflow: hidden
Mozilla в елементах з цим властивістю не показує іконку компонента, якщо він знаходиться вгорі блоку. Виправити можна змістивши іконку вниз правилом
фонові зображення
Вміст сайту в режимі розробки зміщується щодо фону, якщо його встановити для контейнера body. Отже бакграунд краще ставити на перший вкладений блок.
Якщо IE6 не вказує фон будь-якого елементу, зазвичай допомагає установка для нього position: relative.
PS: у Вас може виникнути цілком логічне запитання - навіщо потрібні ці милиці для адміністративних режимів та ще й в застарілому браузері. Відповідь проста - коли робите для себе і точно знаєте чим будете користуватися, можна на багато закрити очі. При розробці сайтів на замовлення, на мій погляд, потрібно робити максимально сумісні рішення.
Схожі записи
Привіт, Олексій, підкажіть, будь ласка, в добре (всмисле без бітрікс все відображається як треба) зверстаної сторінці, при створенні шаблону на її основі, з'їжджає ліва колонка далеко за межі екрану, але при включеному режимі правки вона повертається на місце, яке їй було відведено ... з чим така поведінка може бути пов'язано ??
Галина, з великою ймовірністю в якомусь з шаблонів компонентів є зайвий закриває тег (div наприклад). У режимі розробки компоненти обрамляются тегами у вигляді рамки з допомогою Бітрікс і зайвий тег ігнорується.
Тетяна, здрастуйте! Дивіться, для вирішення питання з різними заголовками для головної і інших сторінок є кілька методів:
0. Встановити «Властивість» сторінки або розділу і потім це властивість перевіряти в шаблоні.
1. У шаблоні сайту зробити перевірку на головну сторінку $ APPLICATION-> GetCurPage (true) == »/ index.php» і навішувати окремий клас на заголовок. Мінус методу - якщо захочеться додати ще якихось відмінностей головною на рівні шаблону, то доведеться ліпити подібні перевірки ще, а це вже недобре.
2. Скопіювати шаблон, поміняти стилі і підключити для головною з адмінки. Мінус - нераціонально для таких малих змін. Плюс - шаблон можна змінити до невпізнання :)
Олексій спасибі. Я спробую. Бітрікс тільки вивчаю і потрібно зробити редизайн в конкретний проект.