CSS верстка. Сцуко жесть просто. - Форум успешных вебмастеров

seocoder · 19.04.2009, 20:09

Уже час бъюсь. Надо поместить img в div с обрамлением border и вниз дива запихнуть полупрозраный див с любым текстом описанием.

Самая проблема с позиционированием нижнего дива, и то что img конечно всегда разный.

PHP код:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style>

.imgs {

    border: 1px solid #000000;

    float: left;

    padding: 0px;

    

}



.test {

    position: relative;

    z-index: 10;



    left: 0px;

    width: 100%;

    height: 40px;

    color : white;

    background-color:#CCCCCC;

}

</style>

</head>



<body>

<div class="imgs"><div><img src="topic.cfm_files/5736620t6k.jpg" />

<div class="test">TESTER</div>

</div>



</div>

</body>

</html>

Это делает почти что надо, но снизу дырка от дива остается полюбому (

Помогите уже кто нить

p.s. знатоки, ткните на простые туториалы про эти потоки в css.

medar · 19.04.2009, 22:25

Ты хочешь описание к картинке в полупрозрачном диве сделать, типа как здесь - http://rangjungyeshe.ru/plug.php?e=gallery ? Или что ?

seocoder · 19.04.2009, 22:29

да, оно. ща позырим там css. там решение, таблица и див внутри. так не есть гуд.
если знаем размеры картинки, у меня вышло.
а для произвольной картинки - нет ((

xosino · 19.04.2009, 22:29

тоже провозился мин 15 потом в гуглю как всегда img bottom border fix
первый линк
http://www.webmasterworld.com/forum83/8013.htm
"img {
display:block;
} "

у меня заработало

или я не так понял :/

seocoder · 19.04.2009, 22:43

в лисе помогло. в ие7 нижний блок не растягивается на ширину картинки

Код:

<style>
.imgs {
	float: left;
	padding: 0px;
	margin: 0px;
	overflow:hidden;

}

.test {
	z-index: 10;
	position:relative;
	height: 40px;
	color : black;
	bottom:40px;
	width: 100%;
	background-color:#CCCCCC;
	filter:alpha(opacity=70);  
	-moz-opacity: 0.7; 
	-khtml-opacity: 0.7; 
	opacity: 0.7; 
}
</style>
</head>
<body>
<div class="imgs"><div><img src="topic.cfm_files/5736620t6k.jpg"  style="display:block;"/></div>
  <div class="test">СИСЬКИ</div>
</div>

ие

лиса