есть код:
PHP код:данный код выводит картинки после статьи в полной новости, в настройках отображается не больше 5 новостей ( в админке выставляется)похожих, но они идут в 2 столбика ( в верхнем 3, а в нижнем 2) как я не крутил код ( пробовал растягивать блок и ставить block - inline (цсс не знаю, пробовал методом тыка и интуитивно но не вышло)), у меня не получается,чтобы эти 5 новостей выводились не в 2 столбика, а горизонтальной линией, помогите пожалуйста.
/*related articles*/
#related {float:left;width:620px;overflow:hidden;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;-moz-border-radius-topright: 3px;border-top-right-radius: 3px;}
.full-width #related {width:720px;}
#related ul.tabnav {width:1600px;float:left;background:#464646;border:1px solid #202020;height:37px;color:#BBB;margin:0px;}
#related ul.tabnav li.title {height:29px;float:left;padding:9px 6px 0px 15px !important;background:#2b2b2b url(images/section-bullet-2.png) no-repeat 4px 11px;color:#FFF;text-transform:uppercase;font-size:14px;font-family:BebasNeueRegular, Arial, Sans-Serif;}
#related ul.tabnav li.arrow {width:11px;height:37px;background:url(images/arrow-related-right.png) no-repeat 0px 0px;}
#related ul.tabnav li a {padding:9px 10px 9px 10px;height:27px;font-family:Arial, Helvetica, sans-serif;color:#AAA;font-size:11px;text-transform:uppercase;}
#related ul.tabnav li a:hover, #related ul.tabnav li a:active, #related ul.tabnav li.ui-tabs-selected a, #related .tabdiv li.more a:hover {background:url(images/arrow-related-down.png) no-repeat center bottom !important;}
#related .tabdiv-wrapper {border:1px solid #DFDFDF;background:#F7F7F7;padding:15px 11px 15px 13px;}
.full-width #related .tabdiv-wrapper {padding:20px 20px 15px 28px;}
#related .panel {float:left;width:110px;margin:0px 20px 20px 0px;}
.full-width #related .panel {margin:0px 28px 28px 0px;}
#related .panel.right {margin-left:0px;}
#related .panel a.post-title {font-size:11px;;color:#666;display:inline;padding-top:10px;line-height:1.4em;}
#related .panel a.post-title:hover {color:#999;}
- 26.09.2012 16:03
- 26.09.2012 16:17
А сам код блоков похожих новостей в HTML где?
- 26.09.2012 16:30
покажу, где его взять, в сингл.пхп?
- 27.09.2012 03:42
poltava, если это Вордпресс, то отдельная новость выводится либо single.php, page.php либо с помощью своей страницы. Полагаю, что тут ситуация с CSS лишь посредственно связана.
Спасибо сказали:
PlaGoSWM(27.09.2012), - 27.09.2012 04:43
Ссылку на страницу покажите, пожалуйста. Так будет проще ориентироваться.
- 27.09.2012 07:43
poltava, не пойму причем css?
- 27.09.2012 16:55
т.к. в файле, отвечающий за вывод похожих нет функций отвечающий за стиль, поэтому и взял цсс, в админке шаблона показана лишь количество выводимых, а не их стиль, поэтому и взял цсс, больше не знаю как еще можно
- 27.09.2012 17:53
Судя по этой строке
#related .panel {float:left;width:110px;margin:0px 20px 20px 0px;}
ширина одной новости получается 110px+20px, т.е все блоки вместе 650px, а ширина родителя всего 620px. Уже выходит, что один блок должен съехать вниз.
вот тут, например, тоже
#related .tabdiv-wrapper {border:1px solid #DFDFDF;background:#F7F7F7;padding:15px 11px 15px 13px;}
скорее всего новости и в этот блок вложены, т.е. еще вычитаем из 620px 11, 13px и бордер справа и слева по 1px
Плюс еще где-нибудь могут быть какие-нибудь отступы, бордеры, сложно судить только по css. Непонятно, что во что вложено, да и вообще.
Попробуйте уменьшить width у #related .panel до 50px, например, чтобы точно увидеть, что блоки не влезают именно из-за стилей. Если сработает, там уже пропорционально уменьшайте все отступы и ширину блоков, чтоб смотрелось красиво и все влезало.
Но вообще выше правильно сказали, урл решил бы все проблемы гораздо быстрее - 28.09.2012 15:48
Найдите в каком то из файлом шаблона (в вордпрессе не разбираюсь, скорей всего файл или полной новости, или вывод похожих новостей) тег
Код:и просто уберите его полностью.<br class="clearer">
Только все 5 не вместятся в одну линию, ширины блока не хватит. Чтобы вместились, необходимо это
Код:#related .panel { float: left; width: 110px; margin: 0px 20px 20px 0px; }
заменить на это
Код:по идее 430 строка файла style.css, думаю, найдете#related .panel { float: left; width: 110px; margin: 0px 4px 20px 4px; }
Последний раз редактировалось OKyJIucT; 28.09.2012 в 15:54.
- 28.09.2012 22:53
все сделал как вы написали - не помогло, ничего не изменилось
Тэги топика:
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Помогите с css | Web программирование | 3 | 16.05.2011 10:54 |
Помогите с css | Прочее | 0 | 01.05.2011 23:43 |
помогите пож. | Вопросы от новичков | 11 | 29.04.2011 13:45 |