Нужна помощь при работе с изображением

Willi · April 13, 2010

Здравствуйте, сразу перейду к сути проблемы я хотел бы сделать изображение с подписью к нему оформленное с помощью css. Применял такие коды найдены в интернете, немного переделав их под себя:

.fode { position: relative; height:335px; width: 448; } /*Оформление фотографий */
.fode cite {background: #111; filter:alpha(opacity=55); opacity:0.55; color: #fff; position: absolute; bottom: -6; left: 5; width: 428px; padding: 10px; border-top: 1px solid #999;}/*Оформление фотографий */

<div class="fode">
<img src="d1.jpg" border="0" alt="Разрушения" class="shadow">
<center><cite>Описание.</cite></center>
</div>

Проблема заключается в том что в Мазиле все отображаться как мне надо, в Опере подпись комментария стянута к низу на несколько пикселей но если устанавливать параметр bottom приравнять к 9 то подпись занимает нужное место, но все в Мозиле уже становиться выше нужного. А IE вообще еще и ширину подписи выдает не правильную. Если кто сможет помогите с этим кодом, или подскажите что ни будь подобное, как еще можно оформить картинку, с подписью?

psywalker · April 13, 2010

1) <center> вот этот мусор отбрасываем

2) <cite> делаем абсолютом и ставим, куда надо позицию.

3) Родителю релатив не забываем.

Willi · April 13, 2010

Ага после <cite> делаем абсолютом и ставим, куда надо позицию. с Оперой проблема отпала, сейчас отображает так же как и в Мозиле но в IE он еще по ширине меньше как то делает пикселей на 30-40

Edited April 13, 2010 by Willi

psywalker · April 13, 2010

Ага после <cite> делаем абсолютом и ставим, куда надо позицию. с Оперой проблема отпала, сейчас отображает так же как и в Мозиле но в IE он еще по ширине меньше как то делает пикселей на 30-40

Покажи, что ты там мутишь?

Willi · April 13, 2010

Покажи, что ты там мутишь?

.fode { position: relative; height:335px; width: 448; } /*Оформление фотографий */
.fode cite {background: #111; filter:alpha(opacity=55); opacity:0.55; color: #fff; position: absolute; top: 300; bottom: -6; left: 5; width: 428px; padding: 10px; border-top: 1px solid #999;}/*Оформление фотографий */

С таким кодом и в Опере и в Мозиле робит так как мне надо

psywalker · April 13, 2010

А покажи скрин того, что хочешь получить

Willi · April 13, 2010

psywalker · April 13, 2010

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}

	div.wrap { margin: 0 auto; width: 500px; border: 1px solid #000; position: relative; height: 500px;}
	div.img { height: 100%; background: red;}
	cite { text-align: center; line-height: 40px; position: absolute; width: 100%; height: 40px; bottom: 0; left: 0; background: blue; }

</style>
</head>

<body>

	<div class="wrap">
		<div class="img">Изображение картинка</div>
		<cite>Надпись на изображении</cite>
	</div>

</body>
</html>

Willi · April 13, 2010

Большое спасибо)! все работает, сейчас до ума доведу полностью) Очень благодарен тебе.

psywalker · April 14, 2010

Большое спасибо)! все работает, сейчас до ума доведу полностью) Очень благодарен тебе.

Всегда рад помочь, дружище

Sign In

Нужна помощь при работе с изображением

Question

Willi

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Willi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Willi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Willi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Willi

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information