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

Добрый день!
Ищу решения проблемы сразу с 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;
}

Вопрос по прежнему актуален.

Приветствую. Попытаюсь разобраться с первой Вашей проблемой.
Вообще это довольно странно. В Вашем коде прописан цвет рамки спойлера:

Код:

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, спасибо! Со спойлерами разобрался. Окончательная победа и исполнение всех мечтаний. С положением кнопок и отображением новостного блока - пока вопрос так же актуален.

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

Код:

/* оформление цитаты, кода, спойлера */
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;
}

При закрытом спойлере:

При раскрытом спойлере:

В очередной раз прошу помощи с подобным блоком новостей. Блок нравится, хотелось бы такой оставить, но не могу настроить расположение тем:
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 -->