Question

Имеется сайт, на котором съехала вёрстка фотоальбома. Фотографии по горизонтали заходят друг на друга.

Виновник этого поведения процентное соотношение размера элемента по горизонтали и размер элемента в пикселях. Сейчас у элемента выставлена ширина 20%, мне нужно 25%, чтобы отображалось 4 фотографии по горизонтали. Однако здесь загвоздка, написано, что стиль, в котором прописаны проценты - inline, то есть прописан где-то в html. Я уже перерыл все шаблоны, но не могу найти, где его отредактировать. Нужна помощь сообщества.

P.S. Ожидаемый результат при 25% у элемента выглядит как на скриншоте ниже (изменено в инструментах разработчика в браузере).

Сам кусок кода страницы, в который прописаны проценты:

 

<div id="allEntries">
    <ul id="uEntriesList" class="allEntriesTable" page="1">
        ::before
        <li class="phtTdMain uEntryWrap" prev="0" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" style="width: 20%;"></li>
        <li class="phtTdMain uEntryWrap" next="2" style="width: 20%;"></li>
        ::after
    </ul>
</div>

 

<html>
    <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>$CAT_NAME$ <?if($SECTION_NAME$)?>- $SECTION_NAME$<?endif?> - $MODULE_NAME$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>
        
        <link type="text/css" rel="StyleSheet" href="/_st/my.css" />
    </head>
    <body>
$ADMIN_BAR$
        <div id="wrap">
            <div id="container">
                $GLOBAL_AHEADER$
                <div id="content">
                    <!-- <middle> -->
                    <div class="sidebar">
                        <div class="sidebar-top"></div>
                        <div class="sidebar-mid">
                            $GLOBAL_CLEFTER$
                        </div>
                        <div class="sidebar-bot"></div>
                    </div>
                    <div id="maincont">
                        <!-- <body> --><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> &raquo; <a href="$MODULE_URL$"><!--<s5169>-->Фотоальбом<!--</s>--></a> &raquo; $SECTION_NAME$ <hr />
<table border="0" width="100%" cellspacing="1" cellpadding="2">
<tr><td width="50%" style="white-space: nowrap;"><?if($NUM_ENTRIES$)?><!--<s5226>-->Фотографий в разделе<!--</s>-->: <b>$NUM_ENTRIES$</b><?endif?></td><td align="right"><?if($PAGE_SELECTOR$)?><!--<s3015>-->Страницы<!--</s>-->: $PAGE_SELECTOR$<?endif?></td></tr>
<tr><td colspan="2" align="center"><hr />$BODY$</td></tr>
<tr><td colspan="2" align="center">$PAGE_SELECTOR1$</td></tr>
</table><!-- </body> -->
                    </div>
                    <div class="clear"></div>
                    <!-- </middle> -->
                </div>
                $GLOBAL_BFOOTER$
            </div>
    </body>
</html>

 

Answer 1

Необходимо перейти на страницу Панель управления - Фотоальбомы - Настройки модуля и установить количество колонок - 4: http://screencast.com/t/qOXUicEJnaX

Answer 2

Это пропишите в ксс...

#uEntriesList .uEntryWrap {
display: inline-block;
text-align: center;
vertical-align: top;
width: 25% !important;
}