Обграждане на текст около снимка 19
Сподели урока
Имал/-а ли си случай, в който знаеш, че съдържанието на страницата ти е увлекателно и приятно за четене, но в момента, в който решиш да го “разчупиш” с няколко изображения откриваш, че всичко изглежда някак си небалансирано? Пространството от дясно на снимката ти изглежда твърде празно, текста преди и след снимката е твърде отдалечен, а самите снимки сякаш не пасват добре в стила на сайта.
Не се притеснявай! В този урок ще ти помогна да се справиш с всичко това.
Обграждането на текст около снимка е доста често срещана техника, която може да се забележи в различни по тема сайтове. Най-често се използва в случаите, когато имаме определено количество текст и поне едно изображение, и искаме да обединим двете в общ блок от съдържание, което да подсказва връзка между тях.
Проблема на тази техника е, че не може да се постигне единствено с html, а трябва да се комбинира с малко CSS. Добрата новина пък е, че за да постигнем задоволителен резултат са ни нужни не повече от няколко реда CSS.
В упражнението към този урок ще разгледаме един лесен и практичен начин за постигане на този ефект придружен с примерен стил.
Да започваме.
Упражнение
Текста, който ще използвам в това упражнение е от страницата на Гранд каньон в Wikipedia. Естествено, ти можеш да използваш свой собствен текст, който по-добре отразява темата/съдържанието на сайта ти.
За да съкратя максимално кода и дължината на страницата, ще използвам само няколко думи от началото и края на всеки текстов параграф. В работните файлове обаче, текста ще бъде в пълният си вид.
Ще използвам 2 еднакви, но различни по големина изображения. Целта на упражнението ще бъде да обгърнем първото с текст отляво, а второто отдясно.
Структурата на работните файлове изглежда така:
Стъпка 1
Създай нов html документ и постави в него няколко текстови параграфа. Не забравяй да прикачиш външен CSS файл, защото ще ни бъде нужен. Моят резултата изглежда така:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Обграждане на текст около снимка</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h2>Обграждане на текст около снимка</h2> <p>Националният парк „Гранд Каньон … … национални паркове в САЩ.</p> <p>На негова територия се намира … … пропаст с отвесни стени.</p> <p>Паркът предлага различни … … открита на 28 март 2007 година.</p> </body> </html>
Резултата, както виждаш, е обикновена страница с текст.
Стъпка 2
Добави по едно изображение преди отварящите тагове на втори и трети параграф.
index.html
Преди <p>Паркът предлага различни … открита на 28 март 2007 година.</p> <p>Паркът предлага различни … открита на 28 март 2007 година.</p> След <img src="image/grand-canyon-small.jpg" alt="Снимка на Grand Ganyon" /> <p>На негова територия се намира … пропаст с отвесни стени.</p> <img src="image/grand-canyon.jpg" alt="Снимка на Grand Ganyon" /> <p>Паркът предлага различни … открита на 28 март 2007 година.</p>
Резултата е по-добър, но със сигурност не е това, което искаме да постигнем.
Причината, поради която изображенията не започват на един и същ ред с текста е, че <р> е от групата на блоковите елементи. От урока “Разлики между block и inline елементи” разбрахме, че всички блокови елементите предизвикват нов ред преди и след тях. Точно затова текста не започва на едно ниво с изображението.
От друга страна, ако поставиш изображението в <p> елемента, първият ред на текста ще бъдат на едно ниво с най-долната част на изображението (виж следващата снимка). Това е така, защото <img /> е инлайн елемент, който не предизвиква нов пред преди и след него.
Стъпка 3
Сега ще добавим по един class атрибут към двете изображения. От урока “Приложение на class атрибута” разбрахме, че стойностите на class могат да бъдат използвани в CSS като селектори. Точно това е, което търсим.
Отвори html файла и добави към първото изображение class със стойност “right”, а към второто class със стойност “left”. Ето така:
index.html
Преди <img src="image/grand-canyon-small.jpg" alt="Снимка на Grand Ganyon" /> <img src="image/grand-canyon.jpg" alt="Снимка на Grand Ganyon" /> След <img src="image/grand-canyon-small.jpg" class="right" alt="Снимка на Grand Ganyon" /> <img src="image/grand-canyon.jpg" class="left" alt="Снимка на Grand Ganyon" />
Ще използваме стойността “right”, за да обградим снимката с текст отдясно, а стойноста “left”, за да обградим снимката с текст отляво.
Стъпка 4
Отвори CSS файла, който създаде и въведи следното:
style.css
body {
font: 14px/21px Verdana, Arial, sans-serif;
width:650px;
}
.left {
float:left;
}
.right {
float:right;
}
Стила, който прилагаме върху body трябва да ти е познат. На 2ри ред задаваме шрифта, размера на текста и разстоянието между редовете. На 3ти ред просто ограничаваме ширината на страница на 650px.
В следващите няколко реда е магията, която търсим.
CSS свойството float ни позволява да създадем т.нар. “плаващ” елемент. “Плаващия” елемент позволява на нормалния поток от съдържание да го обгради съответно отдясно или отляво в зависимост от стойността на float. “Плаващия” елемент винаги застава възможно в най-дясната или най-лявата страна на родителския елемент.
В първия момент всичко това звучи малко объркващо, но съвсем не е така. Резултата от тази стъпка ще да ти даде по-добра представа за работата на float.
Както виждаш, първото изображение застана възможно най-вдясно, а текста го обгради отляво. Второто изображение пък си остана на мястото, но текста го обгради отдясно.
Проблемът с обграждането е решен, но се забелязва друг. Сега пък текста застана плътно до снимката, което го прави труден за четене. Добра идея би било да отделим текста от снимката с малко разстояние. В следващата стъпка ще направим точно това.
Стъпка 5
Стила в тази стъпка е примерен. Ако ти хареса, нямам нищо против да го използваш в твоя сайт.
Върни се отново в CSS файла и добави следния код:
style.css
.left {
float:left;
margin-right:20px;
}
.right {
float:right;
margin-left:20px;
}
.left, .right {
border:1px solid #000;
padding:3px;
}
Декларацията на 3ти ред ще добави 20px разстояние отдясно на елемента. В някой бъдещ урок ще разгледаме подробно свойството margin, но за сега трябва да знаеш, че се използва за добавяне на външно разстояние между елементите.
Декларацията на 7ми ред пък ще добави 20px разстояние отляво на елемента.
Кода на 9ти ред е интересен. CSS ни позволява да приложим един и същ стил едновременно върху няколко различни елемента. Всичко, което трябва да направим е да поставим селекторите на един ред и ги разделим със запетайка.
Това е наистина полезен трик, който ще ти помогне да преизползваш един и същ код за стилизиране на няколко отделни елемента.
В случая, двете снимки освен разстоянието отляво и отдясно, приложено чрез индивидуалните селектори (ред 1 и 4), ще придобият и стила от редове 10 и 11.
Декларацията на 10ти ред ще добави 1px рамка около снимката, която ще бъде черна, непрекъсната линия.
Декларацията на 11ти ред пък ще добави 3px вътрешно разстояние (разстоянието е между рамката и елемента) от всички страни на елемента. Свойството padding ще бъде разгледано подробно в някой бъдещ урок, но най-важното, което трябва да знаеш за него е, че се използва за добавяне на вътрешно разстояние.
Крайният резултат от упражнението:
Надявам се, че научи нещо полезно, което ще приложиш в някой свой сайт.
Как ще ти помогне ли наученото от този урок? Лесни и разбираеми ли бяха стъпките? Ще се радвам, ако споделиш коментара си по-долу.
Използвани снимки
Снимка към упражнението: Todd Petrie
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Супер, аз помолих за този урок :)
Всъщност самия урок ми се стори малко труден (или дълъг). От примера се ориентирах.
Тествах и че може да вкараме изображението вътре в параграфния текст и то ще се появи на нивото на текста до който е вмъкнато. Бих добавил и style="text-align: justify;". Поздрави!
2
Благодаря за коментара. Този урок не беше плануван за сега, но реших да го добавя заради желанието ти да разбереш повече за тази техника :)
Наистина урока стана малко дълъг и ще се опитам в бъдеще да бъда малко по-кратък. Естествено не за сметка на качеството :)
Използването на text-align: justify; в много случаи е също подходящо. А за да се улесниш още повече, ти препоръчвам да стилизираш страницата си чрез външен CSS файл. Успех :)
3
Здравей, изобщо нищо не мога да разбера и нищо не ми се получава.
Не мога да задам body при положение че вече съм го задал един път в CSS файла просто при мене нищо не става.
Искам да постигна това http://www.barmagazin.net/index32.html, но както виждаш това е правено с web page maker снимка от ляво заглавие на артикул с текст от дясно. Това искам да го постигна в CSS файл на XHTML 1.0 Strict тоест на тази страница: http://www.barmagazin.net/index14.html текста да не е по снимката а до него. Извинявам ти се предварително, но нищо не разбрах от урока. Има ли вариант да помогнеш???
4
Джават, позволи ми да се обадя първи :)
Антоне, мисля че така ще ти стане по ясно:
В head частта слагаш това:
<style type="text/css"> .left { float:left; margin-right:20px; } .right { float:right; margin-left:20px; } .left, .right { padding:16px; border:1px solid #000; } </style>В body частта слагаш това:
Картинката, в твоя случай, трябва да е преди първия текст.
Поздрави!
5
Дани, благодаря ти, но това изобщо не е вариант за мен. Недопустимо е за мен в head да слагам код. Целта ми е кода на 100% процента да е във външен CSS файла както е в случая http://www.barmagazin.net/index14.html и някой други страници на сайта.
Поставянето на код в head и отделно в css файл e опасно за SEO оптимизирането на сайта, и може да обърка "паяците" и "роботите" на google който обхождат. Дори някъде в нета ще видиш, че е написано това, ако се прави, да е най много 1 път, но не се препоръчва. Не мога да си позволя такова нещо, поради това че сайта реализира меко казано "зверски продажби". На мен това ми е идеята кода да е от външен CSS файл по този начин кода става максимално изчистен а това влияе на скороста на зареждане на страниците, класирането в google и други. Предполагам и Джават ще се съгласи с това. Майката му е в чистия код и сематично написания текст.
Джават, единствения начин според мен е с class стойноста в css файла както съм процедирал досега за настройки на снимки и текст, но просто незнам какви стойности да задам за снимката и текста???
Още един път ще те помоля да дадеш едно рамо. Сигурен съм, че е нещо което не е толкова сложно, но на мен ми е трудно, защото съм самоук.
Поздрави
6
Здравейте. Антоне, стила, който съм задал на body е примерен и не е проблем, ако го пропуснеш след като ти вече си задал друг стил.
Съгласен съм, че е най-добре CSS стила да бъде във външен файл. Предимствата са страшно много.
Колкото до проблема ти, това което искаш да постигнеш е сравнително лесно, но трябва да се обмисли още при самото създаване на layout-a на страницата, защото е нужно елементите да се групират по подходящ начин. В момента няма магически начин с малко CSS да направиш това, което искаш.
Създаването на структура (layout) и позиционирането на елементи е тема за отделен урок, който ще се постарая да добавя възможно най-скоро.
Докато кача урока обаче, разгледай този сайт, в който има различни видове layout-и. Свали тези, които ти се струват интересни и им разгледай кода. Надявам се това да ти даде някои идеи.
7
Здравей, Джават
Това нещо постигнах до момента: http://magazine.barmagazin.net/rabotna-proba.html. Отваря го идентично във всякакви браузъри (или поне аз си мисля така).
Както ще видиш от css файла, направил съм снимката и целия текст с отделни class-ове.
Снимката е: .oneColFixCtr #container #mainContent p.bar2 { margin-left: -346px; width: auto; height: auto; } Заглавие (примерно) артикул: .oneColFixCtr #container #mainContent p.bar3 { font-family: "Courier New", Courier, monospace; font-size: 24px; margin-left: 500px; margin-top: -400px; width: auto; height: auto; text-align: center; font-weight: normal; } Първи ред текст: .oneColFixCtr #container #mainContent p.bar4 { font-family: "Courier New", Courier, monospace; font-size: 14px; margin-left: 500px; margin-top: -5px; width: auto; height: auto; text-align: center; font-weight: normal; } Втори ред текст: .oneColFixCtr #container #mainContent p.bar5 { font-family: "Courier New", Courier, monospace; font-size: 14px; margin-left: 500px; margin-top: -2px; width: auto; height: auto; text-align: center; font-weight: normal; }В случая, единственното което не мога да си обясня е защо на текста - заглавието и двата реда един под друг, трябва да задавам по отделно class, за да се получат?
Това успях за сега сам да направя. Виж го и си кажи мнението. Може ли да се получи по по-лесен начин? Поздрави.
8
Здравей. CSS кода ти се повтаря твърде много. Не е нужно да повтаряш едни и същи стойности навсякъде, защото много от тях се унаследяват т.е. щом ги зададеш веднъж на родителския елемент, вътрешните елементи автоматично ги приемат.
В твоя случай, ако зададеш font-family на #mainContent, елементите, които са в този елемент (h1 и p) автоматично приемат този шрифт. Не е нужно да го задаваш отново на тях.
Пак казвам, че няма магически начин с малко код да постигнеш желания резултат. Може би трябва да наблегнеш малко повече върху усвояването на CSS. Определено ще ти бъде по-лесно.
Реших да направя набързо един прост пример, в който да видиш как аз съм направил нещата. Разгледай го внимателно и се опитай да го пресъздадеш при теб. Успех!
9
Благодаря ти Джават. За момента много ясни, но и много неясни неща. Примерно защо нямаш в кода container и още много други. Нещата ги правя на Дриймуивър и там са ми готови: 1 colum fixed, centered само в последствие ги променям ..... много е за разказване ..... да ПРАВ СИ за CSS.
Поздрави
10
Първо голямо благодаря за това:
Защото при мен е:С твоя вариант сега ми го отваря в компютъра така като е в нета.
При теб в кода на страницата, видях че няма примерно - width="425" height="335" на снимките. Направих го и при мен на две страници за момента като съм следвал твоята последователност 'alt' и след това 'title' и в този ред на мисли да те питам, това че няма 'width' и 'heigh' на снимките няма ли да повлияе по някакъв начин за индексирането и класирането на снимките в google?
Според мен няма, НО ти си човека, който може да каже в случая. Дори си мисля, че по твоя начин се изчиства кода на страницата още повече!
Поздрави
11
Още веднъж, Браво! Напълно разбираем и лесен за прилагане урок. На моменти ми се е налагало да го използвам, но не съм се сещал за това :)
12
@Антон: Поставянето на 'width', 'height' и 'title' не е задължително. Единствения задължителен атрибут (освен 'src') е 'alt' и добрата индексация на снимките зависи най-вече от стойността на 'alt'. Така че спокойно можеш да ги пропуснеш, ако желаеш. Определено кода ще стане по-чист и лесен за поддръжка :)
@Neytrex: Благодаря. Радвам се, че си открил нещо полезно :)
13
Здравей, Джават. Върнах 'width' и 'height' заради тази статия: http://uroci.net/urok/2781/HTML-%D1%83%D1%80%D0%BE%D0%BA---%E2%84%968-%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F.html и по точно в урока 'Атрибути на тага за изображение' заради това изречение:
"Въвеждането на тези атрибути указва на браузъра точно колко място да отдели за изображението, вследствие на което страницата се зарежда по-бързо, а бързината на зареждане на един HTML-документ е от голямо значение за посетителите на страницата."
При мен след като ги махнах страницата зареждаше по-бавно и затова ги върнах има логика макар браузарите да ги оразмеряват автоматично.
Кажи си мнението. Поздрави
14
Здравей. Пак казвам, че атрибутите 'width' и 'height' могат да се сложат пожелание. Ако прецениш, че са ти от полза и наистина страницата зарежда по-бързо с тях, сложи ги. Ако прецениш, че кода става твърде наблъскан и труден за поддръжка, не ги използвай. Това е твой избор. Аз единствено ти казвам да не забравяш стойността на атрибута 'alt', защото тя е от голямо значение. Поздрави :)
15
Здравей, Джават остана ми време и развих твоя пример като добавих от ляво навигация - меню: http://magazine.barmagazin.net/rabotna-1.html
Сега обаче искам към това да добавя и h1 заглавие което да е преди снимките и текста, тоест от горе центрирано над снимките и текста.
Възможно ли е това?
Поздрави
16
Здравей. Да, възможно е. Просто добави h1 заглавието веднага след <body> и му задай text-align: center; чрез CSS. Това би трябвало да ти свърши работа :)
17
Здравей, Джават. Благодаря ти отново. Ето го резултата: http://magazine.barmagazin.net/rabotna-1.html
Имам обаче следното питане: Класовете <div class="artikul"> и <div class="opisanie"> редно ли е да са с такива наименования artikul и opisanie? Питам, защото при div има id=main-content и container. Не е ли правилно да е нещо, което пряко се отнася до съдържанието в страницата? Валидира го, но лично на мен ми се струва странно, и ми е интересно защо при страница изградена от "класове" всеки клас може да е с каквото си искаш наименование.
Ще чакам отговора ти!
Поздрави
18
Здравей. Стойностите на class и id могат да бъдат каквито си пожелаеш. Логичното обаче е, те да бъдат пряко свързани със съдържанието. Например <div> с class="artikul" ще ти подскаже, че съдържанието е свързано с артикул от страницата. Съответно, <div> с class="menu" ще ти подскаже, че в този елемент се съдържа менюто. Точно това е хубавото на class и id, че стойностите им не са строго фиксирани, а се определят от нас, за да ни бъде по-лесно с изграждането на нашата уеб страница.
19
Съвсем наскоро от разработчиците на Skitch пуснаха версия и за всички нас, които за радост или за съжаление използваме Windows за операционна система.