Обграждане на текст около снимка

Имал/-а ли си случай, в който знаеш, че съдържанието на страницата ти е увлекателно и приятно за четене, но в момента, в който решиш да го “разчупиш” с няколко изображения откриваш, че всичко изглежда някак си небалансирано? Пространството от дясно на снимката ти изглежда твърде празно, текста преди и след снимката е твърде отдалечен, а самите снимки сякаш не пасват добре в стила на сайта.

Не се притеснявай! В този урок ще ти помогна да се справиш с всичко това.

Обграждането на текст около снимка е доста често срещана техника, която може да се забележи в различни по тема сайтове. Най-често се използва в случаите, когато имаме определено количество текст и поне едно изображение, и искаме да обединим двете в общ блок от съдържание, което да подсказва връзка между тях.

Проблема на тази техника е, че не може да се постигне единствено с html, а трябва да се комбинира с малко CSS. Добрата новина пък е, че за да постигнем задоволителен резултат са ни нужни не повече от няколко реда CSS.

В упражнението към този урок ще разгледаме един лесен и практичен начин за постигане на този ефект придружен с примерен стил.

Да започваме.

Упражнение

Текста, който ще използвам в това упражнение е от страницата на Гранд каньон в Wikipedia. Естествено, ти можеш да използваш свой собствен текст, който по-добре отразява темата/съдържанието на сайта ти.

За да съкратя максимално кода и дължината на страницата, ще използвам само няколко думи от началото и края на всеки текстов параграф. В работните файлове обаче, текста ще бъде в пълният си вид.

Ще използвам 2 еднакви, но различни по големина изображения. Целта на упражнението ще бъде да обгърнем първото с текст отляво, а второто отдясно.

Структурата на работните файлове изглежда така:

Структура на работните файлове

Стъпка 1

Създай нов html документ и постави в него няколко текстови параграфа. Не забравяй да прикачиш външен CSS файл, защото ще ни бъде нужен. Моят резултата изглежда така:

index.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Обграждане на текст около снимка</title>
  8.         <link href="style.css" rel="stylesheet" type="text/css" />
  9.     </head>
  10.     <body>
  11.         <h2>Обграждане на текст около снимка</h2>
  12.         <p>Националният парк „Гранд Каньон … … национални паркове в САЩ.</p>
  13.         <p>На негова територия се намира … … пропаст с отвесни стени.</p>
  14.         <p>Паркът предлага различни … … открита на 28 март 2007 година.</p>
  15.     </body>
  16. </html>

Резултата, както виждаш, е обикновена страница с текст.

Обикновена страница с няколко текстови параграфа

Стъпка 2

Добави по едно изображение преди отварящите тагове на втори и трети параграф.

index.html

  1. Преди
  2. <p>Паркът предлага различни … открита на 28 март 2007 година.</p>
  3. <p>Паркът предлага различни … открита на 28 март 2007 година.</p>
  5. След
  6. <img src="image/grand-canyon-small.jpg" alt="Снимка на Grand Ganyon" />
  7. <p>На негова територия се намира … пропаст с отвесни стени.</p>
  8. <img src="image/grand-canyon.jpg" alt="Снимка на Grand Ganyon" />
  9. <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 ще бъде разгледано подробно в някой бъдещ урок, но най-важното, което трябва да знаеш за него е, че се използва за добавяне на вътрешно разстояние.

Крайният резултат от упражнението:

Стила придава на страницата естетически вид

Надявам се, че научи нещо полезно, което ще приложиш в някой свой сайт.