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

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рия начин Smile






/ Трябва да сте регистриран за да напишете коментар /
От: matev92
20:23 15-09-2009
мисля че няма нужда от толкова ненужни коментари, несвързани с кода...
1