Галерея под IE7

[23.06.2012 | 19:46]

вот так все должно выглядеть

Добрый день, я не так давно начал изучать верстку. Ищу работу по данному направления, и вот мне прислали задание сделать что-то вроде галереи. Я сделал её сначала в виде таблицы вложив каждую картинку и ссылку в ячейку и скроллинг снизу. Потом попросили без таблицы, я сделал дивами и свойством display: table-cell; все заработало супер, но вот ie7 не понимает такого свойства, что посоветуете?

Оценить:+|–

Комментировать

Раздел: Помощь
Просмотров: 1443

Комментариев (13)

Григорий Кочнев [Greg]
23.06.2012 в 19:58

Посоветую забить на ИЕ7, как и на ИЕ6 :)

Войдите, чтобы ответить
Оценить:+|–0
Ольга [Olga]
23.06.2012 в 23:13
можно поставить хак для IE7
```
.block img { //display:block; //height:auto; //margin-top: expression((85-parseInt(offsetHeight)/2)  <0 ? "0" : 85-(parseInt(offsetHeight)/2) +'px') ; }
```
где 85 это половина высоты блока относительно, которого центрируется картинка по высоте
Войдите, чтобы ответить
Оценить:+|–0
Симонов Константин [Frantic]
24.06.2012 в 09:32

Под ие6 не просят, а вот под ие7 надо, что-то хак для ие7 не помог(

Войдите, чтобы ответить
Оценить:+|–0
- Ольга [Olga]
  24.06.2012 в 10:01
  
  а для родительского блока прописана высота?
  
  Войдите, чтобы ответить
  Оценить:+|–0

Симонов Константин [Frantic]

24.06.2012 в 13:47

да, вот что у меня получилось весь код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
*{
	padding: 0;
	margin: 0;
	border: 0;
}
#conteiner{
	margin: 100px auto;
	width: 80%;
	height: 170px;
	background-color: #F5F2EB;
	padding: 20px;
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
    }
img{
	background-color: black;
	border: 4px solid #0B68AB;
	height: 100px;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
.foto{
	width: 160px;
	/*display: table-cell;*/
	padding-right: 30px;
	display: block;
	height: auto; 
	margin-top: expression((85-parseInt(offsetHeight)/2)  <0 ? "0" : 85-(parseInt(offsetHeight)/2) +'px');
}
a{
	color: #066BAF;
	font-weight: bolder;
}
p, p a{
	color: #5C6260;
	font-weight:normal;
}
.auto-style1 {
	font-family: "Courier New", Courier, monospace;
}
</style>
<title>dextra</title>
</head>
<body>
	<div id="conteiner">

		<div class="foto"><a href="#"><img src="img/Desert.jpg" alt=""/>Очень длинное название, которое может занимать несколько строк</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Jellyfish.jpg" alt=""/>222</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Tulips.jpg" alt=""/>111</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Desert.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Jellyfish.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Tulips.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Desert.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Jellyfish.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>
		<div class="foto"><a href="#"><img src="img/Tulips.jpg" alt=""/>123</a>
		<p><a href="#">пионер</a></p><p>09.04.09 18:12</p></div>

		</div>
</body>
</html>

Оценить:+|–0

Sidoruk-SV
03.07.2012 в 13:24

Используй https://jsfiddle.net/ для таких полотен кода

Войдите, чтобы ответить
Оценить:+|–0

Ольга [Olga]
24.06.2012 в 14:15
по коду не видно что вы центрируете по высоте, у картинки прописана фиксированная высота, в блоке foto и картинка и текст, я так понимаю содержимое foto должно центрироваться, тогда в foto пропишите еще один div, и ему задайте
```
.foto {//display:block;}
.foto div  {//margin-top: expression((50-parseInt(offsetHeight)/2)  <0 ? "0" :50-(parseInt(offsetHeight)/2) +'px') ; }
```
Войдите, чтобы ответить
Оценить:+|–0
Симонов Константин [Frantic]
25.06.2012 в 08:27

Добрый день, Ольга, никак не получается( если не трудно, у вас есть скайп? я бы вам код показал что и куда делаю?

Войдите, чтобы ответить
Оценить:+|–0
Григорий Кочнев [Greg]
25.06.2012 в 10:44

Может вы лучше карусельку какую-нибудь поставить и визуально лучше решение готовое
https://sorgalla.com/projects/jcarousel/examples/static_simple.html

Войдите, чтобы ответить
Оценить:+|–0
Симонов Константин [Frantic]
25.06.2012 в 10:51

Нет, дело не в том как лучше, а в том чтобы сделать, возможно будущему работодателю задание. Вот осталось только решить как сделать под ие7 без таблиц:)

Войдите, чтобы ответить
Оценить:+|–0
Роман [Xap4o]
27.06.2012 в 14:41

ха, я тестовое задание точно такоеже делал.
сделал, но вот я хз где оно, но я замучился его делать =)

Войдите, чтобы ответить
Оценить:+|–0
Симонов Константин [Frantic]
27.06.2012 в 15:18

dextra?)

Войдите, чтобы ответить
Оценить:+|–0
Ольга [Olga]
27.06.2012 в 18:33

попробуйте прописать галерее свойство white-space: nowrap, а блоку display:inline; (это только для ие7)

Войдите, чтобы ответить
Оценить:+|–0

Оставить комментарий
Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

HTMLCSS/Frantic Профиль

Галерея под IE7

Оставить комментарий Отменить ответ

HTMLCSS/Frantic ^{Профиль}

Оставить комментарий
Отменить ответ