Фон из двух кусков

[bmn]

Здравствуйте!
Нужно реализовать то, что нарисовано на картинке:
[attachment=3244:attachment]
Идёт сначала фон, а потом в конце картинка. и поверх всего этого можно будет размещать любую инфу (картинки, текст или ещё что-нибудь).

Подскажите как это лучше всего реализовать?

[null]

в чем проблема-то? картинка выровнена по правому краю.
{...
background: #цветфона url(picture.gif) no-repeat right center;
...
}
или я чего-то не понял?

[DareDevil]

null, слева от картинки не цвет а узор. Приглядись.

Самое прямолинейное, что лезет в голову — вложенные блоки.

[bmn]

DareDevil а о них по подробнее можно?
Желательно пример кода.

[Live]

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

[bmn]

Live, а что вы предложите?

[Live]

Originally posted by null@May 6 2006, 19:40
{...
* * background: #цветфона url(picture.gif) no-repeat right center;
...
}

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

[bmn]

Live там узор, а не цвет! приглядитесь.

[Live]

bmn, если вы не знаете ЦСС, так и скажите, это не порок : )
Вам дали композитное стилевое св-во для контейнера, в котором описан цвет фона, а так же фоновое изображение позиционированное в правом верхнем углу... подробнее:
{
background-color:#ваш_цвет;
background-image:url(ваш_узор.gif);
background-position:100% 0%;
background-repeat:no-repeat;
}
если что еще - спрашивайте, с удовольствием поможем

[bmn]

Live вы меня слушать не хотите никак, да?
я вам говорю, что никакого цвета фона здесь нету.
фон состоит из двух картинок (одна -- фоновая, а вторая просто в правом углу висит).

[Live]

а... там не цвет, а типа градиентик идет? тогда вложенность блоков.
сори.

[DareDevil]

Live, более того, градиентик в полосочку.

DareDevil а о них по подробнее можно?

Для первого блока задаешь фон с полосочками, а для второго — с картинкой. Затем вкладываешь один в другой и пишешь свое меню во внутреннем.

А хотя можно сделать одну длинную картинку, хорошенько её пожать и задать просто фоном.

[Live]

эх... совсем плохой стал. пора в отпуск : )

[bmn]

Live :biggrin2:
Live, DareDevil, Спасибо. Начинает проясняться.

Но есть один трабл.
Текст внутри блоков не хочет vertical-align&#39;ится вниз

<style>
.header {
 *background: #3A7CB1 url(imgs/header_bg.gif) repeat-x;
 *vertical-align: bottom;
 *height: 62px;
 *width: 100%;
}
.h {
 *background: url(imgs/header.gif) top right no-repeat;
 *vertical-align: bottom;
 *text-align: center;
 *height: 62px;
}
</style>

<div class=&#39;header&#39;>
 *<div class=&#39;h&#39;>
 * *Punkt1 Punkt2
 *</div>
</div> *

поэтому я использовал таблицу (стили те же)

<div class=&#39;header&#39;>
 *<div class=&#39;h&#39;>
 * *<table style=&#39;position: absolute; width: 100%; height: 100%&#39;>
 * * *<tr>
 * * * *<td style=&#39;vertical-align: bottom&#39;>
 * * * * *Punkt1 Punkt 2
 * * * *</td>
 * * *</tr>
 * *</table>
 *</div>
</div>

Проблема решена. Но может как-то можно без извращений с таблицой этой? IE точно не принимает это выравнивание, в других браузерах не смотрел.

[DareDevil]

Vertical-align не управляет положением содержимого внутри блочного элемента. Только внутри ячейки таблицы.

Опять же самое тупое, но самое быстроприходящее в голову — задать верхний паддинг.