Главная » Создание сайтов » Верстка » Блок с закругленными краями без картинок

Блок с закругленными краями без картинок

Блок с закругленными краями без картинокТаких блоков целое множество. Однако их метод отличается от моего. Хотя бы тем, что мой состоит из html и css кода, а другие еще с картинками. Возможно вы скажите что мой метод некрасив, неаккуратен и т. п. Однако такой метод может пригдится... Его можно усовершенствовать!

Чтобы не лить воду в уши, лучше я закомментирую строки и вы увидете что, где, для чего.

Вот, смотрите:

ul {width:23%;list-style:none;}
ul li {margin-bottom:8px;}
/* Nav Style */
.nav a {
display:block; /* Устанавливаем все на одном месте */
border: solid #666; /* Создаем обводку. Замедьте, цифровое значение не указано! */
border-width:0 1px; /* Делаем само закругление */
text-decoration:none;
color:#000;
background:#e4e4e4;
}
.nav a b {
display: block; /* См. выше */
position:relative; /* Позиционирование внутри родителя */
top: -1px; /* Вверх на один px */
left: 0; /* Значение 0 отступа слева */
border:solid #666; /**/
border-width:1px 0 0; /* Восстанавливаем верхнюю полосу border, которую мы убрали выше */
font-weight:normal; /* Убираем значение b, которое дано в html коде */
}
.nav a b b {
border-width:0 0 1px; /* Можно сказать, ставим наместо все бордеры! */
top: 2px; /* Отступ сверху 2px */
padding:1px 6px; /* Настраиваем как вам угодно */
}
.nav a:hover b {background:#666;color:white; } /* Фишка для ссылок */

<ul class="nav">
<li><a href="#"><b><b>Link1</b></b></a></li>
<li><a href="#"><b><b>Link2</b></b></a></li>
<li><a href="#"><b><b>Link2</b></b></a></li>
</ul>

Способ понятен? Если нет, могу объяснить. Кстати, его можно использовать для чего угодно! Например для текста. С уважением, Vasilenko Ivan!

Комментарии — 5 комментариев

  1. #135 RAINBOW в 1:47, 27 ноября 2008:

    Ответить | Цитировать

    Вы большуший молодец!!! и спасибо Вам за это!!!

  2. #139 egoholic в 14:35, 29 ноября 2008:

    Ответить | Цитировать

    border: solid #666; /* Создаем обводку. Замедьте, цифровое значение не указано! */

    Не понял, что за цыфровое значение? вы имели в веду толщину рамки?

    По правилам КСС, в таком порядке не допустимо обьявлять свойства элемента, на первом месте всегда должна быть толщина рамки, а ее и вовсе нет. Т.е. валидацию такой код не пройдет 100% А как насчет кроссбраузерности, такие вот закругленные углы во всех браузерах поддержываются?

  3. #140 WebMast в 15:30, 29 ноября 2008:

    Ответить | Цитировать

    Насчет валидации не знаю. Хотя скорее всего не пройдет!

    На счет кроссбраузерности, то вроде нормально. Тестировалось под Оперой, ФФ, konqueror!

  4. #143 Igoyer в 11:29, 1 декабря 2008:

    Ответить | Цитировать

    А как оно взаимодействует с SEO? Несколько напрягает двойной тэг .

  5. #4363 gps в 12:20, 26 августа 2009:

    Ответить | Цитировать

    Спасибо отличная статья...

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting