Форум поддержки сайта zvirec.com
http://forum.zvirec.com/

Как сделать макет на всю ширину
http://forum.zvirec.com/viewtopic.php?f=8&t=23587
Страница 1 из 1

Автор:  medik [ 30 дек 2017, 21:29 ]
Заголовок сообщения:  Как сделать макет на всю ширину

Здравствуйте. Убрал левое боковое меню меню. Но правая часть контента осталась без изменений. Изменил размер в стилях. Подскажите Вот ссылка http://www.skachatsbornikimp3.ru/

Автор:  Hoto [ 30 дек 2017, 21:35 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Здравствуйте. Ширину, на 82-й строке в style.css, либо уберите, либо выставите в значение auto.

Автор:  medik [ 30 дек 2017, 21:47 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Hoto писал(а):
Здравствуйте. Ширину, на 82-й строке в style.css, либо уберите, либо выставите в значение auto.

теперь отступы справа появились. Подскажите.

Автор:  Hoto [ 31 дек 2017, 11:30 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Это не отступы, а пустое пространство (не много разные понятия). На самом деле вариантов много, вот 3 из них:
1
Код:
.right_col {
    padding-bottom: 30px;
    width: 900px;
    margin: auto;
}


2
Код:
.short_content {
    font-size: 12px;
    text-align: center;
}
.app_right_mode .news section {
    width: 145px;
    height: 185px;
    box-shadow: 0 0 3px 2px #E4E4E4;
    margin: 5px;
    border-radius: 11px;
    display: inline-block;
}


3
Код:
#dle-content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.app_right_mode .news section {
    width: 145px;
    height: 185px;
    box-shadow: 0 0 3px 2px #E4E4E4;
    margin: 5px;
    border-radius: 11px;
}

Конечно я бы отдал предпочтение третьему способу. Соответственно ваши правила нужно заменить одними из этих вариантов, а не добавлять к вашим.

Автор:  medik [ 31 дек 2017, 13:22 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Огромное спасибо

Автор:  medik [ 24 фев 2018, 19:33 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Здравствуйте! Уменьшил изображение до 200*200 и теперь в полной новости в спойлере размытый плюсик (спойлер)!
Как исправить?

И еще как сделать эти изображения круглые (как в правой колонке)?

https://www.sbornikimp3.ru/album-trance ... -2018.html

Спасибо

Автор:  Hoto [ 24 фев 2018, 20:36 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Вообще контейнеру с изображение, у которого нужно изменить размеры, нужно добавить класс и уже для этого класса менять свойство ширины. А то получилось так, что размеры ширины изменили для всех изображений, которые находятся в контейнере с классом ".text".
Ну а уже круглым изображение можно сделать с помощью свойства border-radius: 50%;

Автор:  medik [ 24 фев 2018, 20:44 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Ничего не получится! Или как

Вот краткая новость

<article class="block story shortstory">
[not-group=5]
<ul class="story_icons">
<li class="fav_btn">
[add-favorites]<span title="Добавить в закладки"><svg class="icon icon-fav"><use xlink:href="#icon-fav"></use></svg></span>[/add-favorites]
[del-favorites]<span title="Убрать из закладок"><svg class="icon icon-fav_del"><use xlink:href="#icon-fav_del"></use></svg></span>[/del-favorites]
</li>
<li class="edit_btn">
[edit]<i title="Редактировать">Редактировать</i>[/edit]
</li>
</ul>
[/not-group]
<h2 class="title"><a href="{full-link}">{title}</a></h2>
<div class="story_top">
[fixed]<span class="fixed_label" title="Это важно!">Это важно!</span>[/fixed]
<time class="date grey" datetime="{date=Y-m-d}">[day-news]{date=d/m/Y H:i}[/day-news]</time>
</div>
<div class="text">
{short-story}
[edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
[edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
</div>
<div class="category grey">
<svg class="icon icon-cat"><use xlink:href="#icon-cat"></use></svg>
{link-category}
</div>
<div class="story_tools">
<div class="story_tools_in">
<a href="{full-link}" title="Читать подробнее: {title}" class="btn"><span class="more_icon"><i></i><i></i><i></i></span></a>
[rating]
<div class="rate">
[rating-type-1]<div class="rate_stars">{rating}</div>[/rating-type-1]
[rating-type-2]
<div class="rate_like" title="Мне нравится">
[rating-plus]
<svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg>
{rating}
[/rating-plus]
</div>
[/rating-type-2]
[rating-type-3]
<div class="rate_like-dislike">
[rating-plus]<span class="plus_icon" title="Нравится"><span>+</span></span>[/rating-plus]
{rating}
[rating-minus]<span class="plus_icon minus" title="Не нравится"><span>-</span></span>[/rating-minus]
</div>
[/rating-type-3]
</div>
[/rating]
</div>
<ul class="meta grey">
<li class="meta_author" title="Автор">
<svg class="icon icon-author"><use xlink:href="#icon-author"></use></svg>{author}
</li>
<li class="meta_coms" title="Комментариев: {comments-num}">[com-link]<svg class="icon icon-coms"><use xlink:href="#icon-coms"></use></svg>{comments-num}[/com-link]</li>
<li class="meta_views" title="Просмотров: {views}"><svg class="icon icon-view"><use xlink:href="#icon-view"></use></svg>{views}</li>
</ul>
</div>
</article>

Вот полная

<article class="block story fullstory">
[not-group=5]
<ul class="story_icons ignore-select">
<li class="fav_btn">
[add-favorites]<span title="Добавить в закладки"><svg class="icon icon-fav"><use xlink:href="#icon-fav"></use></svg></span>[/add-favorites]
[del-favorites]<span title="Убрать из закладок"><svg class="icon icon-fav_del"><use xlink:href="#icon-fav_del"></use></svg></span>[/del-favorites]
</li>
<li class="edit_btn">
[edit]<i title="Редактировать">Редактировать</i>[/edit]
</li>
</ul>
[/not-group]
<h1 class="h2 title">{title}</h1>
<div class="story_top ignore-select">
[fixed]<span class="fixed_label" title="Это важно!">Это важно!</span>[/fixed]
<time class="date grey" datetime="{date=Y-m-d}">[day-news]{date=d/m/Y H:i}[/day-news]</time>
</div>
{poll}
<div class="text">
{full-story}
{pages}
[edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
[edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
</div>
<div class="category grey">
<svg class="icon icon-cat"><use xlink:href="#icon-cat"></use></svg>
{link-category}
</div>
<div class="story_tools ignore-select">
<div class="story_tools_in">
<!-- Ya.Share -->
<div class="share">
<script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-size="s"></div>
</div>
<!-- / Ya.Share -->
[rating]
<div class="rate">
[rating-type-1]<div class="rate_stars">{rating}</div>[/rating-type-1]
[rating-type-2]
<div class="rate_like" title="Мне нравится">
[rating-plus]
<svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg>
{rating}
[/rating-plus]
</div>
[/rating-type-2]
[rating-type-3]
<div class="rate_like-dislike">
[rating-plus]<span class="plus_icon" title="Нравится"><span>+</span></span>[/rating-plus]
{rating}
[rating-minus]<span class="plus_icon minus" title="Не нравится"><span>-</span></span>[/rating-minus]
</div>
[/rating-type-3]
</div>
[/rating]
</div>
<ul class="meta grey">
<li class="meta_author" title="Автор">
<svg class="icon icon-author"><use xlink:href="#icon-author"></use></svg>{author}
</li>
<li class="meta_coms" title="Комментариев: {comments-num}">[com-link]<svg class="icon icon-coms"><use xlink:href="#icon-coms"></use></svg>{comments-num}[/com-link]</li>
<li class="meta_views" title="Просмотров: {views}"><svg class="icon icon-view"><use xlink:href="#icon-view"></use></svg>{views}</li>
</ul>
</div>
</article>
<!-- Рекламные материалы -->
<div class="block ignore-select">
<div class="banner">
<img src="{THEME}/images/tmp/banner_740x90.png">
</div>
</div>
<!-- / Рекламные материалы -->
<div class="comments ignore-select">
[comments]
<div class="comments_box">
<div class="comments_box_in">
<h4 class="title">Комментариев <span class="green">{comments-num}</span></h4>
<div class="com_list">
{comments}
</div>
{navigation}
</div>
</div>
[/comments]
[not-comments]
<div style="padding-left:45px;padding-right:45px;">
{comments}
</div>
[/not-comments]
{addcomments}
</div>

Автор:  Hoto [ 25 фев 2018, 13:02 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Сделайте так:
Код:
.text > div:first-child img {
    width: 200px;
   border-radius: 50%;
}

Автор:  medik [ 25 фев 2018, 15:27 ]
Заголовок сообщения:  Re: Как сделать макет на всю ширину

Огромное спасибо

Страница 1 из 1 Часовой пояс: UTC + 3 часа
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/