ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Код

CSS на практика - съвети, трикове и техники. От Марк Нюхаус.

Инициативата на THE WEB STANDARDS PROJECT'S (WaSP) за ъпргрейд на браузърите подтикна много дизайнери да започнат да прилагат стандартите в уеб дизайна си, използвайки CSS вместо TABLE за оформление.

"Таблиците са мътви..."

Няколко дизанери поеха щафетата в писането на уроци, които ни помагат да прескочим първоначалния шок при прехода към дизайн без таблици. Първите опити се съсредоточаваха върху създаване на оформление с две или повече колони чрез използване на CSS позициониране, вместо чрез TABLE, позволявайки по този начин (пълно) разделяне на структурата от външния вид. Тези по-общи техники бяха документирани и съхранени в сайтовете на Ерик Костело - glish и Роб Чандене - Blue Robot. Други пък се присъединиха като последваха съветите в урока на Оуен Брикс относно Box model на CSS и заобиколния трик на Тантек Чилик, който беше разгледан в детайли от Ерик Костело и обяснен от Тантек. А Donimo събра в една галерия повече от 200 сайта (бел.прев. Da Groove Manifesto е един от тях), които демонстрират гъвкавостта и разнообразието от оформления постигнати чрез CSS.

"... да живеят таблиците"

Докато тези отлични ресурси се отнасяха до по-обширния проблем относно създаването на основното оформление единствено чрез CSS позициониране, се появиха други практически въпроси. Това бяха проблеми, които ние като дизайнери лесно можехме да разрешим, използвайки таблици, но трудно намирахме решението с CSS. Подобни въпроси бяха поставени в Webdesign-L мейлинг листа (бел.прев. за тези от вас, които са добре с английския горещо препоръчвам този мейлинг лист) под заглавието "Таблиците са мъртви ... да живеят таблиците."

Въпросът

Да предположим, че имате купчина tumbnail изображения, които са връзка към по-големите версии на тези изображения - доста често срещан тип уеб страница. Да предположим още, че към всяко изображение има картко описание, което искате да бъде центрирано под самата картинка. И за да използвате възможно най-голяма част от екрана на браузъра, искате тези двойки картинка-описание да са подредени в редове, толкова дълги, колкото е широчината на прозореца и автоматично да продължават на следващия ред. С последното изискване ние излезнахме от територията на TABLE-ците и навлезнахме в територията на CSS.

Стъпка по стъпка

Нека разгледаме този проблем стъпка по стъпка. Първото изискване е tumbnail-ите на изображенията да имат центрирани описания под тях. Това е относително лесно: в HTML кода вмъкнете своето изображение, следвано от
и след това поставете описанието си в параграф, който е центриран (чрез CSS).

След това искаме да подредим тези двойки изображение-описание по цялата ширина на браузърния прозорец. Използвайки TABLE-ци за оформление, всяка такава двойка щеше да отиде в отделна TD клетка. Изпозвайки CSS, ще трябва да ги поставим в отделни DIV. За да ги накараме да се подредят по хоризонтал и по ширината на целия прозорец, използваме FLOAT атрибута на CSS, който ще накара всеки от тези DIV да се "залепи" от лявата страна на предишния.

Ето как може да изглежда CSS кода на този етап:

div.float {
  float: left;
  }
  
div.float p {
   text-align: center;
   }

А ето и HTML кода:

<div class="float">
<img src="image1.gif" width="100" height="100"

alt="image 1" /><br />
<p>caption 1</p>
</div>
<div class="float">
  <img src="image2.gif" width="100" height="100"

  alt="image 2" /><br />
  <p>caption 2</p>
  </div>
<div class="float">
  <img src="image3.gif" width="100" height="100"

  alt="image 3" /><br />
  <p>caption 3</p>
  </div>

И ето как изглежда в браузъра:

image 1

описание 1

image 2

описание 2

image 3

описание 3

Следващото изискване може да бъде изпълнено единствено чрез CSS. Искаме двойките изображение-описание автоматично да се пренасят на следващия ред, ако не се съберат в една ширина на прозореца на браузъра. Използването на FLOAT с DIV секциите вече реши този проблем. Ако копираме тези примерни tumbnails няколко пъти, те ще се пренесат автоматично в края на прозореца (за да видите как действа това променете ширината на прозореца си):

