Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Расстояние между дивами.

Автор: SneG0K 13.8.2009, 18:33

Код


<div class="brand_div"><a href="index.php?op=brands&sec=show&id={ $item.id }">
    <img src="core/pictures/brand_bg.gif" class="brand_bg" width="177" height="57"/>
    <img src="core/pictures/brands/{ $item.pic }" title="{ $item.title }" class="brand_pic"/>
</a></div>

Есть вот так две картинки.
С помощью CSS делаю чтобы одна была поверх другой

Код


.brand_bg {
    border: none;
    width: 75%;
    overflow: hidden;
}

.brand.div {
    overflow: hidden;
    height: 57px;
}

.brand_pic {
    border: 1px dotted #000000;
    position: relative;
    left: +50px;
    top: -55px;
}

Но в итоге, если таких блока два или больше, то
http://ipicture.ru/Gallery/Viewfull/22223198.html
Как видно из скриншота, расстояние между двумя отдельными блоками очень велико. Как это исправить?

И еще вопрос, вторая картинка, которую я двигаю в центр первой, может незначительно изменятся в размерах. Как сделать так, чтобы вторая картинка в независимости от своих размеров всегда размещалась по центру первой? (не начало координат, а центр второй картинки совпадал с центром первой).

Спасибо.

Автор: bars80080 13.8.2009, 20:57

у тебя опечатка .brand.div вместо .brand_div
и ты умудрился задать обоим картинкам один класс. они вместе подчиняются правилу в нём

я б сделал так:

Код


.brand_div { position: relative; }
#image2 { position: absolute; left: 0px; top: 0px; }

#image2 - id второй картинки

Автор: SneG0K 13.8.2009, 21:21

bars80080, а если картинок 20? под каждую писать класс?

Добавлено через 59 секунд
bars80080, принципе очепятка спасла ситуацию)

Автор: bars80080 14.8.2009, 00:40

Цитата(SneG0K @ 13.8.2009, 21:21

)

а если картинок 20? под каждую писать класс?

нет, надо просто грамотно сформулировать задачу