Помощник
|
Блоки с закругленными углами |
Slash_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Exterior |
10.4.2008, 9:36;
Ответить: Exterior
Сообщение
#2
|
|
Slash, используется несколько вариантов, чтобы сделать закругленные края элементов, самый распространенный - это оспользование изображений.
Вот пример блока с закругленными краями без использования изображений: <div>
<b style="font-size:1px; display:block; overflow:hidden;"> <b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden;height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b> </b> <div style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; border-style:solid; border-width:0px 1px;"> <b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b> <div style="padding-left:20px;"> <h1>Пример блока с закругленными краями</h1> </div> <b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b> </div> <b style="font-size:1px; display:block; overflow:hidden;"> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b> <b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b> </b> </div> |
|
|
Slash_hb
|
Сообщение
#3
|
|
а как сделать, чтобы блок еще и был определенной, но не фиксированной длины, например длина текта+поля, т.е. чтобы если я заменяю текст на несколько символов длиннее, то и блок растягивался?
|
|
|
Exterior |
11.4.2008, 0:39;
Ответить: Exterior
Сообщение
#4
|
|
Slash, тут уж без JavaScript`а не обойтись...
Пример: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Блок с закругленными углами by HTML.BY team</title> <script language="javascript" type="text/javascript"> <!-- function getWidthBlock() { var block = document.getElementById("wrap"); var divWidth = parseInt(document.getElementById("text").offsetWidth); block.style.width = divWidth +10 +"px"; } //--> </script> </head> <body onload="getWidthBlock();"> <div id="wrap"> <b style="font-size:1px; display:block; overflow:hidden;"> <b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden;height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b> </b> <div style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; border-style:solid; border-width:0px 1px;"> <b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b> <table border="0" id="text"> <tr> <td valign="middle" nowrap="nowrap" style="font:bold 16px Arial;"> Пример блока с закругленными краями </td> </tr> </table> <b style="font-size:1px; display:block; overflow:hidden; height:1px;"></b> </div> <b style="font-size:1px; display:block; overflow:hidden;"> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; border-style:solid; border-width:0px 1px; height:2px; margin:0px 1px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0 2px;"></b> <b style="background:#EEF5FF; border-color:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; border-style:solid; border-width:0px 1px; margin:0px 3px; border-width:0px 2px;"></b> <b style="background:#78AAFF; color:inherit; display:block; overflow:hidden; height:1px; margin:0px 5px;"></b> </b> </div> </body> </html> Замените надпись в блоке "Пример блока с закругленными краями" на свою любой длины и посмотрите, что получится. |
|
|
bigloafer |
29.12.2008, 11:08;
Ответить: bigloafer
Сообщение
#5
|
|
Slash, тут уж без JavaScript`а не обойтись... Вот в последнем коде есть тег B - что он делает , объясните на польцах . Насколько я помню он делает жирный текст . :wacko: [OFF]Дайте плиз ссылку на готовые макеты верстки . Нужно Шапка два столбца по бокам ( фиксированные с лева и с права ) + подвал .[/OFF] -------------------- |
|
|
Licoric |
29.12.2008, 13:30;
Ответить: Licoric
Сообщение
#6
|
|
|
А разве неудобно использовать изображения с прозрачным фоном? Там хоть как резать края можно... ? Да и в плане кода, как полагаю, меньше будет.
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Продам места под сквозные блоки на СМИ сайте текст или графика |
0 | seo_vladimir | 763 | 2.9.2020, 12:14 автор: seo_vladimir |
|
Не могу выровнять блоки по правую сторону | 1 | Dark_Delphin | 5904 | 18.11.2016, 0:14 автор: -Петр Чирнов- |
|
При уменьшении масштаба разъезжаются блоки | 0 | Alex.Bulgakov | 3481 | 9.11.2016, 15:28 автор: -Alex.Bulgakov- |
|
Как поднять блоки вверх | 2 | Denis_sf | 12869 | 21.11.2013, 22:32 автор: -hennessy- |
|
Сайт расползается на блоки при смене размера шрифта | 3 | datenrettung | 5613 | 26.2.2013, 22:16 автор: -Arks- |
Текстовая версия | Сейчас: 29.3.2024, 15:08 |