Выравнивание изображений

[Jonathan]

Здравствуйте.

Есть список ul, также изображения около каждого пункта, которые появляются при наведении курсора на пункт. Ниже css и список.

 div.firmwares ul li {
 position: relative;
 }

div.firmwares ul li img {
display: none;
position: absolute;
top: 0;
border: 1px solid #228B22;
left: 40%;
}

div.firmwares ul li:hover img {
display: block;

}

<ul id="se">
<li><a src="/se_c510">Aino</a><img src="img/se/Aino.png" /></li>
<li><a>C510<img src="img/se/c510.png" /></li>
<li><a>C702<img src="img/se/c702.png" /></li>		
<li><a>C902<img src="img/se/c902.png" /></li>		
<li><a>G502<img src="img/se/g502.png" /></li>		
<li><a>J105i (Naite)<img src="img/se/j105.png" /></li>		
<li><a>K550i<img src="img/se/k550.png" /></li>		
<li><a>K610i<img src="img/se/k610.png" /></li>
<li><a>K750i<img src="img/se/k750.png" /></li>
</ul>

тут всё как надо:

Так вот, снизу выглядит не очень, изображение вылезает за див:

Как выравнить изображение на диве, чтоб оно никак не вылезало за див, притом простым спобом, желательно без JS? Или придется каждое изображение вручную выранивать с помощью top и bottom?

[ShumNo]

а за чем вы позиционируете абсолютно к картинкам?

абсолют он и есть абсолют ему все равно что справа или слева

[Jonathan]

Спсибо). Совсем забыл, изначально планировалось появление изображений около <li>, но как только я поставил изображения в каждый пункт, то оказался у тупика.

Но есть ли выход? Нужно чтоб верхние изображения так и появлялись у пунктов, но в то же время нижние НЕ выходили за див. Можно обойтись без top и bottom? посоветуйте.

[ShumNo]

без js если думаю не удобно будет но делать видимо 1 раз

прилепить класс к каждой ссылке и сдвигать в стилях на высоту li причем класс требуется только на первые 15 пунктов под все остальные можно по дефолту

Edited September 11, 2011 by ShumNo

[Nanto]

Так с ходу ничего простого в голову и не приходит...

Кроме как выкинуть относительное позиционирование у <li>, и позиционировать <img> абсолютно относительно окна браузера - смещаться никуда не будет, но придётся точно спозиционировать этот блок - зависит от того, насколько сложен Ваш макет... Если сверху куча контента, который по-разному может отмасштабироваться, то наверное лучше отказаться...

Да и вообще, какая-то хреновая задумка... Вы себе представляете тормоза? - при каждом ховере на ссылку в вертикальном списке (мышкой кто-то случайно вдоль списка проведёт...) грузить такую картинку? А спрайт ТАКОГО размера мне даже страшно представить!..

[Nanto]

Придумал вариант с позиционированием относительно нужного блока (а не окна браузера), но при этом от списков придётся отказаться...

<div id="box">
	<p>K300</p>
	<div id="K300"></div>
	<p>k500</p>
	<div id="K500"></div>
	...
</div>

#box{
position:relative;
}
#box div{
position:absolute;
top:0px;
left:40%;
display:none;
}
#box p:hover+div{
display:block;
}
#K300{
background-image:...;
}
#K500{
background-image:...;
}

Edited September 11, 2011 by Nanto

[Jonathan]

Так с ходу ничего простого в голову и не приходит...

Кроме как выкинуть относительное позиционирование у <li>, и позиционировать <img> абсолютно относительно окна браузера - смещаться никуда не будет, но придётся точно спозиционировать этот блок - зависит от того, насколько сложен Ваш макет... Если сверху куча контента, который по-разному может отмасштабироваться, то наверное лучше отказаться...

Да и вообще, какая-то хреновая задумка... Вы себе представляете тормоза? - при каждом ховере на ссылку в вертикальном списке (мышкой кто-то случайно вдоль списка проведёт...) грузить такую картинку? А спрайт ТАКОГО размера мне даже страшно представить!..

Насчет тормозов. Все картинки загружаются одновременно с загрузкой главной страницы. Да и весят они 150 - 250 кбайт.

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

Придумаю еще что-нибудь.

Спасибо.

ПС: если че, как всё есть