Ответить на тему  [ Сообщений: 10 ] 
Как сделать макет на всю ширину 
Автор Сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение Как сделать макет на всю ширину
Здравствуйте. Убрал левое боковое меню меню. Но правая часть контента осталась без изменений. Изменил размер в стилях. Подскажите Вот ссылка http://www.skachatsbornikimp3.ru/


30 дек 2017, 21:29
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 935
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Здравствуйте. Ширину, на 82-й строке в style.css, либо уберите, либо выставите в значение auto.

_________________
Не всё валидно, что не видно.


30 дек 2017, 21:35
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Hoto писал(а):
Здравствуйте. Ширину, на 82-й строке в style.css, либо уберите, либо выставите в значение auto.

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


30 дек 2017, 21:47
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 935
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение 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;
}

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

_________________
Не всё валидно, что не видно.


31 дек 2017, 11:30
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Огромное спасибо


31 дек 2017, 13:22
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Здравствуйте! Уменьшил изображение до 200*200 и теперь в полной новости в спойлере размытый плюсик (спойлер)!
Как исправить?

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

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

Спасибо


24 фев 2018, 19:33
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 935
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Вообще контейнеру с изображение, у которого нужно изменить размеры, нужно добавить класс и уже для этого класса менять свойство ширины. А то получилось так, что размеры ширины изменили для всех изображений, которые находятся в контейнере с классом ".text".
Ну а уже круглым изображение можно сделать с помощью свойства border-radius: 50%;

_________________
Не всё валидно, что не видно.


24 фев 2018, 20:36
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение 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>


24 фев 2018, 20:44
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 935
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Сделайте так:
Код:
.text > div:first-child img {
    width: 200px;
   border-radius: 50%;
}

_________________
Не всё валидно, что не видно.


25 фев 2018, 13:02
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 18 фев 2013, 15:26
Сообщений: 46
Пол: мужской
Репутация: 10
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как сделать макет на всю ширину
Огромное спасибо


25 фев 2018, 15:27
Профиль Отправить личное сообщение
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 10 ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Вопрос по верстке страниц. Изображение на всю ширину шапки

в форуме CSS И ВЕРСТКА

aleksey

5

2319

26 мар 2009, 15:59

aleksey Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как задать ширину разделов в шапке сайта

в форуме ШАБЛОНЫ И ВНЕШНЕЕ ОФОРМЛЕНИЕ JOOMLA

Kircom

0

568

29 ноя 2010, 09:39

Kircom Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как задать минимально допустимую ширину ячейки?

в форуме HTML

Ирина

1

1856

07 июн 2013, 10:57

Hoto Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Настройка Community Builder на всю ширину сайта

в форуме ВНЕШНИЕ РАСШИРЕНИЯ ДЛЯ JOOMLA

salamandr

3

1303

09 мар 2012, 10:41

salamandr Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Ползунок прокрутки меняет ширину страницы

в форуме PHP , БАЗЫ ДАННЫХ, ЛОКАЛЬНЫЙ СЕРВЕР

dimaan777

0

767

10 июл 2010, 16:25

dimaan777 Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 4


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: