Закругленные края.

[Чиполлино]

Доброго времени суток! Решил сделать шапку с закруглёнными краями, когда верстаю таблицами всё вроде неплохо, но div не получается никак.

В наличии:

header_left.jpg - левая сторона шапки.

header_center.jpg - центр шапки (полоска, которая дублируется repeat-x)/

header_right.jpg - правая сторона шапки.

<style>
  #header {width: 100%; height: 119px; margin: 0; padding: 0; text-align: center;}
</style>
<div id="header">
    <div style="display: inline;"><img src="header_left.jpg"></div><!--
--><div style="background-image: url(header_center.jpg); height: 119px; width: 1200px; display:inline-block;"></div><!--
--><div style="display: inline;"><img src="header_right.jpg"></div>
</div>

Вроде в итоге получается результат. Но у меня 2 вопроса.

1. Как теперь толкать в эту шапку содержимое? (текст, картинки и.т.д.). Сколько я не пытался, всё напрочь узжало! (Стороны вверх, центр вниз и т.д.)

2. Самый ли это простой вариант исполнения поставленной задачи? (шапка с градиентами и обводкой фотошопа).

Заранее спасибо!

[Softlink]

Чиполлино, а почему бы фоном не вставить картинку или по частям? И покажите, что хотите получить и что сейчас есть.

[Чиполлино]

Вот что я получаю используя данный код.

Разбираем, как я это получил.

И после того как я пытаюсь засунуть текст в этот div, что я получаю.

Собственно хочу узнать, может я неправильно вообще сверстал всё это дело?

Edited August 10, 2012 by Чиполлино

[Softlink]

Так, а почему бы не использовать один блок-div, ему задать фоном градиент (css или картинкой) и закруглить края через border-radius?

[Чиполлино]

Не получается, у меня на краях узоры, которые пропадут.

Хотя появилась одна идея, сейчас попробую, потом покажу в чём проблема была.

Edited August 10, 2012 by Чиполлино

[wwt]

http://jsfiddle.net/4sJYM/3/ с картинками

[Чиполлино]

wwt, спасибо! Помогло!

А не подскажите как выровнять теперь этот div по центру страницы? (text-align: center; - не работает)

Edited August 10, 2012 by Чиполлино

[wwt]

wwt, спасибо! Помогло!

А не подскажите как выровнять теперь этот div по центру страницы? (text-align: center; - не работает)

Если это inline элемент, как в предыдущем примере то он выравнивается text-align у родительского элемента пример http://jsfiddle.net/4sJYM/4/, если же это блочный элемент то придется задать ему ширину и сделать так http://jsfiddle.net/4sJYM/5/

[Чиполлино]

wwt, спасибо! Помогло!

А не подскажите как выровнять теперь этот div по центру страницы? (text-align: center; - не работает)

Если это inline элемент, как в предыдущем примере то он выравнивается text-align у родительского элемента пример http://jsfiddle.net/4sJYM/4/, если же это блочный элемент то придется задать ему ширину и сделать так http://jsfiddle.net/4sJYM/5/

Спасибо! Тему можно закрывать.