Верстка картинки слайдера

[vadimon]

Верстаю страничку и столкнулся с такой проблемой: как сверстать слайдер, понятно, что на сайте он будет работать на jquery, но свойства нужно задать при верстке ( шрифт, размеры и т.д). Или может не стоит этого делать? Скрин прилагаю.

Edited November 7, 2010 by vadimon

[sigma77]

Ну поскольку тема находится в разделе Проблемы верстки осмелюсь спросить "в чем собственно проблема"?

И дабы упразднить последующие вопросы - "что уже сделано и что не получилось?". А конкретно, где сам код и ссылка на страницу?

п.с. блин, какой-то дьявольский номер сообщения получился )))

Edited November 7, 2010 by sigma77

[vadimon]

Ну поскольку тема находится в разделе Проблемы верстки осмелюсь спросить "в чем собственно проблема"?

И дабы упразднить последующие вопросы - "что уже сделано и что не получилось?". А конкретно, где сам код и ссылка на страницу?

п.с. блин, какой-то дьявольский номер сообщения получился )))

как сделать прозрачный фон с описанием и наложить его поверх картинки?

[sigma77]

vadimon,

position: absolute + rgba, для нормальных браузеров, position: absolute + png - для ие

http://htmlbook.ru/blog/poluprozrachnyy-fon (смотреть в конце)

[vadimon]

vadimon,

position: absolute + rgba, для нормальных браузеров, position: absolute + png - для ие

http://htmlbook.ru/blog/poluprozrachnyy-fon (смотреть в конце)

ну с position: absolute это слишком загнуто...

вроде получилось вот так:

HTML:

.<div class="slide-foto">
				<img src="images/slider_foto.jpg" alt="Новость дня" />   
				<div class="slide-desc">
					<p>Великодушная "фурия"</p>
					<p>Испанцы упустили в матче с Гондурасом массу моментов, включая нереализованный пенальти, довольствовавшись победой 2:0. Теперь "красной фурии" надо побеждать Чили.</p>
				</div>
			</div>

CSS:

.slide-foto { margin:0 auto; width:369px; height:277px; border-bottom:1px solid #f09e33;}
.slide-desc { height:62px; background: rgba(254, 251, 248, 0.85); position:relative; width:368px; bottom:63px; border:1px solid #f09e33;}

[sigma77]

vadimon,

Ну главное, что получилось

[vadimon]

vadimon,

Ну главное, что получилось

Правда, связка {position:relative; bottom:63px;} оказалась не кроссбраузерна, в ie6 работает коряво http://design.webtm.ru/demo/basket/index.html/ Чем можно исправить?

Edited November 7, 2010 by vadimon

[deadrash]

Правда, связка {position:relative; bottom:63px;} оказалась не кроссбраузерна, в ie6 работает коряво http://design.webtm.ru/demo/basket/index.html/ Чем можно исправить?

margin-top:-63px; работает, но в ie6 не совсем точно сдвигается, для ие можно чуть додвинуть в отдельном стиле. Хотя там всего 3-4 пикселя, вроде не страшно.