float:left — выталкивание нижестоящего контейнера

[dreamcutter]

Приветствую, односельчане Прошу о небольшой помощи по верстке — буду очень признателен вам за советы.

Поставил фотогалерею NextGEN на этот сайт. И заметил, что фотографии странно себя ведут:

Привожу html-код левой верхней фотографии (см. скриншот выше)

<div class="ngg-gallery-thumbnail-box" id="ngg-image-26">
	<div class="ngg-gallery-thumbnail">
		<a rel="lightbox[set_4]" title="Применение сигнализаторов загазованности RGD" href="http://seitron.ru/wp-content/gallery/objects/obj1.jpg" class="cboxElement">
			<img width="250" height="188" src="http://seitron.ru/wp-content/gallery/objects/thumbs/thumbs_obj1.jpg" alt=" " title=" ">
		</a>
	</div>
</div>

Если я уменьшаю height всего на 1px, все становится на свои места.

А иначе верхняя фотография «выталкивает» нижнюю.

Миниатюры генерируются автоматически, я не могу влиять на их размеры.

Поэтому нужен выход без уменьшения height на пиксель

Заранее благодарю вас за внимание к теме и помощь...

[gordi]

Приветствую, односельчане Прошу о небольшой помощи по верстке — буду очень признателен вам за советы.

Поставил фотогалерею NextGEN на этот сайт. И заметил, что фотографии странно себя ведут:

Привожу html-код левой верхней фотографии (см. скриншот выше)

<div class="ngg-gallery-thumbnail-box" id="ngg-image-26">
	<div class="ngg-gallery-thumbnail">
		<a rel="lightbox[set_4]" title="Применение сигнализаторов загазованности RGD" href="http://seitron.ru/wp-content/gallery/objects/obj1.jpg" class="cboxElement">
			<img width="250" height="188" src="http://seitron.ru/wp-content/gallery/objects/thumbs/thumbs_obj1.jpg" alt=" " title=" ">
		</a>
	</div>
</div>

Если я уменьшаю height всего на 1px, все становится на свои места.

А иначе верхняя фотография «выталкивает» нижнюю.

Миниатюры генерируются автоматически, я не могу влиять на их размеры.

Поэтому нужен выход без уменьшения height на пиксель

Заранее благодарю вас за внимание к теме и помощь...

Попробуйте в файле стилей такую запись:

.ngg-gallery-thumbnail img {width:XXXpx;height=XXXpx;}

Вместо ХХХ подбираем нужное значение.

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

строка в вашем фрагменте:

<img width="250" height="188" ...>

[Searcher]

так у вас для левой картинки стоит height="188", а для следующей height="177", вот левая и мешает...

используйте firebug или аналоги, быстрее сами все увидите

[dreamcutter]

Попробуйте в файле стилей такую запись:

.ngg-gallery-thumbnail img {width:XXXpx;height=XXXpx;}

Вместо ХХХ подбираем нужное значение.

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

строка в вашем фрагменте:

<img width="250" height="188" ...>

Благодарю за ответ, gordi.

Вопрос в том, что галереи есть разные (см. здесь), и у разных фоток разные соотношения сторон и размеры.

Поэтому я не могу в лоб задать такой стиль. Необходимо более универсальное решение.

так у вас для левой картинки стоит height="188", а для следующей height="177", вот левая и мешает...

используйте firebug или аналоги, быстрее сами все увидите

FireBug, естественно, использую, им и установил, что уменьшение высоты на пиксель ставит все на места

Соответственно, я в курсе, что у левой и правой фотки высоты разные. Но вопрос в том, как это поправить?

[gordi]

Попробуйте в файле стилей такую запись:

.ngg-gallery-thumbnail img {width:XXXpx;height=XXXpx;}

Вместо ХХХ подбираем нужное значение.

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

строка в вашем фрагменте:

<img width="250" height="188" ...>

Благодарю за ответ, gordi.

Вопрос в том, что галереи есть разные (см. здесь), и у разных фоток разные соотношения сторон и размеры.

Поэтому я не могу в лоб задать такой стиль. Необходимо более универсальное решение.

У вас проблема в ширине картинок.

Можно иначе:

.ngg-gallery-thumbnail img {width:XXXpx;height:auto;}

Ширину подберет оптимальную, а высота автоматом подстраиваться будет.

[hedgehog]

так это же галерея. можно вставлять тюмбнейлы одного размера, а при click/hover - показывать жаваскриптом полноразмерное изображение.

Edited October 26, 2011 by hedgehog

[Searcher]

Ширину подберет оптимальную, а высота автоматом подстраиваться будет.

вот как раз высоту надо стандартизировать, а ширину в auto поставить.

[gordi]

Ширину подберет оптимальную, а высота автоматом подстраиваться будет.

вот как раз высоту надо стандартизировать, а ширину в auto поставить.

Значит сделать на оборот

.ngg-gallery-thumbnail img {width:auto;height:XXXpx;}

[dreamcutter]

Ребят, остановился пока на таком варианте

.ngg-gallery-thumbnail img {width:auto;height:170px;}

Спасибо за помощь! Это хорошо, но хотелось бы решить задачу как-то иначе — может кто-то подскажет как?

[Searcher]

иначе - копайте в серверных скриптах, почему ж они дают картинку больше, чем нужно...