Закруглённые уголки для блока переменной длины
- Автор темы prozaik81
- Дата начала
- Статус
Serg@NT
Well-Known Member
- Регистрация
- 20.02.2010
- Сообщения
- 506
Делайте 4 вложенных элемента с margin: 0; padding: 0; К каждому прикрепляйте фоном один из углов через
Код:
background { url(...) top left no-repeat }
background { url(...) top right no-repeat }
background { url(...) bottom left no-repeat }
background { url(...) right right no-repeat }я так и поступил(если вы заметили). только использовал 2 элемента(так как высота блока постоянная)
Serg@NT
Well-Known Member
- Регистрация
- 20.02.2010
- Сообщения
- 506
Нет, не заметил, потому, что вы поступили не так. Нужны вложенные друг в друга блоки, внутрь которых вложен контент, а не фиктивные, да ещё и с позиционированием.
В вашем случае
К .left прикрепляете левые углы, к .right - правые, к .content - остальной фон. Для всех трёх margin: 0; padding: 0;. И без всякого позиционирования.
В вашем случае
Код:
<div class="left">
<div class="right">
<div class="content">
<ul>
...
</ul>
</div>
<div>
<div>
medwoodu
Злобный модер
- Регистрация
- 22.12.2005
- Сообщения
- 1 418
http://www.linkexchanger.su/2008/36.html
Serg@NT
Well-Known Member
- Регистрация
- 20.02.2010
- Сообщения
- 506
много у кого много чего в IE не работает. Может, расскажете немного поконкретнее?
motek
злой как @
- Регистрация
- 13.04.2010
- Сообщения
- 730
Код:
<!DOCTYPE html>
<html>
<head>
<title>MSKHouses</title>
<meta charset="UTF-8"/>
<style type="text/css" media="screen">
/*
1.global reset and common settings
2.layout
3.blocks
*/
/************************************************************************************************************** 1.global reset and common settings */
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, li, span {
border: none;
margin: 0;
outline: none;
padding: 0;
}
body{
font: 16px Arial, Helvetica, sans-serif;
}
div.navigation {height: 60px; margin: 20px auto 0px auto; display: table;}
span.navigationL {background: url(http://h23771.srv3.test-hf.ru/test23/images/bg_navigation_stripe.gif) no-repeat; ; width: 24px; height: 60px; float:left;}
span.navigationR {background: url(http://h23771.srv3.test-hf.ru/test23/images/bg_navigation_stripe.gif) no-repeat; ; width: 48px; height: 60px; float:right;}
div.navigation ul {height:60px; margin:0px -24px 0px 0px; float:left;}
div.navigation ul li {height:60px;float:left;list-style:none;position:relative;background:url(http://h23771.srv3.test-hf.ru/test23/images/bg_navigation.png) repeat-x;}
div.navigation ul li a {display:block;padding: 18px; }
</style>
</head>
<body>
<div class="navigation">
<span class="navigationL"></span>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Советы</a></li>
<li><a href="#">Доска объявлений</a></li>
</ul>
<span class="navigationR"></span>
</div>
</body>
</html>- Статус
