А давайте таки добьем мою галерею!

[Пятница]

Ребят, помогите, проблемма с позиционированием Div'ов.

Основным содержаним моего сайта является фото (http://dnepr-city.com/).

В качестве бесплатного хостинга я свои фото загружаю на http://photoshare.ru/, оттуда беру html-код и вставляю на мою страницу.

Но для красоты добавил css, чтобы сделать страницу хоть отчасти похожей на галерею.

CSS:

div.box {border:1px solid #000000;font-size:14px;text-align:center;float:left;margin:10px}
div.box:hover {border:1px solid #ff0000;}
div.box img {border:10px solid #ffffff;}

HTML:

<div class=box>
<a href="http://www.photoshare.ru/original/photoshare.ru-1437003.jpg" target="_blank"><img src="http://www.photoshare.ru/data/16/16824/3/3fd0yq-e3d.jpg" border="0" alt="" /></a>
</div>

Но происходит такая фигня, что если в одно ряду встречаются вертикальные и горизонтальные фото - галерея теряет свой порядок, и получается бардак.

Как сделать так, чтобы в ряду было строго по 3 фото?

Вот скрин этого бардака:

[ZoNT]

приведи их все к одной высоте: либо к максимальной либо, к минимальной.

Вернее задай лучше диву.бокс высоту ж?стко по максимальному фото (по ваертикальному)...

[Пятница]

Ты знаешь, мне стала понятна твоя идея, имеет право на жизнь, но вышла неувязочка.

Или я что-то не так делаю (скорее всего так), или я не так понял.

Я задал диву.бокс фиксированную высоту 240px (макс. высота фото 220px + белая рамка по 10px с обеих сторон).

Добавил к коду строчку:

div.box {height:240px}

Но вышло что-то не так, т.к. вертикальные фото отображаются нормально, а горизонтальные нет, см скрин:

[Sotnikov]

режь фотографии по две штуки.. одну 240x240px, а вторую (ту же самую), но в полный размер и уже с маленькой ставь сслку на большую фотографию. Тогда не надо будет прописывать тебе высоту и ширину для класса, если ты конечно хочешь, чтобы фотографии нормально отображались.

[ZoNT]

нет никакой неувязки - я это и имел ввиду. С сохранением пропорций фотки (или не использую кроп) ты по другому и не сделаешь.

[Пятница]

Нет, я не хочу обрезать фото, и делать из них квадратики.

Согласен, будет выглядеть красиво, но в тоже время тупо.

Допустим, у меня панорама (вот только сегодня создал страницу с панорамами города http://dnepr-city.com/pano/), и не видно будет, что это панорама, т.к. будет показан лишь квадратик!

Блин, неужели нельзя средствами css сделать в ряду по 3 фото?

[ZoNT]

можно! только ты нам на бумажке нарисуй, как это должно выглядеть, а мы тебе поможем...

[Dimitry Wolotko]

Пятница, неугодные фотки по вертикали отцентруй - и это будет вполне нормально.

[Пятница]

можно! только ты нам на бумажке нарисуй, как это должно выглядеть, а мы тебе поможем...

Так понятно?

Пятница, неугодные фотки по вертикали отцентруй - и это будет вполне нормально.

гм, не очень понятна твоя идея, поподробнее пож, и как сделать)))

[ZoNT]

ну так вс? очень просто: по три фотки в див пихай и вс?. А диву поставь clear: both; а фоткам float: left;

[Sotnikov]

ага и margin

[ZoNT]

судя по рисунку - марджин на каждую фотку разный

[Dimitry Wolotko]

Фотки взяты в открытых источниках в гугле.

Немного кривовато, однако смысл ты пойм?шь.

[ZoNT]

1,3,5 фотки подняли настроение

[Dimitry Wolotko]

Смешные, я согласен

[Пятница]

Dimitry Wolotko, не понял, как тебе на мой хост удалось залить свои фото??????????

[Пятница]

а не, все норма, я аж пере*с*рал!

кстати, идея твоя понятна, даже интересно, просто нужно задать фиксированную ширину 240х240 пикс, ща попробуем!

[Dimitry Wolotko]

Dimitry Wolotko, не понял, как тебе на мой хост удалось залить свои фото??????????

гы )