Заоблени ъгли на меню.

Автор: debian

В този урок ще ви покажа няколкото начина за заоблено меню чрез картинки..

1. С дивове
2. С таблици
3. С таблици и вграден css

Демо (едно и също се получава при всички) – http://ezero-srebarna.hit.bg/menus.html

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

<link rel="stylesheet" href="файла.css" alt="css file">

Започваме с 1 -вия начин който е с 3 дива

<!-- почва CSS кода -->
<style type="text/css">
#wt1{
float:left; /* Ако не сложите това ще се размести :D */
width:10px;/* дължина */
height:30px;/* височина */
background-image:url(3.gif); /* Задаваме фон(картинка) */
}
#wt2{
width:600px;/* дължина */
float:left; * Ако не сложите това ще се размести :D */
height:30px;/* височина */
background-image:url(1.gif); /* Задаваме фон(картинка) */
}
#wt3{
width:10px; /* дължина */
height:30px; /* височина */
float:left; /* Ако не сложите това ще се размести :D */
background-image:url(2.gif); /* Задаваме фон(картинка) */
}
</style>
<!-- свършва CSS кода -->

<!-- 3те дива -->
<div id="wt1"></div>
<div id="wt2">text..text..text</div>
<div id="wt3"></div>
<!-- Свършиха -->

Или ако искате може да смените #wt1 , #wt2 , #wt3 на div.wt1 , div.wt2 , div.wt3
обаче после трябва да смените и id=“wt1″ , id=“wt2″ , id=“wt3″ на class=“wt1″ , class=“wt2″ , class=“wt3″

Айде да не ви бъркам и да продължим със 2рия начин Smile (мисля , че няма нужда от коментари в кода)

<!-- почва CSS кода -->
<style type="text/css">
.wt1{
width:10px;
height:30px;
background-image:url(3.gif);
}
.wt2{
width:600px;
height:30px;
background-image:url(1.gif);
}
.wt3{
width:10px;
height:30px;
background-image:url(2.gif);
}
</style>
<!-- почва CSS кода -->

<!-- табличката -->
<table cellspacing="0" cellpadding="0" border="0">

<tr><td class="wt1"></td>

<td class="wt2"></td>

<td class="wt3"></td>

</tr></table>
<!-- Стига толкова :D -->

За това толкова и продължаваме с 3тия пример , който е пак с таблица , но CSS кода
е вкаран в нея 🙂

<!-- табличката -->
<table cellspacing="0" cellpadding="0" border="0">

<tr><td width="10" height="30" style="background-image:url(3.gif);"></td>

<td width="600" height="30" style="background-image:url(1.gif);"></td>

<td width="10" height="30" style="background-image:url(2.gif);"></td>

</tr></table>
<!-- Стига толкова :D -->

Урокът е авторски!

Аз лично предпочитам 2рия начин