Вопрос по верстке.

Dima_A

Новичок
Вопрос по верстке.

Хочу сделать прямоугольник с заокругленными краями и фоном. Делаю так:

PHP:
<div align="center" style="vertical-align:middle; background:url(images/li1.gif)  repeat-x; height:25px; width:220px">
  <img src="images/q1.gif" height="25" align="left" width="3">
      Текст блока
  <img src="images/q2.gif" height="25" width="3">
</div>
Правый рисунок стоит в один уровень с левым но выровнен по центру. А должен быть справа и идти после бекграунда

Если пишу так <img src="images/q2.gif" height="25" width="3" align=right> - рисунок уезжает вниз

Как сделать правильно. Где ошибка?
 

Dima_A

Новичок
Пробовал так
PHP:
<div align="center" style="vertical-align:middle; background:url(images/li1.gif)  repeat-x; width:220px; height:25px;">
  <img src="images/q1.gif" height="25" style="float:left" width="3">
    Разделы
  <img src="images/q2.gif" height="25" style="padding-left:182px; vertical-align:top">
</div>
[PHP]

Текст переносится в самый левый угол и его невозможно отцентрировать.
[b]Pigmeich[/b], обьясни подробнее ( примером )
 

Crys

Двинутый новичок
Я такое использую:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

....................

<style type="text/css">
div.corner div {width:8px;height:8px;position:absolute;background-image:url('bl.gif')}
div.corner div.bl {bottom:0px;left:0px;background-position:0% 100%}
div.corner div.br {bottom:0px;right:0px;background-position:100% 100%}
div.corner div.tl {top:0px;left:0px;background-position:0% 0%}
div.corner div.tr {top:0px;right:0px;background-position:100% 0%}
</style>

<div style="position:absolute">
content
	<div class="corner">
		<div class="tl"><!-- --></div>
		<div class="tr"><!-- --></div>
		<div class="bl"><!-- --></div>
		<div class="br"><!-- --></div>
	</div>
</div>
bl.gif - картинка с кружочком 16x16px
 
Сверху