В помощь веб-разработчику

January 13th, 2008

Вёрстка хитрой конструкции

Posted by admin in Без рубрики

Хочется сверстать вот такую конструкцию:

фотография

50px
50px

текст

По сути, это для просмотра фотографий — показывается главный кадр, а под ним по центру подпись и две стрелочки — назад и вперёд, расположенные соответсвенно слева и справа, ровно по краям кадра.
И в общем-то у меня уже был готовый вариант… Но тест в IE он не прошёл.
Главное условие — ширина фотографии не известна.
В FF всё прекрасно работало засчёт display:table. В IE, ясное дело, такого нет. Ставлю width:100% для любого из внутренних блоков — конструкция разежается на всю страницу, ставлю float:right просто у правой стрелки — то же самое.
Какие будут идеи?

Upd. В общем пересмотрел подход и решил сдвинуть стрелки к тексту, а не разносить по краям.)) В вопросе теперь чисто «спортивный интерес»

Upd2. Благодаря '[info]'name_is_gray Решение-таки нашлось.)

Css:
/* основной код, работает просто так в фоксе и опере */
.pic_frame { background: #999; text-align: center; width: auto; margin: 0 auto; float: left; }
.pic_title { background: #c90; padding: 0 60px; margin: 0; position: relative; }
.pic_title img { margin: 10px; }
.pic_title span { background: #a00; width: 50px; display: block; top: 0; position: absolute; }
.pic_title .left_arrow { left: 0; }
.pic_title .right_arrow { right: 0;}
/* в IE левый блок остаётся на месте, для него мини-хак */
* html .pic_title .left_arrow {left: -50%; margin-left: 30px;}

Html:
<div class='pic_frame'>
 <img style='width: 500px; height: 100px' />
 <p class='pic_title'>
  <span class='left_arrow'>←</span>
  Подпись
  <span class='right_arrow'>→</span>
 </p>
</div>

Comments are closed.

Sorry, the comment form is closed at this time.