X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Блоки с закругленными углами
Slash_hb
Slash_hb
Topic Starter сообщение 9.4.2008, 10:22; Ответить: Slash_hb
Сообщение #1


Вот еще я тут намудрила:
Нужно получить 2 кнопочки с закругленными краями(я их рисую в CSS) на одной строке.
чет ниче не получается...
HTML:
    <div class="bot1">        
        
        <div id="rounded-box-3">
            <b class="r3"></b> <b class="r1"></b> <b class="r1"></b>
            <div class="inner-box">
                Yes!
            </div>    
              <b class="r1"></b> <b class="r1"></b> <b class="r3"></b>    
            
           </div>
    </div>

    <div class="bot2">        
        
        <div id="rounded-box-3">
            <b class="r3"></b> <b class="r1"></b> <b class="r1"></b>
            <div class="inner-box">
                No!
            </div>    
              <b class="r1"></b> <b class="r1"></b> <b class="r3"></b>    
            
           </div>
    </div>

CSS:
.r1, .r2, .r3 {position: relative; height: 1px; display:block;}

.r3 {left: 3px; width: 54px; }
.r2 {left: 2px; width: 56px;  }
.r1 {left: 1px; width: 58px;}

#rounded-box-3 .inner-box, #rounded-box-3  b {
    background-color: #FF0000;}
    
.inner-box { position: relative; display:block; left:0px; width: 60px; height: 25px;}


.bot1{ display: table-row-group; margin-left: 100px; float:left; clear:right;}
.bot2{ display: table-row-group; margin-right: 100px; float:right; clear:left;}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
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
Slash_hb
Topic Starter сообщение 10.4.2008, 14:53; Ответить: Slash_hb
Сообщение #3


а как сделать, чтобы блок еще и был определенной, но не фиксированной длины, например длина текта+поля, т.е. чтобы если я заменяю текст на несколько символов длиннее, то и блок растягивался?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
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
bigloafer
сообщение 29.12.2008, 11:08; Ответить: bigloafer
Сообщение #5


(Exterior @ 11.4.2008, 03:39) *
Slash, тут уж без JavaScript`а не обойтись...
Вот в последнем коде есть тег B - что он делает , объясните на польцах .
Насколько я помню он делает жирный текст . :wacko:

[OFF]Дайте плиз ссылку на готовые макеты верстки . Нужно Шапка два столбца по бокам ( фиксированные с лева и с права ) + подвал .[/OFF]


--------------------
Бороться и искать , найти и перепрятать ...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Licoric
Licoric
сообщение 29.12.2008, 13:30; Ответить: Licoric
Сообщение #6


А разве неудобно использовать изображения с прозрачным фоном? Там хоть как резать края можно... ? Да и в плане кода, как полагаю, меньше будет.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам места под сквозные блоки на СМИ сайте
текст или графика
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-


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:08
Дизайн