image 1

описание 1

image 2

описание 2

image 3

описание 3

image 1

описание 1

image 2

описание 2

image 3

описание 3

Сега, да предположим, че искате да покажете на вашия сайт повече от една категория thumbnails и искате да ги обедините визуално - с общ фон и/или оградени с линия. Просто ги обединете в един общ DIV: 

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }

Когато обаче правим това, се сблъскваме с един проблем. Когато "залепяте" един елемент за друг, използвайки FLOAT, този елемент вече не заема никакво място, а фонът и ограждащата изображенията линия се показват върху тях вместо около тях. Затова трябва да напъхаме освен "залепените" една към друга DIV секции, някакво друго съдържание в общия DIV. Нещо от сорта на DIV като този:

div.spacer {
  clear: both;
  }

Ето ви сега следния HTML (забележете, че използваме spacer DIV секции и в началото, и в края на общата DIV секция)

<div class="container">
<div class="spacer">
&nbsp;
</div>
<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
  </div>
<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
  </div>
<div class="float">
  <img src="image3.gif" width="100" height="100"

  alt="image 3" /><br />
  <p>caption 3</p>
  </div>
<div class="spacer">
  &nbsp;
  </div>
</div>

Резултатът, от което е следният:

image 1

описание 1

image 2

описание 2

image 3

описание 3

image 1

описание 1

image 2

описание 2

image 3

описание 3

По кода на сам маршал.

DIV в друг DIV, TABLE в друг TABLE, каква е разликата?

И така имаме купчина DIV вместени в друг DIV. С какво това е по-добро от употребата на таблици по същия начин? Отговорът се крие в начина, по който са били замилсени самите тагове. DIV правят групирането по логика, те са структурни елементи. Дори когато са един в друг те остават структурен код. В нашия пример, ние групирахме изображения с техните описания (на първо ниво) и след това групирахме тези двойки изображение-описание с подобни на тях (на второ ниво). Това са примери за структурно групиране, което може да бъде изпълнено доста добре, чрез употребата на DIV тага.

В TABLE обаче се създава отношениемежду колоните и/или редовете, от една страна, и TABLE клетките от друга. Когато ги използваме за оформление, ние разрушаваме структурното значение на таблицата. И отново използваме структурни елементи за оформяне на външния вид. Това още повече осложнява проблема.

FORM(а) и функция

TABLE се използва често, за да се оформят онлайн форми - срещу всеки FORM елемент да стои някакво заглавие. Макар да може да се поспори дали в случая изпозлването на CSS е по-уместно от това на TABLE, но както ще видим CSS техниката, която ще опиша по-долу, ще се окаже по-полезна за подобни нужди.

Едно типично оформление на FORM елеметите е следното: заглавията са от лявата страна, подравнени от дясно, а елементите на формата са вдясно, подравнени отляво, като заглавия и елементи се срещат по средата:

Име:
Възраст:
Номер обувки:
Коментари:
 

По оригиналния код на Ерик Майер.

Горната форма е създадена без да се използва TABLE. Тук отново използваме FLOAT елемента, за да позиционираме елементите. Номерът е да се създаде такъв DIV, който да работи като ред от TABLE. След това ще направим други два SPAN: един за заглавията и друг за елементите на формата. След това залепваме SPAN-ът със заглавието от лявата страна на този с елементите, а SPAN-ът с елементите на формата - вдясно към другия. В SPAN секцията, подравнете текста от дясно, а в другия SPAN - обратното - подравнете го отляво.

CSS кодът изглежда така:

div.row {
  clear: both;
  padding-top: 10px;
  }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 335px;
  text-align: left;
  }

CSS кодът по-горе освен това задава и дължините на SPAN елементите. Те могат да бъдат както абсолютни величини, така и проценти, сборът от които обаче трябва да е максимум 100% или по-малко - в зависимост от полетата около текста и широчината на бордюрите. В примера, аз вмъкнах формата си в друг DIV, за да мога да задам цвят на фона и бордюра.

HTML кодът на примера изглежда така:

<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>

  <form>
    <div class="row">
      <span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>

    <div class="row">
      <span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">

      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Comments:</span><span
class="formw">

        <textarea cols="25" rows="8">
        Go ahead - write something...
        </textarea>
      </span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>

 </form>

</div>

Центриране

Може би забелязахте, че една част от STYLE атрибута за общия DIV съдържа следното: margin: 0px auto;. Това позволява широкият 400 пиксела DIV да бъде центриран (в съвместимите със стандартите браузъри). Някои браузъри, като IE5.x за Windows пренебрегват това, но ще центрират (неправилно) DIV, които са със зададен TEXT-ALIGN: center. За да се центрира един DIV в тези броузъри е нужно един DIV да бъде заграден от друг DIV, за който е зададено, че TEXT-ALIGN: CENTER, а вътрешният DIV - MARGIN: auto (и TEXT-ALIGN: LEFT, за да бъде подравнен правилно текстът). Вижте Резервоара на Роб Шандене за тази и някои други техники за центриране.

Разделяй и владей

Има и друго, подобно на горното оформление, което често се решава, чрез употребата на таблици. При него вместо да се срещат по средата, два елемента се разполагат в срещуположните краища на прозореца. Такъв е случаят, когато искате логото да е в горния десен ъгъл на страницата, а някакви навигационни елементи горе вляво:

Home > Products[logo]

Тук ще използваме същия DIV.ROW, но с различни SPAN. Разликата е там, че текстът в левия SPAN ще бъде подравнен от ляво, а този в десния - вдясно.

CSS: 

div.row span.left {
  float: left;
  text-align: left;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

div.row span.right {
  float: right;
  text-align: right;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

HTML: 

<div style= "width: 90%; background-color: #666;
border: 1px solid #333; padding: 0px; margin: 0px auto;">
<div class="spacer"></div>

<div class="row"><span class="left">
Home > Products</span>
<span class="right">

[logo]</span></div>

<div class="spacer"></div>

</div>

CSS Помощ

Таговете ACRONYM и ABBR са полезни, макар и рядко използвани. Те са тагове, които използват атрибута TITLE, за да обяснят какво се крие зад акронима или съкращението. Повечето съвременни браузъри с нищо не помагат на вашите посетители, за да им подскажат че зад думите в страницата се крие нещо, което ще им помогне да разберат акронима или съкращението. Тук се намесва CSS.

В таблицата си със стилове, можете да добавите бордюр от долната страна на думите между тези тагове, за да привлечете вниманието към тях. Освен това можете да промените курсора така, че да изглежда като въпросителен знак (в браузърите, които поддържат тази функция). Но не сте ограничени само с HTML таговете. Създайте class наречен .help и използвайте SPAN, за да дадете повече информация за думите или фразите, които могат да предизвикат объркване.

Този CSS код:

abbr, acronym, .help {
  border-bottom: 1px dotted #333;
  cursor: help;
  }

се използва заедно с TITLE атрибута в ABBR или ACRONYM таговете, за да се създаде допълнително подчертаване, което е по-различно от подчертаването за връзките. Освен това промяната на курсора допълнително подсказва, че думата не е връзка, а TITLE атрибутът показва обяснението на съкращението или акронима. За пръв път видях това на сайта на Sander Tekelenburg.

Проверявай по два пъти...

За пръв прочетох, че един списък може да бъде изведен на един ред в Cascading Style Sheets на Бос и Лай. За пръв път го видях в употреба в сайта на Кристофър Смит BabbleList. Номерът се състои в това един списък от няколко подточки да се показва на един ред или хоризонтално. И така вместо:

  • Item one
  • Item two
  • Item three
получавате:
  • Item one
  • Item two
  • Item three

Ако добавите малко полета и бордюри се получава:

  • Item one
  • Item two
  • Item three
CSS: 
li.inline {
  display: inline;
  padding-left: 3px;
  padding-right: 7px;
  border-right: 1px dotted #066;
  }

li.last {
  display: inline;
  padding-left: 3px;
  padding-right: 3px;
  border-right: 0px;
  }
HTML: 
<ul>

<li class="inline">Item one</li>

<li class="inline">Item two</li>

<li class="last">Item three</li>
</ul>

Краят? Или просто началото...

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