[S1xteen]

Приветствую. Я начинающий верстальщик, и в данный момент набираюсь опыта.
Уже больше часа мучаюсь.
Нужно сверстать резиновый по ширине блок, у которого слева и справа будут закругление. (с помощью изображений)
Кому не сложно, напишите, я попробую разобраться и запомнить на будущее.
Вот собственно такой вид.
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.

Спасибо.

[vitaly-go]

<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;
}

[S1xteen]

Большое спасибо, первый вариант вполне подошёл. Нечто подобное делал, но выходило не то что нужно было. Только в центральный блок пришлось вставить изображение и зарепитить, а иначе верхний бордюр слишком вылазил.

[localhost]

Без графики с легкой настройкой цвета (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>

[S1xteen]

Наверное это в разных браузерах будет по разному. С IE точно проблемы с этим будут. Но всё равно спасибо за труд.

[localhost]

Сообщение от S1xteen

Наверное это в разных браузерах будет по разному. С IE точно проблемы с этим будут. Но всё равно спасибо за труд.

Кроссбраузерность..... С ослика 5.5...

[vladendark]

только валидатор скажет "ФУ" за пустые спаны... но на него в принципе пох.

[Niemans]

на мой взгляд проще так

<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>

и спрайт нарисовать.

[vladendark]

на самом деле проще всего так:

<div class="round_10">bla-bla-bla</div>

.round_10{
-moz-border-radius:10px;
border-radius:10px;
}

и забыть о том, что существует программа именуемая ослом (IE)

а если память хорошая и про осла забывать не желает, то можно поставить костыли вроде этого или этого

[Niemans]

про webkit забыли, и уголки бывают разные, не все из которых можно нарисовать средствами css3