| |
|
|
| | Добрый день уважаемые посетители форума.
Передо мной встала задача сделать блок, с закругленным двойным бордером, внутри которого находятся неограниченное число маленьких плавающих блоков, так чтобы они "выстраивались" в зависимости от размера внешнего блока. Закругленные углы сделал так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
<title>Test</title>
<style type="text/css">
div.box { width: 95%; background: #f4f4f4; }
div.left-border { background: url(images/sect_left_border.jpg) top left repeat-y; }
div.right-border { background: url(images/sect_right_border.jpg) top right repeat-y; }
div.top-border { background: url(images/sect_top_border.jpg) top left repeat-x; }
div.bottom-border { background: url(images/sect_bottom_border.jpg) bottom left repeat-x; }
div.content { color: #000; padding: 0 21px; margin: 0; text-align: justify; }
div.top-left { background: url('images/sect_top_left.jpg') top left no-repeat; height: 21px; }
div.top-right { background: url('images/sect_top_right.jpg') top right no-repeat; height: 21px; }
div.bottom-left { background: url('images/sect_bottom_left.jpg') bottom left no-repeat; height: 21px; clear: both; }
div.bottom-right { background: url('images/sect_bottom_right.jpg') bottom right no-repeat; height: 21px; }
/*div.float { float:left; font-size:8pt; height:75px; margin:10px 5px 5px 5px; padding:0px; text-align:center; width:90px; }*/
</style>
</head>
<body>
<div class="box">
<div class="top-border"><div class="top-left"><div class="top-right"></div></div></div>
<div class="left-border"><div class="right-border"><div class="content"><div class="float">block1 block1 block1 block1 block1 block1 block1</div>
<div class="float">block2 block2 block2 block2 block2 block2 block2 block2</div>
<div class="float">block3 block3 block3 block3 block3 block3 block3 block3</div></div></div></div>
<div class="bottom-border"><div class="bottom-left"><div class="bottom-right"></div></div></div>
</div>
</body>
</html>
|
Результат можно увидеть здесь:
http://omgtempest.narod.ru/test1.html
Затем раскомментарил класс float. И все полетело к чертям.
http://omgtempest.narod.ru/test.html
Не отображаются боковые бордеры и при уменьшении окна браузера, бэкграунд вылазит направо иногда.
Я новичок в CSS-верстке. Пробовал ставить флоаты на внешние блоки, не помогло. Как лечить? Спасибо. | |
| |
|
|
| |
|
|
| |
для: Organ
(02.04.2007 в 13:31)
| | | если один или несколько подряд блоков с указанием float, то после последнего пишется
<div class=clear></div>
.clear{clear:both;
height:1px;
line-height:1px;
font-size:1px;
} | |
| |
|
|
| |
|
|
| |
для: AlexSol
(02.04.2007 в 13:56)
| | | Ваш пример работает только если блоки расположены все горизонтально. Если блоки начинают располагаться в два и более ряда(как и было задумано) бордер начинает пропадать. Вот пример:
http://omgtempest.narod.ru/test_clear.html | |
| |
|
|
| |
|
|
| |
для: Organ
(02.04.2007 в 15:21)
| | | выложите архив с html+ картинки, посмотрю. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(02.04.2007 в 15:31)
| | | Тут сам файлик тест + 8 картинок (4 уголка и 4 бордера). | |
| |
|
|
| |
|
|
| |
для: Organ
(02.04.2007 в 15:44)
| | | бывает иногда подглючивает. если сделать
div.right-border { background: url(images/sect_right_border.jpg) top right repeat-y; border-top:1px solid #fff;}
|
то все ОК. но как я понимаю такой вариант не устроит. попробуйде сверстать подругому. примеры - http://www.html.it/articoli/nifty/nifty1.html и http://www.smileycat.com/miaow/archives/000044.php | |
| |
|
|
| |
|
|
| |
для: AlexSol
(02.04.2007 в 16:22)
| | | Спасибо за ссылки, но в общем то проблема не стоим в том чтобы закруглить углы - с этим я разобрался и с помощью картинок (см 1ю ссылку там все работает). Проблема с плавающими блоками. И никто не гарантирует, что если я закруглю углы каким то другим способом плавающие блоки не будут глючить. | |
| |
|
|
| |
|
|
| |
для: Organ
(03.04.2007 в 09:15)
| | | Так, есть проблески. Даже почти все заработало. Добавил в классы left-border и right-border.
{ float: left; width: 100%; }
http://omgtempest.narod.ru/test_new.html
В фоксе и опере все работет на ура. В ИЕ есть проблемка когда начинаю сужать блок и последний плавающий переходит на другую строку, как раз перед этим все немного сбивается. Буду разбираться как лечить, если поможете буду признателен.
Все портит блок .content и как я понимаю его паддинг... Но как можно задать паддинг в плавающей модели чтоб все не съезжало. Интересно, в каком месте нарушается кроссбраузерность. | |
| |
|
|
