lt;div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>

<div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>

</div>

</div> 

 

Якщо зараз спробувати переглянути сторінку HTML ми нічого не побачимо. Потрібно налаштовувати стилі. Але якщо спробуємо дослідити код HTML в браузері ми побачимо створену структуру.

Четвертий крок — створення CSS (або магія в дії)

Перше, що ми зробимо, це скинемо стандартні налаштування стилів браузеру таким кодом:

* {

margin: 0;

padding: 0;

border: 0;

outline: 0;

}

 

Тепер починаємо описувати параметри блоків по ієрархії. Тобто перший на черзі стиль для блоку “wrapper”.

   #wrapper{

       width:633px;

       height:500px;

       border:8px solid black;

       margin:0px auto;

   }

 

Висоту задаємо таку ж як і в основного зображення. У мене це 500рх. Ширину вираховуємо так:

Ширина основного зображення + Ширина табу + Розділення

, де Розділення – відстань між табами та основним зображенням (його ми встановимо пізніше)

Параметром border:8px solid black; встановлюємо обведення блоку чорною рамочкою, шириною в 8рх.

Параметром margin:0px auto; центруємо блок “wrapper” в материнському контейнері.

Мусить вийти щось таке:

Тепер задамо стилі маркованому списку.

   ul{

       background:#000;

       width:125px; /* ширина картинки табу */

       float: left;

       list-style: none;

       border-right:8px solid black;

   }

Параметром list-style: none; відключаємо стиль маркерів.

Параметром border-right:8px solid black; Встановлюємо ширину Розділення (лінія справа від списку чорним кольором).

Налаштовуємо висоту кожного пункту списку.

   ul li{

       height:125px; /* Height of Tab Image */

   }

Дивимося на результат:

Стало краще. Вимальовується структура

Налаштовуємо стилі картинки, що знаходяться в маркованому списку в тегу a.

   ul li a img{

       /* Приблуда, для експлорера */