Как прописать стиль для слайдера

[Mila]

У меня проблема с версткой: на сайте показывается слайд-шоу изображений из постов.

На фоне каждого изображения должна появляться прозрачная полоса, на которой будет название поста, из которого выводится картинка.

Посмотреть можно здесь http://juice.fsay.net/ajuice/

Слайд-шоу будет вверху страницы, справа.

там пока нет изображений, почему то они на этом хостинге не работают - хостинг бесплатный.

Но понять, как это должно выглядеть, можно.

Проблема у меня с полосой, на которой отображается название поста.

1. При перезагрузке страницы она отображается выше нужного места, а потом, когда страница загрузилась полностью - полоса опускается вниз.

В общем, некрасиво дергается.

2. К тому же, сначала она загружается черной, а потом становится прозрачной.

3. Надписи накладываются одна на другую.

накладываются на несколько секунд, потом предыдущая надпись исчезает, но эти несколько секунд все выглядит некрасиво.

Пожалуйста, народ, помогите разобраться, что я неправильно сделала.

Вот код:

<div class="property">
 	<div id="slideshow" class="pics">
			  <?php
				  $rc_posts = get_posts("category=223&numberposts=10&orderby=rand");  // получаем посты из категории, их количество и сортировка
				  //print_r($rc_posts );
				  foreach($rc_posts as $rc_post){
				  echo '<div><a href="' .get_permalink($rc_post). '"><img class="thumbnail" src="'.get_post_meta($rc_post->ID, 'thumbnail', true).'" width="530" /></a>
				  <div class="agent-meta-data"><a href="' . get_permalink($rc_post) . '">' . get_the_title($rc_post) . '</a></div></div>';
				  }
			  ?>
	</div>
</div>

CSS:

  Quote

.property {

position: relative;

float:left;

width: 552px;

height: 255px;

margin : 0 0 15px 0;

padding : 0;

}

#slideshow {

width: 552px;

height: 255px;

margin : 0;

padding: 0;

overflow:hidden;

}

#slideshow img {

width: 530px;

height: 230px;

padding: 10px;

background:#ebebeb;

border:1px solid #DADADB;

}

.agent-meta-data {

position: absolute; bottom:21px; left:11px;

background: #000;

width:510px;

height:24px;

padding:10px;

color:#fff;

text-align: center;

font-size:18px;

font-weight:bold;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

.agent-meta-data a,.agent-meta-data a:visited {

color:#fff;

}

Буду очень благодарна за любые подсказки.

Edited April 2, 2010 by Mila

[Mila]

Отчасти я разобралась.

Для блока agent-meta-data нужно указывать не абсолютное, а относительное позиционирование.

Но, как его прописать, чтобы эта полоса была видна - у меня никак не выходит.

Народ, помогите, плиз...

[Mila]

Неужто никто не поможет?

Народ, ау...

[WalkMan]

я бы попробывал .agent-meta-data значениям left и bottom прописать !important

а так же display: none (скрипт потом сам поставить кому надо block)

[Mila]

Спасибо, попробую

[mishka]

  Quote

1. При перезагрузке страницы она отображается выше нужного места, а потом, когда страница загрузилась полностью - полоса опускается вниз.

В общем, некрасиво дергается.

На сколько я понял элементу #slideshow свойство position:relative дописывается джесом, тоесть после того как он зпгрузится. А относительно него позиционируется нижняя полоска.

Решение - этому элементу (#slideshow) релейтив назначить в стилях.

  Quote

2. К тому же, сначала она загружается черной, а потом становится прозрачной.

Почему так? Потому что сразу все элементы которые есть накладываются друг на друга, и они полу прозрачные. А что будет если полупрозрачные стеклышки друг на друга наложить? Правильно - они станут непрозрачными.

Выход - в хтмл первому элементу добавить клас, например active, и ему дисплей блок, остальным дисплей нон.

  Quote

3. Надписи накладываются одна на другую.

накладываются на несколько секунд, потом предыдущая надпись исчезает, но эти несколько секунд все выглядит некрасиво.

см. пункт 2

Edited April 8, 2010 by mishka2