Помилки не приносять жодної користі, якщо їх не виправляти і не робити висновків. Тут будемо вчитись відшукувати найпростіші неполадки.
Оскільки матеріал доповнюється Вашими коментарями-питаннями, варто зауважити, що питання бувають двох типів:
- у мене нічого не працює!!!
- у мене не виводить такий-то блок (вказуємо назву-селектор), розповзається верстка, видає помилку тощо.
Як ви напевне зрозуміли перше питання — це класичний приклад неправильного. Друге — дає шанс на вирішення. Аби збільшити шанси, конкретизуйте питання:
- вкажіть, після якого моменту помітили неполадку;
- що саме пробували для її усунення;
- з якого девайсу дивитесь (це буває важливим, коли мова йде про фронтенд).
Косяки — неминуча реальність в житті будь-якого девелопера, але на них варто вчитись, а не лякатись 🙂
Вичитала в просторах нету, що для коректного відображення в усіх браузерах необхідно прописати reset.css, або просто вкласти у файл css “обнулення”. Так й зробила. Наступний крок – вигляд body{. Тут все було більш менш зрозуміло й цікаво – я писала коментарі у файлі css, пробувала різні властивості. Наступні класи (лого й т.д.) – теж більш -менш якось зрозуміло було. “Не получатися” почалося із етапу, коли після header я намагалася причепити блоки, які будуть flexible щодо параметрів екрану – ну принаймі урок з codecadamy гарно це показував. В мене чомусь блоки не утворювалися – col-sm-4, col-sm-6 – мали розтягуватися на блоки. А от jumbotron нормально працює. Значить я щось не врахувала й не написала, але от що?…
Ось картинка, як мало діяти:
В цілях експерименту знайшла також таку штуку як .three-columns .content-sidebar-wrap, .three-columns #primary, #secondary які теоретично теж мали б розділити площину на 3 колонки – а в мене щось все суцільним текстом йде…крім того не відображається footer взагалі.
Тут приклад, який вимагає підключення bootstrap. Ми ще не проходили його, але гадаю, що поправимо це при наступній зустрічі
Ну й в загальних рисах – не можу зробити вужчим header, якось то красиво посунути все, бо рухаю щось одне – валиться все.
#main:after, .wrapper:after, #header-menu:after, .hentry:after, .widget:after, #access-footer:after, #footer-menu:after {
content: “\0030”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Оцей блок мені взагалі чудеса витворяє.
ну, під цією властивістю прописані через кому декілька елементів — можливо однією причин, що при правці одного валиться інше є те, що в них аналогічні спільні властивості.
Відводьте редагований елемент з когорти. Наприклад, якщо мені потрібно з цього переліку змінити лише один блок (збільшити висоту), я б задав після закриваючої дужки окремі стилі для:
Кілька свіженьких проблемок, які не надаються самостійному вирішенню ((.
1. Я “запозичила” один дизайн. В ході інспектування виявила, що є багато вкладених файлів із різним розширенням. Зокрема jquery, які відповідають за інтерактивність.
Наразі не можу відцентрувати шапку, розтягнути малюнок на весь екран – показує, що частина все -таки прив”язана до іншого сss й тягнеться звідти. Поняття не маю, як це обійти – вже пробувала кілька раз й мені тоді повністю все злітає, коли пробувала просто заміняти лінки на наш сайт. Й ще – пробувала робити оті версії css 1 , 2 й т.д., але або я якийсь значок, кому, крапку пропустила, або щось не так зрозуміла – бо не відображалося коректно. Пропоную на наступному занятті це “вживу” показати – так буде найефективніше, ніж писати довго. герб – хотіла перетягнути в header у правий верхній кут – але через те, що частина тягнеться в Css чужого сайту – щось не вдається. Так не видно, а якщо відкривати через інспектування, то видно , що є й мій файл й чужий.
2. чому частину властивостей описують в індексному файлі через ? Хіба від цього не збільшується” розмір ” сайту?…Чому властивості зразу не прописувати виключно в css, він хіба не для цього створений?…Хотіла ще давніше за це спитатися, а зараз наочно стикнулася. Й в такому випадку – що над чим має перевагу? індексні властивості, чи css?…
3. <li id="…в індексному файлі – тре додавати через записи з вордпресу? чи сторінки Це динамічні, чи статичні дані будуть?..Бо я щось заплуталася.
4. а ще, при наведенні мишки в інспект., видно , що біля мого мого style.css є двокрапка, а після того якісь весь час різні цифри, залежно що підсвічую.
1. Тань, “запозичати” дизайн краще перетягуючи поодинокі стилі конкретних блоків, а не підключаючи файли загалом. Просто Ви не застраховані від того, що автор сайту теж не запозичив усе це скопом. Відтак, ми матимемо купу зайвого коду, який не лише займатиме місце, але й створюватиме нові проблеми…
Почати робити правильно ніколи не пізно, тому, якщо терміни дозволяють, рекомендую перенести видимі блоки по-одному, вносячи в .CSS тільки потрібні стилі.
2. Такий опис має місце або через недбалість, або, якщо стилі вносяться якимсь плагіном.
Справа ще в тому, що стилі, записані в індексному файлі переоприділяють ті, що потрапляють з вкладеного документу (тобто мають вищий пріорітет). Таким чином розробники плагіну страхуються на випадок, якщо подібні стилі вже можуть бути прописаними в документі .CSS.
3. Зазвичай це виводиться через скрипт, а не прописуванням у шаблоні. Тобто виводиться динамічно
4. Я чогось такого не побачив.
Або ситуація поправилась, або мусите уточнити питання й закинути приклад, або скріншот.
Щодо 3 пункту твого: ти маєш створити блок, місце в шаблоні, де будуть виводитися новини чи наші записи. А туди ми поміщаємо код, який виводить наші записи з Вордпресу, а не самі ці записи. Ми так робили на наших власних сайтах. Якщо я невірно раджу, то хай Юрій поправить.
Мені здається, треба барти з цього матеріалу – http://intech.lviv.ua/creating-theme-for-wordpress/ ,ось цей шматок коду:
“Контент сайту виводиться за допомогою циклу. Вставляючи константи всередину цього циклу ми зможемо виводити потрібні для нас записи.
Вставляємо всередину циклу блок тіла матеріалу. Як Ви вже здогадались константа the_ID() видає нам номер матеріалу:
<article id="post-” >
Має вийти щось подібне як на скріншоті:”
все правильно
До речі, давно хотіла спитати – про інтелектуальну власність, тобто дизайн, шаблон сайту – є автор, розробник, внизу часто пишуть Copyright by ….. Тобто, як це питання регулюються в даному випадку. Звісно, є межа між частковим запозиченням та повністю запозиченою темою, але якщо її адаптувати під власну потребу, то буде тяжко довести факт запозичення.
І до цього ж, чому тоді html код та стилі є у відкритому доступі, тобто можна переглянути будову будь-якої веб-сторінки?
Попри те, що більшість коду сайтів є доступними для запозичання, законодавчо це не дає підстав тягати чиюсь роботу.
Попри те, автор нічого ще ні разу не чув про судові позови щодо вкраденого дизайну сайтів…
в будь-якому разі не варто сліпо копіювати плоди чиїхось старань — Якщо вже щось беремо, то не лише переробляємо, але намагаємось зробити краще…
інакше залишимось на рівні дрібних злодюжок 🙂