VPF::Как лучше выровнять картинку в ячейке <li>

CmndrAlexGreen

Дата 12.3.2011, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

Есть блок, в этом блоке список, в каждой ячейке этого списка будет картинка и текст под ней. Я немного сомневаюсь в правильности моего метода, подскажите - поправте. (стремлюсь оптимизировать код для XHTML 1.0 Strict)

Код


<div id="mbox">            <ul id="menu">
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера</a></li>
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера 2 камера</a></li>
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера 3 камер</a></li>
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера 4 камер</a></li>
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера 5 камер</a></li>
                            <li><a href="" title=""><img src="img/Video2.gif" alt=""/></img>Камера 6  камер</a></li>
                            </ul>
        </div>

Код


#mbox        {width:1025px;float:left; }
#menu        {display:block;}
#menu li            {display:inline;width:200px;height:200px;text-align: center;float:left;}
#menu img    {display:block; margin:0 auto;}

SelenIT

Дата 13.3.2011, 00:05 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

</img> выжечь каленым железом: 1) <img ... /> уже закрыт, 2) отдельный закрывающий тег для пустых элементов во всех стандартах запрещен.

display:block для ul можно не указывать, он и так блочный. А вот обнулить маргины-паддинги для ul и li не помешает, а то браузеры лепят там кому что взбредет.

Ну и для ссылки еще display:block задать не помешает, для порядка (чтоб не было блочных боксов в строчных, в FF от этого артефакты бывают).

И float внешнему диву точно нужен? Если он только для растягивания контейнера, можно подумать о замене на overflow:hidden (тот же эффект с меньшими рисками).

А так нормально, имхо smile

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »