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



 

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

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

Открыть тему
Тема закрыта
> Растягивающийся блог во все стороны
Балдин
Балдин
Topic Starter сообщение 23.12.2010, 10:00; Ответить: Балдин
Сообщение #1


Столкнулся с проблемой, нужно растянуть блок во все стороны.
По краям - 4 картинки закругления. Можно ещё добавить повторяющиеся картинки по краям, сверху и снизу. Не суть. Главное чтоб всё было красиво и не выезжало друг за друга. И тянулось.. Вот так:
[attachment=37319:block.png]
[attachment=37320:image.rar] - картинки...
Содержание блока не интересует, главное чтобы блок был, в котором можно писать :)
Заранее спасибо!..
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 23.12.2010, 10:17; Ответить: vasvas7775
Сообщение #2


я так понял тебе нужен блок, с закругленными краями, и подстраивающийся под размеры.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Балдин
Балдин
Topic Starter сообщение 23.12.2010, 10:20; Ответить: Балдин
Сообщение #3


Правильно =) по ширине на 100% и по высоте по тексту(тоже 100%) :)
Обычно растягивал только по высоте, ширина - фиксированная, а теперь никак не получается сделать, всё выходит криво :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 23.12.2010, 10:31; Ответить: vasvas7775
Сообщение #4


Необязательно картинки, вот блок с закругленными краями, и заданным цветом:
[CSS]<style>
.r1, .r2, .r3 {display: block; height: 1px;}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#hesder-box .hesder-box, #hesder-box b {background-color:#339933;}
#block-box .block-box, #block-box b {background-color:#C0C0C0;}
#right-box .right-box, #right-box b {background-color:#C0C0C0;}
#left-box .left-box, #left-box b {background-color:#339933;}
#menu-box .menu-box, #menu-box b {background-color:#99CC66;}
.inner-box {padding:1em;}
.r1, .r2, .r3 {overflow: hidden; font-size:1px;}
</style>

<div id="menu-box">
<b class="r3"></b><b class="r1"></b><b class="r1"></b>
<div class="menu-box">
Привет, я блок с закругленными краями.
</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>[/CSS]
Если тебе для него надо задать определенную высоту, то в него надо вписать, слой или таблицу, с размерами этой высоты.
А если ширину, то его надо вписать в таблицу, или слой, с заданной шириной
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Балдин
Балдин
Topic Starter сообщение 23.12.2010, 10:37; Ответить: Балдин
Сообщение #5


Не так хорошо сглажено, как на картинке. Я так уже пробовал. Не катит.
Нужно с картинками.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 23.12.2010, 10:44; Ответить: vasvas7775
Сообщение #6


Посмотри вот здесь, много способов закругления углов. http://habrahabr.ru/blogs/webdev/30019/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Балдин
Балдин
Topic Starter сообщение 23.12.2010, 10:56; Ответить: Балдин
Сообщение #7


Да я уже половину этих примеров перепробовал, не получается у меня нифига, всё время что-нибудь не так. Тем более на английском практически все способы описаны. Если делать без картинок, чтобы реализовать так, как мне нужно, приходится добавлять border. а border не закруглённый. Если использовать всего 4 картинки, всё равно нужен border и его незакруглённые края выходят за круглые края картинок. Всё не так. Желательно div'ами...
Не могли бы написать рабочий вариант именно в моём случае. А то, извините, у меня уже нервов не хватает с этим блоком.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 23.12.2010, 11:13; Ответить: FightInGlory
Сообщение #8


Способ закругления от google - гавно)
Посмотри этот вариант.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,html{
height:100%;
width:100%;
overflow-x:hidden;
}
div.w
{
width: 100%;
height:100%;
margin: 0 auto;
overflow:hidden;
}

div.box-c
{
height:20px;
margin: 0 20px;
position: relative;
background: #C32300;
}

div.box-c em b
{
position:absolute;
font:150px Arial;
line-height:40px;
font-weight:normal;
}

.ctl, .cbl, .ctr, .cbr
{
z-index:11;
width:20px;
height:20px;
color:#C32300;
overflow:hidden;
position:absolute;
background:transparent;

}

.ctl {top:0; left:-20px;}
.cbl {bottom:0; left:-20px;}
.ctr {top:0; right:-20px;}
.cbr {bottom:0; right:-20px;}

.ctl b {left:-8px;}
.ctr b {left:-25px;}
.cbl b {left:-8px; top:-17px;}
.cbr b {left:-25px; top:-17px;}

div.box-inner
{
padding: 0 20px;
background: #C32300;
}
</style>
</head>
<body>
<div class="box w">
<div class="box-c">
<em class="ctl"><b>&bull;</b></em>
<em class="ctr"><b>&bull;</b></em>
</div>
<div class="box-inner">
Текст
</div>
<div class="box-c">
<em class="cbl"><b>&bull;</b></em>
<em class="cbr"><b>&bull;</b></em>
</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Балдин
Балдин
Topic Starter сообщение 23.12.2010, 12:02; Ответить: Балдин
Сообщение #9


пока сделал таблицами...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background: url('image/left-top-main.png') no-repeat; width: 13px; height: 13px;">&nbsp;</td>
<td style="background: url('image/top-main.png') repeat-x; width: 96.5%; height: 13px;">&nbsp;</td>
<td style="background: url('image/right-top-main.png') no-repeat; width: 13px; height: 13px;">&nbsp;</td>
</tr>
<tr>
<td style="background: url('image/left-main.png') repeat-y; width: 13px; height: 100%;">&nbsp;</td>
<td style="background-color: #fff; ">content</td>
<td style="background: url('image/right-main.png') repeat-y; width: 13px; height: 100%;">&nbsp;</td>
</tr>
<tr>
<td style="background: url('image/left-bottom-main.png') no-repeat; width: 13px; height: 13px;">&nbsp;</td>
<td style="background: url('image/bottom-main.png') repeat-x; height: 13px;">&nbsp;</td>
<td style="background: url('image/right-bottom-main.png') no-repeat; width: 13px; height: 13px;">&nbsp;</td>
</tr>
</table>

Если кто подскажет как сделать div'ами, буду очень признателен.

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) QIWI кажется все?
 111 Silverspam 18012 Вчера, 15:59
автор: Arsenwenger
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
 7 stu999 1758 31.3.2024, 11:19
автор: stu999
Открытая тема (нет новых ответов) Блог: городской сми сайт в Прибалтике
 23 kapusta1 3909 24.3.2024, 22:02
автор: Liudmila
Открытая тема (нет новых ответов) Продам музыкальный блог
Музыкальный видео блог об авторской песне.
 1 Курыкин 2330 24.10.2023, 21:25
автор: Andruxa77
Открытая тема (нет новых ответов) Все легальные аккаунты без НДС. Facebook Ads, Яндекс Директ и Google Ads без НДС. Отзывы SaveBalance
123
 5 DerianFox 3792 7.7.2023, 19:07
автор: rom36


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 19:00

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet