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

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

Форум программистов > Вёрстка веб-сайтов > Как лучше выровнять картинку в ячейке <li>

Автор: CmndrAlexGreen 12.3.2011, 16:49

Есть блок, в этом блоке список, в каждой ячейке этого списка будет картинка и текст под ней. Я немного сомневаюсь в правильности моего метода, подскажите - поправте. (стремлюсь оптимизировать код для 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

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

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

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

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

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