Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Не получается сверстать тянущийся блок с круглыми боками

Обсуждение темы Не получается сверстать тянущийся блок с круглыми боками в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Приветствую. Я начинающий верстальщик, и в данный момент набираюсь опыта. Уже больше часа мучаюсь. Нужно сверстать резиновый по ширине блок, у которого слева ...


Закрытая тема
 
Опции темы
Старый 25.11.2010, 18:34   #1
Приветствую. Я начинающий верстальщик, и в данный момент набираюсь опыта.
Уже больше часа мучаюсь.
Нужно сверстать резиновый по ширине блок, у которого слева и справа будут закругление. (с помощью изображений)
Кому не сложно, напишите, я попробую разобраться и запомнить на будущее.
Вот собственно такой вид.
http://s13.radikal.ru/i186/1011/cf/62721d3489d5.png (На верхнюю черту не обращайте внимание)

Левое скругление
http://i065.radikal.ru/1011/99/9a0c6ecd3f0c.gif
И правое
http://s009.radikal.ru/i310/1011/34/f391c88ae017.gif


Максимум что получалось, это вот такое
http://i067.radikal.ru/1011/a3/cfc3f2a29020.png
Возможно из-за того что средину я делал через css с помощью верхнего и нижнего бордюра.
Может быть лучше это делать через таблицы?, но я верстаю только слоями, и хотелось бы этот элемент тоже сделать через css.

Спасибо.
 
Старый 25.11.2010, 18:34
Ссылки
Старый 25.11.2010, 18:58   #2
Код:
<div id="container">
	<div id="left_krug">
	</div>
	<div id="right_krug">
	</div>
	<div id="center_rez">
	</div>
</div>
Код:
#container {
	 height: 20px;
	 width:auto;
	 min-width:100px;
}

#left_krug {
    background-image:url('/Lxxx.png')
	width: 20px;
	float: left;
}

#right_krug {
    background-image:url('/Rxxx.png')
	width: 20px;
	float: right;
}

#center_rez {
	margin-left: 20px;
	margin-right: 20px;
}
или

Код:
<table style="width: 100%">
	<tr>
		<td id="left_krug_T" >&nbsp;</td>
		<td id="center_rez">текст какойнить</td>
		<td id="right_krug_T">&nbsp;</td>
	</tr>
</table>
Код:
#left_krug_T {
    background-image:url('/Lxxx.png')
	width: 20px;
}

#right_krug_T {
    background-image:url('/Rxxx.png')
	width: 20px;
}

#center_rez {
	width:auto;
}

Последний раз редактировалось vitaly-go; 25.11.2010 в 19:01..
 
Этот пользователь сказал спасибо vitaly-go за это полезное сообщение:
S1xteen (25.11.2010)
Старый 25.11.2010, 19:39   #3
Большое спасибо, первый вариант вполне подошёл. Нечто подобное делал, но выходило не то что нужно было. Только в центральный блок пришлось вставить изображение и зарепитить, а иначе верхний бордюр слишком вылазил.
 
Старый 26.11.2010, 21:55   #4
Без графики с легкой настройкой цвета (background-color: #FFE400:

CSS:

#real-yellow {margin:0;}
.inner-yellow, span.r1, span.r2, span.r3, span.r4, span.r5 {background-color: #FFE400;}
.inner-yellow {padding:1em;}
#real-yellow .inner-yellow {padding: 0.7em 1em;}
.r1, .r2, .r3, .r4, .r5 {display: block; height: 1px; overflow: hidden; font-size:1px;}
.r5 {display: block; height: 1px; overflow: hidden; font-size:1px;}
.r5 {margin: 0 5px;} .r4 {margin: 0 4px;} .r3 {margin: 0 3px;} .r2 {margin: 0 2px;} .r1 {margin: 0 1px;}


HTML:

<div id="real-yellow">
<span class="r5"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span><span class="r1"></span>
<div class="inner-yellow">
ТВОЙ ТЕКСТ
</div>
<span class="r1"></span><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r5"></span>
</div>
 
Старый 26.11.2010, 23:07   #5
Наверное это в разных браузерах будет по разному. С IE точно проблемы с этим будут. Но всё равно спасибо за труд.
 
Старый 26.11.2010, 23:21   #6
Цитата:
Сообщение от S1xteen Посмотреть сообщение
Наверное это в разных браузерах будет по разному. С IE точно проблемы с этим будут. Но всё равно спасибо за труд.
Кроссбраузерность..... С ослика 5.5...
 
Старый 06.12.2010, 10:59   #7
только валидатор скажет "ФУ" за пустые спаны... но на него в принципе пох.
 
Старый 06.12.2010, 11:34   #8
на мой взгляд проще так
Код HTML:
<style>
.box {position: relative; display: inline-block;}
i, b, u, s {position: absolute; width: 10px; height: 10px; display: block; _font-size: 1px;}
i {top: 0; left: 0; }
b {top: 0; right: 0;}
u {bottom: 0; left: 0;}
s {bottom: 0; right: 0;}
</style>
<div class="box">
  <i></i><b></b><u></u><s></s>
  <!-- Content -->
</div>
и спрайт нарисовать.
 
Старый 06.12.2010, 15:28   #9
на самом деле проще всего так:
Код HTML:
<div class="round_10">bla-bla-bla</div>
Код HTML:
.round_10{
-moz-border-radius:10px;
border-radius:10px;
}
и забыть о том, что существует программа именуемая ослом (IE)

а если память хорошая и про осла забывать не желает, то можно поставить костыли вроде этого или этого
 
Старый 06.12.2010, 15:33   #10
про webkit забыли, и уголки бывают разные, не все из которых можно нарисовать средствами css3
 
Старый 06.12.2010, 15:33
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сверстать это? FoX HTML, CSS, JavaScript 5 24.08.2011 11:27
Не получается состыковать flash ua4ykd Технологии Flash 10 31.12.2009 11:01
Рамка с круглыми углами jangot HTML, CSS, JavaScript 3 10.09.2007 19:23
Не получается сверстать, картинка прилагается kvecxjo HTML, CSS, JavaScript 0 02.06.2007 06:09
Тянущийся баннер Gana Технологии Flash 4 03.09.2004 14:30


Текущее время: 20:12. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум