Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Выравнивание новостных кнопок и белый спойлер Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Выравнивание новостных кнопок и белый спойлер Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Не корректное отображение картинок
автор Luz Сегодня в 12:40

» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Сегодня в 12:13

» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

Выравнивание новостных кнопок и белый спойлер

Участников: 2

Перейти вниз

Выравнивание новостных кнопок и белый спойлер Empty Выравнивание новостных кнопок и белый спойлер

Сообщение автор Лютик Август 21st 2015, 18:11

Добрый день!
Ищу решения проблемы сразу с 2я, казалось бы незначительными моментами.
Во-первых, спойлер. Как можно убрать белую заливку рамки спойлера? Все перепробовал - не смог найти, где это настраивается.

Желаемый результат:

Код:
/* spoiler 2 */
.spoiler dt {
background-color:transparent;
}
.spoiler {
border: dashed #594b38 1px;
border-radius: 8px;
}
.spoiler dd {
padding:0px;
}
.spoiler dd div {
border: dashed #594b38 1px;
border-radius: 6px;/*рамка скрытой части спойлера*/
background:url(http://i18.servimg.com/u/f18/19/29/15/89/32fbd712.png)/*фон скрытой части спойлера*/
padding:4px 10px;
position:relative;
}

Вторая проблема с кнопками переключения новостей. Не было ли найдено решения, чтобы новости отображались не в горизонтальной последовательности, а в вертикальной? И как выровнять кнопки переключения между новостями по картинке новости, а не по границе блока.

Желаемый результат:

Код:
/* блок с кнопками и новостями */
#example-content-container {
width: 400px;
height: 460px;
margin: 0 auto 0;
border: none;
overflow: hidden;
}

/* внутренний блок новостей, ширина = сумма всех новостных блоков */
#example-content {
display: block;
width: 5000px;
overflow: hidden;
}


/* кнопки 1-9 и 'все новости' */
#example-links p, #example-links a.allnews {
display: block;
border: dashed 1px #594b38;
float: left;
text-align: center;
line-height: 20px;
margin: 0 5px 10px 0;
cursor: pointer;
background-color:;
color: #594b38;
text-decoration: none !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

#example-links p {
height: 20px;
width: 20px;
}

#example-links a.allnews {
height: 20px;
width: 90px;
}

/* кнопки 1-9 и 'все новости' при наведении */
#example-links p:hover, #example-links a.allnews:hover {
background-color: #D9D0BD;
color: #594b38;
}

div#example-content-container {
height: 1010px !important;
width: 400px !important;
overflow: hidden !important;
margin: 0 auto;
}

div#example-content {
height: 1500px !important;
width: 2500px !important;
}

#example-content .module.main {
width: 550px !important;
height: 300px !important;
overflow: visible !important;
float: left;
}

div.module.mod_news {
width: 550px !important;
height: 400px !important;
}
Лютик
Лютик
Новичок

Сообщения : 5
Возраст : 38
Регистрация : 2015-08-21
Благодарности : 0

Без предупреждений

http://squad.forum2x2.ru/

Вернуться к началу Перейти вниз

Выравнивание новостных кнопок и белый спойлер Empty Re: Выравнивание новостных кнопок и белый спойлер

Сообщение автор Лютик Август 24th 2015, 08:18

Вопрос по прежнему актуален. 39
Лютик
Лютик
Новичок

Сообщения : 5
Возраст : 38
Регистрация : 2015-08-21
Благодарности : 0

Без предупреждений

http://squad.forum2x2.ru/

Вернуться к началу Перейти вниз

Выравнивание новостных кнопок и белый спойлер Empty Re: Выравнивание новостных кнопок и белый спойлер

Сообщение автор King of the Secret Forest Август 24th 2015, 21:21

Приветствую. Попытаюсь разобраться с первой Вашей проблемой.
Вообще это довольно странно. В Вашем коде прописан цвет рамки спойлера:
Код:
border: dashed #594b38 1px;

А именно: # 594b38 (добавил пробел между символом "#" и кодом цвета, чтобы хеш-тег не выделялся)
Этот цвет не прозрачен и на белизну не претендует, скажем так.
Попробуйте пунктир убрать на время вот здесь -
Код:
border: dashed #594b38 1px;
dashed (пунктирная линия)
И заменить его на одну четкую строку:
solid (жирная линия).
Получится так:
Код:
border: solid #594b38 1px;
Если это не поможет, можно поменять местами ширину рамки и цвет, чтобы вышло так:
Код:
border: 1px solid #594b38;
У меня самого вначале число пикселей стоит, и только после цвет рамки. Хотя я не думаю, чтобы из-за этого код не работал. Но попробовав, Вы ничего не теряете.
Если же, говоря про "белую заливку рамки спойлера", Вы имеете в виду именно заливку спойлера, а не линию, которая его обводит, тогда я Вас огорчу (или порадую), у Вас она не прописана вовсе.
Здесь -
Код:
background-color: transparent;
Заливки нет, ибо фон вообще прозрачный.
Здесь -
Код:
border: dashed #594b38 1px;
border-radius: 8px;
Цветовой фон не прописан.
Попробуйте в первой части кода вместо "transparent" поставить нужный Вам цвет, а во второй добавить строку "background-color:" с добавлением нужного цвета, опять же. Если не уверены, какая строка за какое место спойлера отвечает, поставьте разные цвета, сохраните и проверьте, как смотрится спойлер. А после в нужных строках поменяйте цвета на те, которые Вам подходят. Я сам так делаю, если работаю с каким-то новым для меня кодом.
А вот в этой строке -
Код:
background:url(http://i18.servimg.com/u/f18/19/29/15/89/32fbd712.png)/*фон скрытой части спойлера*/
рекомендую поставить точку с запятой и пробел между закрывающей скобкой после ссылки на картинку и примечанием.
Иногда из-за отсутствия пробелов в кодах возникают глюки. Всегда следите за пробелами в нужных местах. Вот в Вашем случае, к примеру, часть ссылки в коде окрасилась в цвет примечания. Мне это говорит о том, что ссылка может не работать. А так как цвет помимо ссылки в этой строке не задан, то и фон (заливка) спойлера отображаться не будет. Автоматом вполне может ставиться белый фон. Потому попробуйте добавить пробел. Если нет, перед ссылкой "url(...)" добавьте нужный цвет. Если даже она не работает, то, по крайней мере, цвет должен сработать.
Надеюсь, смог помочь. Если нет, напишите, попробуем другие варианты.


Относительно второго вопроса так сразу и не скажу. Возможно, нужно поработать с шириной и высотой. Но, думаю, там собака чуть глубже зарыта. Может, кто лучше в подобных кодах разбирается. Но я тоже подумаю. Может, соображу чего.
King of the Secret Forest
King of the Secret Forest
 

Сообщения : 40
Возраст : 34
Регистрация : 2015-06-18
Благодарности : 4

Без предупреждений

http://post-mortem.forumgrad.com/

Вернуться к началу Перейти вниз

Выравнивание новостных кнопок и белый спойлер Empty Re: Выравнивание новостных кнопок и белый спойлер

Сообщение автор Лютик Август 28th 2015, 19:53

King of the Secret Forest, спасибо! Со спойлерами разобрался. Окончательная победа и исполнение всех мечтаний. С положением кнопок и отображением новостного блока - пока вопрос так же актуален.

Если кому интересно по спойлерам, сделал вот так:

Код:
/* оформление цитаты, кода, спойлера */
dl.codebox, blockquote {
 display:block;
 border: 1px dashed #594b38; /* контур */
 border-radius: 8px;
 margin: 10px;
 padding: 0 10px 0 20px;
 background: #594b38 url('http://i18.servimg.com/u/f18/19/29/15/89/32fbd714.png') repeat;  /* фоновое изображение */
 font-size: 12px !important;  /* размер шрифта */
 font-family: arial, helvetica, sans-serif !important;  
 line-height: 21px;
   color: #594b38; /* цвет текста */  
 position: relative;
}

/* оформление цитаты, кода, спойлера - внутренний блок */
blockquote div, .spoiler_content, .codebox.hidecode dd, dl.codebox code {
  border-top: none;
  border-bottom: none;
  border-right: none;
  border-left: none;
 font-size: 12px !important;  /* размер шрифта */
  padding-left: 15px;  
  background-color: transparent !important; /* прозрачный фон */
 line-height: 21px;
  margin: 0;
}

/* заголовок цитаты, кода, спойлера */
dl.codebox dt, blockquote cite {
font-weight: bold !important;
border-bottom: none;
color: #594b38 !important; /* цвет заголовков */
font-size: 12px !important;  /* размер шрифта */
margin-bottom: 0;
text-transform: none;
}

При закрытом спойлере:
Выравнивание новостных кнопок и белый спойлер B53c8510
При раскрытом спойлере:
Выравнивание новостных кнопок и белый спойлер 95df4910
Лютик
Лютик
Новичок

Сообщения : 5
Возраст : 38
Регистрация : 2015-08-21
Благодарности : 0

Без предупреждений

http://squad.forum2x2.ru/

Вернуться к началу Перейти вниз

Выравнивание новостных кнопок и белый спойлер Empty Re: Выравнивание новостных кнопок и белый спойлер

Сообщение автор Лютик Сентябрь 2nd 2015, 18:39

В очередной раз прошу помощи с подобным блоком новостей. Блок нравится, хотелось бы такой оставить, но не могу настроить расположение тем:
1-4-7
2-5-8
3-6-9

Так и остается:
1-2-3
4-5-6
7-8-9

А ведь явно можно.

CSS:
Код:
/* блок с кнопками и новостями */
#example-content-container {
width: 400px;
height: 460px;
margin: 0 auto 0;
border: none;
overflow: hidden;
}

