2013-01-09, 05:21 PM
Hi
Guys i started a good portal for my forums. but i have a problem and so i need your help:
as you see in this image (a part of my portal):
![[Image: 1lt4o0adutyj32trhmks.png]](https://camo.mybb.com/0cd24f37282a1f25e90142327122b6c9b2b7a458/687474703a2f2f696d61676575706c6f61642e636f2e756b2f66696c65732f316c74346f3061647574796a33327472686d6b732e706e67)
i explain what i want.
i need use this part So i need a code to cover my forums posts for showed here(that part i showed in image).
this is my index code for that( In html) :
and css code:
Thank you in advance.
Guys i started a good portal for my forums. but i have a problem and so i need your help:
as you see in this image (a part of my portal):
i explain what i want.
i need use this part So i need a code to cover my forums posts for showed here(that part i showed in image).
this is my index code for that( In html) :
<!-- New Articles Block -->
<div class="greyblock">
<div id="gal_block1">
<div class="tabblock1">
<ul>
<li class="latest act">Latest</li>
<li class="top_rated">Top Rated</li>
<li class="most_popular">Most Popular</li>
</ul>
<a href="javascript:void(0)" class="btn_left" rel="slider1"></a>
<a href="javascript:void(0)" class="btn_right" rel="slider1"></a> </div>
<div class="slidegallery" id="slidegallery1">
<div id="latest" class="slidegal_categ">
<ul class="slider1 vis" id="first">
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
</ul>
</div>
<div id="top_rated" class="slidegal_categ">
<ul class="slider1">
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
</ul>
</div>
<div id="most_popular" class="slidegal_categ">
<ul class="slider1">
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article1.jpg" alt="" />
<span>PC</span>
<h4>Need For Speed</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article2.jpg" alt="" />
<span>PS2</span>
<h4>runescape</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article3.jpg" alt="" />
<span>Mobile</span>
<h4>Stalker</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
<li>
<img src="img/pic_article4.jpg" alt="" />
<span>3DS</span>
<h4>age of empires</h4>
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros.
<a href="#" class="read">Read more</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /New Articles Block -->
and css code:
/*SlideGallery1*/
.slidegallery { height:310px; overflow:hidden; width:100%; position:relative;}
.tabblock1 { height:48px; position:relative;}
.tabblock1 .btn_right { position: absolute; top:13px; left:40px; background:url(../img/btn_arrow_right.png) no-repeat; width:25px; height:25px}
.tabblock1 .btn_left { position: absolute; top:13px; left:10px; background:url(../img/btn_arrow_left.png) no-repeat; width:25px; height:25px}
.tabblock1 ul li { width:115px; height:38px; padding-bottom:5px; background:url(../img/bg_blocktab.png) no-repeat; display:block; margin-right:2px; float:right; color:#d6d6d6; font-size:13px; text-shadow:-1px -1px #2a2a2a; line-height:38px; text-align:center; font-family:'Tahoma'; display:block; text-decoration:none; cursor:pointer}
.tabblock1 ul li.act { background:url(../img/bg_blocktab_a.png) no-repeat; color:#ffffff; text-shadow:-1px -1px #911212;}
.tabblock1 ul li:hover { background:url(../img/bg_blocktab_a.png) no-repeat; color:#ffffff; text-shadow:-1px -1px #911212;}
#top_rated { display:none}
#most_popular { display:none}
.slidegal_categ ul { display:block; position:absolute;}
.slidegal_categ ul li { width:213px; padding:10px; line-height:16px; font-size:13px; color:#181818; background:#ffffff; border-radius:4px; float:left; margin:0 2px 0 0}
#slidegallery1 .slidegal_categ ul li { width:213px;}
#slidegallery2 .slidegal_categ ul li { width:178px;}
.slidegal_categ ul li img { border-radius:5px; margin-bottom:13px}
.slidegal_categ ul li span { color:#808080; font-size:12px; line-height:14px; display:block; padding:0 0 5px 0; font-weight:bold; text-transform:uppercase}
.slidegal_categ ul li h4 { font-family:'BebasRegular'; margin:0 0 7px 0; text-transform:uppercase}
a.read { background:url(../img/btn_readmore2.png) no-repeat; width:94px; height:27px; display:block; line-height:26px!important; padding:0 0 0 11px; color:#585858; font-weight:normal; text-decoration:none; font-size:10px!important; margin:10px 0 0 2px; font-family:'Tahoma'}
a.read:hover { background:url(../img/btn_readmore2a.png) no-repeat; color:#b00000; text-decoration:none}
.greyblock { border:#dadada 1px solid; border-radius:5px; background:#e6e6e6; padding:9px; margin-bottom:15px}
.greyblock .pad { padding:0 10px}
.greyblock .cont { padding:10px; background:#ffffff; border-radius:4px; position:relative}
.greyblock .sep { background:url(../img/bg_sep1x.jpg) repeat-x; height:17px; margin-top:15px}
.pad iframe { margin-bottom:15px;}
Thank you in advance.