Описание изображения:

sol · May 7, 2009

HTML:

<div class="img-desc">
  <img src="sample.jpg" width="575" height="335" alt="" />
  <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS:

.img-desc{
  position: relative;
  display: block;
  width: 575px;
  height:335px
}
.img-desc cite{
  background: #111;
  filter:alpha(opacity=55);
  opacity:0.55;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 555px;
  padding: 10px;
  border-top: 1px solid #999
}

пример http://www.sohtanaka.com/web-design/exampl...dow/caption.htm

Тупо скопировал хтмл между тэгами боди, css в отдельный файл

Получил следующее: есть изображение, описание к нему аккуратно расположилось справа

Не пойму в чем проблема

Плз проверьте у себя

p.s. путь к css прописан 100% верно

Колос · May 7, 2009

У меня расположилось внизу, как положено. (Opera)

sol · May 7, 2009

бред какой то, я проверил в

-IE 5,5; 6; 7; 8;

-Mozila 3

-Opera 9.6

везде одно и то же, почемуууу???

помогите кто нибудь пожалуйста

Edited May 7, 2009 by sol

SelenIT · May 7, 2009

путь к css прописан 100% верно

А если CSS в том же файле — работает? Может, каких нужных атрибутов у <link> не хватает?

И на всякий случай, какой доктайп?

sol · May 7, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

все решил. спасибо

sol · May 8, 2009

одна проблема ушла, другая пришла ))))))))

помогите пожалуйста....

хтмл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="content">
<table class="table">
<tr>
<td ><a href="#"></a><img src="img/1.jpeg" class="img-desc"><cite>Подпись</cite></td>
<td ><a href="#"></a><img src="img/2.jpeg" class="img-desc"><cite>Подпись</cite></td>
<td ><a href="#"></a><img src="img/3.jpeg" class="img-desc"><cite>Подпись</cite></td>
<td rowspan="2"><a href="#"></a></td>
</tr>
<tr>
<td ><a href="#"></a><img src="img/4.jpeg" class="img-desc"><cite>Подпись</cite></td>
<td ><a href="#"></a><img src="img/5.jpeg" class="img-desc"><cite>Подпись</cite></td>
<td ><a href="#"></a><img src="img/6.jpeg" class="img-desc"><cite>Подпись</cite></td>
</tr>
</table>
</div>
</body>
</html>

css

.img-desc{
position: relative;
display: block;
width: 180px;
height:237px
}
.img-desc cite{
background: #111;
filter:alpha(opacity=55);
opacity:0.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 180px;
padding: 10px;
border-top: 1px solid #999;
}

Почему не отображается как в примере http://www.sohtanaka.com/web-design/exampl...dow/caption.htm

SelenIT · May 8, 2009

Класс .img-desc должен стоять у контейнера картинки и <cite>, а не у самой картинки. А поскольку ячейке таблицы position: relative; не задать, придется, видимо, вкладывать в них целиком структуру из первого примера...

Sign In

Описание изображения:

Question

sol

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Колос

Link to comment

Share on other sites

sol

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

sol

Link to comment

Share on other sites

sol

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information