/* внутренний блок новостей, ширина = сумма всех новостных блоков */
#example-content {
display: block;
width: 5000px;
overflow: hidden;
}


/* кнопки 1-9 и 'все новости' */
#example-links p, #example-links a.allnews {
display: block;
border: dashed 1px #594b38;
float: left;
text-align: center;
line-height: 20px;
margin: 0 5px 10px 0;
cursor: pointer;
background-color:;
color: #594b38;
text-decoration: none !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

#example-links p {
height: 20px;
width: 20px;
}

#example-links a.allnews {
height: 20px;
width: 90px;
}

/* кнопки 1-9 и 'все новости' при наведении */
#example-links p:hover, #example-links a.allnews:hover {
background-color: #D9D0BD;
color: #594b38;
}

div#example-content-container {
height: 1010px !important;
width: 400px !important;
overflow: hidden !important;
margin: 0 auto;
}

div#example-content {
height: 1500px !important;
width: 2500px !important;
}

#example-content .module.main {
width: 550px !important;
height: 300px !important;
overflow: hidden !important;
float: left;
}

div.module.mod_news {
width: 550px !important;
height: 400px !important;
}

Javascript:
Код:
jQuery(document).ready(function() {

jQuery('#example-links p').click(function(){
var index = jQuery("#example-links p").index(this);
jQuery('#example-content').animate({"marginLeft" : -index*550 + "px"});
return false;
});

});

mod_news:
Код:
<div id="example-content-container">

   <div id="example-links" centre>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <a class="allnews" href="/f5-forum">все новости</a>
   </div>

   <div style="clear: both;"></div>
  
    <div id="example-content">
      <!-- BEGIN post_row -->

<div class="module main" >
   <a name="news_{post_row.ID}"></a>

   <div class="module mod_news">
      <div class="main-head" style="text-align:{LEFT};">{post_row.TITLE}</div>
      <div class="main-content" style="padding:0;">
         <p class="author">{post_row.TIME} {BY} <strong>{post_row.POSTER}</strong></p>
         <div class="body">
            {post_row.TEXT}<br /><br />
            
            <div class="clear"></div>
            [ {L_COMMENTS}: {post_row.REPLIES} ] [ <a class="fullnews" href="{post_row.U_VIEW_COMMENTS}">читать полностью</a> ]
         </div>
      </div>
   </div>

</div>
<!-- END post_row -->
    </div>  
            
</div>  



<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.mod_news', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
Лютик
Лютик
Новичок

Сообщения : 5
Возраст : 38
Регистрация : 2015-08-21
Благодарности : 0

Без предупреждений

http://squad.forum2x2.ru/

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения