چگونه بین مطالب LINE ایجاد کنم؟

سلام . من از قالب dg_black استفاده می کنم. من میخواستم بین مطالبی که توی سایتم قرار میدم یک خط یا Line ایجاد کنم ؟
اینم کدش :

/* CSS Document */

html {
height: 100%;
}

body {
direction:rtl;
height: 100%;
margin: 0px 0px 0px 0px;
background-color:#4C4C4C;
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}

#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-left: 2px;
float: right;

}

#buttons_inner {
border: 1px solid #cccccc;
height: 21px;
}

#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-right: 4px;
border: 1px solid #FF6600;
margin-bottom: 2px;
}

#pathway_text img {
margin-right: 5px;
margin-left: 5px;
margin-top: 6px;
}

#buttons {
float: right;
margin: 0px;
padding: 0px;
width: auto;
}


ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
padding-right: 9px;
padding-left: 0px;
float: right;
font-size: 11px;
line-height: 32px;
white-space: nowrap;
background-image:url(../images/spacer.png);
background-repeat:no-repeat;
background-position:left top;
height:32px;
color:#666666;
}

ul#mainlevel-nav li a
{
display: block;
padding-right: 15px;
padding-left: 15px;
text-decoration: none;
color:#666666;
background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color:#990000;
}


#search_outer {
float: center;
width: 95px;
}
div.search{
float:left;
width:140px;
}
#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 18px !important;
height: 18px;
overflow: hidden;
}

#search_inner form {
padding: 0;
margin: 0;
}

#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: tahoma;
font-size: 11px;
color: #FF6600;
}

#header_outer {
text-align: right;
border: 0px;
margin: 0px;
}

#header {
float: right;
padding: 0px;
margin-left: 2px;
width: 635px;
height: 150px;
}

#top_outer{
float: right;
width: 165px;
}

#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: right;
}

#right_outer {
float: right;
margin-top: 2px;
width: 165px;
}

#right_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: right;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-right: 2px;
/** border: 1px solid #cccccc; **/
float: right;
width: 635px;
}

#content_inner{
float: none !important;
float: right;
padding: 0;
padding-top: 2px;
margin: 0;
}

table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}

table.content_table td {
padding: 0px;
margin: 0px;
}


#banner_inner {
float: right;
padding: 0px;
height: 70px;
}

#poweredby_inner {
float: left;
padding: 0px;
margin-right: 0px;
height: 70px;
}

#left_outer {
margin-right: 2px;
width: 165px;
}

#left_inner {
float: none !important;
float: right;
border: 1px solid #cccccc;
padding: 2px;
}


.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: right;
margin: 0px;
padding: 2px;
}

.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: right;
margin: 0px;
padding: 2px;
}

table td.body_outer {
padding: 2px;
border: 1px solid #cccccc;
}

.maintitle {
color: #ffffff;
font-size: 40px;
padding-right: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

div.back_button {
float: right;
text-align: center;
font-size: 11px;
font-weight: normal;
width: auto;
background: url(../images/bac_btn.png) repeat-x;
line-height: 20px;
margin: 1px;
color:#006600;
width:99px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px double #cccccc;
width: auto;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
color:#CCCCCC;
padding-right: 7px;
text-indent: 5px;
}

.pagenavbar {
margin-left: 10px;
margin-right: 8px;
float: left;
}

#footer {
text-align: center;
padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-right: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: right;
}


td {
text-align: right;
font-size: 11px;
}



body {
direction:rtl;
padding: 0px;
font-family: tahoma;
line-height: 120%;
font-size: 11px;
color:#CCCCCC;
}

/* Joomla core stuff */
a:link, a:visited {
color:#999999;
text-decoration: none;
font-weight: bold;
}

a:hover {
color:#666666;
text-decoration: none;
font-weight: bold;
}

table.contentpaneopen {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
padding-left: 5px;
padding-right: 9px;

}

table.contentpaneopen td.componentheading {
padding-right: 4px;

}



table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpane td {
margin: 0px;
padding: 0px;
}

table.contentpane td.componentheading {
padding-right: 4px;
}

table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}

.button {
color:#333333;
font-family: Tahoma;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
background-position:bottom;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}
label {
color:#999999;
}
.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
font-family:tahoma;
}
.inputbox2 {
border:solid 0px #cccccc;
background-color: #ffffff;
}

.componentheading {
color: #FFFFFF;
text-align: right;
padding-top: 5px;
padding-right:5px;
height: 28px;
font-size: 18px;
font-family:tahoma;
}

.contentcolumn {
padding-left: 10px;
}

.contentheading {
color: #FFFFFF;
text-align: right;
padding-top: 5px;
padding-right:5px;
height: 28px;
font-size: 18px;
font-family:tahoma;
}



.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:right;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

div.moduletable {
margin-bottom: 0px;
padding-bottom:4px;
color:#FFFFFF;
}

div.module {
margin-bottom: 0px;
padding-bottom:5px;
padding-right:7px;
color:#FFFFFF;
}
table.moduletable th, div.moduletable h3 {
background: url(../images/top_mod.png) no-repeat;
background-position:bottom right;
color: #FFFFFF;
text-align: right;
padding-right: 15px;
height: 20px;
line-height: 20px;
font-weight: bold;
font-size: 12px;
font-family:tahoma;
margin-top:0px;
margin-bottom:0px;
padding-bottom:5px;
}
table.moduletable td {
font-size: 11px;
margin: 0px;
font-weight: normal;
}

table.pollstableborder {
color:#000066;
padding: 2px;
width:96%;
}
moduletable-Banners {
text-align:center;
}
.sectiontableheader {
font-weight: bold;
background-color:#000000;
padding: 4px;
height:20px;
}
a.category {
font-weight: bold;
color:#ffffff;
}
a.category:hover {
font-weight: bold;
color:#ffffff;
}
a.category:visited {
font-weight: bold;
color:#ffffff;
}
img.image{
border: 1px solid #666666;
width:64px;
height:64px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
background-color:#242424;
}

.sectiontableentry2 {
background-color:#666666;
}

.small {
color:#999999;
font-size: 9px;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}

table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-right: 2px;
margin-bottom: 2px;
}

table.contenttoc td {
padding: 2px;
}

table.contenttoc th {
color: #FF6600;
text-align: right;
padding-top: 2px;
padding-right: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align:middle;
font-size: 11px;
font-weight: bold;
color:#FFFFFF;
text-align:right;
padding-top: 2px;
padding-right: 15px;
height: 20px !important;
height: 20px;
width: 92% !important;
width: 100%;
text-decoration: none;
background-color:#242424;
border-bottom: 1px dotted #666666;
}

a.mainlevel:hover {
text-decoration: none;
color:#FF6600;
background-color:#121212;
border-bottom: 1px solid #666666;
}

a.mainlevel#active_menu {
color:#FFFF00;
font-weight: bold;
font-size:13px;
}

a.mainlevel#active_menu:hover {
color:#FF9900;
}

a.sublevel:link, a.sublevel:visited {
padding-right: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #FF6600;
text-align: right;
}

a.sublevel:hover {
color: #FF6600;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
width:98%;
}

div.mosimage {
border: 1px solid #cccccc;
}
div.message {
color:#FF0000;
font-weight:bold;
font-size:12px;
text-align:center;
padding-top:20px;
}
.mosimage {
border: 1px solid #cccccc;
margin: 5px
}

.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}

span.article_seperator {
display: block;
height: 1.5em;
}
td.dot {
height:5px;
}
table.top_menu{
padding-top:4px;
}
td.tab{
height:10px;
}
a.mostread, a.mostread:visited {
color:#666666;
font-weight:normal;
}
a.mostread:hover {
color:#333333;
font-weight:normal;
}
a.latestnews, a.latestnews:visited {
color:#9A927D;
font-weight:normal;
}
a.latestnews:hover {
color:#FF6600;
font-weight:normal;
}
li.latestnews-user{
padding-right:20px !important;
padding-right:10px;
}
a.mostread, a.mostread:visited {
color:#9A927D;
font-weight:normal;
}
a.mostread:hover {
color:#FF6600;
font-weight:normal;
}
li.latestnews-user{
padding-right:20px !important;
padding-right:10px;
}
td.site_name {
font-size:44px;
padding-top:16px;
padding-bottom:10px;
font-weight:bold;
color:#FF6600;
}
td.site_desc {
font-size:15px;
font-weight:bold;
color:#FF6600;
}
table.box_table{
background-color:#F7F7F7;
}
a.readon, a.readon:visited {
display:block;
width:120px;
color:#333333;
background-image:url(../images/readon.png);
background-repeat:no-repeat;
background-position:left;
float:left;
padding-top:3px;
height:30px;
text-align:center;
}
th.pagenav_next {
display:block;
color:#FFFFFF;
height:21px;
font-size:11px;
width:50px;
padding-top:7px;
text-align:center;
}
th.pagenav_prev {
display:block;
color:#FFFFFF;
height:21px;
font-size:11px;
width:50px;
padding-top:7px;
}
td.ver {
text-align: center;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
height:30px;
}
td.footer{
background-color:#333333;
color:#FFFFFF;
}
div.blog_more{
padding-right: 8px;
}
div.main{
vertical-align:top;
}
ul.latestnews-nav{
text-indent:5px;
}
h3{
color:#CCCCCC;
font-size:13px;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
td.right{
background-image:url(../images/right.png);
background-repeat:no-repeat;
background-position:left top;
}
td.left{
background-image:url(../images/left.png);
background-repeat:no-repeat;
background-position:right top;
}

سلام

برای این کار شما میتونید از چندین روش استفاده کنید . به عنوان مثال شما میتونید دور تیترهای خودتون یه کادر قرار بدین تا مطالب به این ترتیب از هم جدا بشن یا اینکه بالای هر تیتر یه border قرار بدین که مطالب از هم جدا بشن . کلاسی که روی تیتر مطالب تاثیر میذاره contentheading هست که تغییرات رو در این کلاس باید اعمال کنید .

به عنوان مثال ما میخواییم تیتر ما یه background داشته باشه و به این ترتیب کاری کنیم که مطالب از هم جدا بشن :

کد:

---

.contentheading {
        font-size    : 10px;
        color      : #666666;
        text-align    : right;
        padding-top:2px;
        text-transform:uppercase;
        background: url(../images/bgth0000.png) repeat-x;
        background-position:right;
        line-height:20px !important;
        text-indent:20px;

}

---

یه مثال دیگه :

کد:

کد:

---

.contentheading {
        font-size    : 9px;
        color      : #666666;
        text-align    : right;
        text-transform:uppercase;
        background: url(../images/bgth0000.png) repeat-x;
        line-height:25px !important;
        text-indent:20px;
        font-weight:normal;
        margin: 0px 0px 0px 0px;
}

---

این تنها یه مثال بود . شما با سلیقه خودتون میتونید تغییراتی لازم رو اعمال کنید .



منبع : .. همین انجمن ! [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

پس : [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

مرسی دوست عزیز ;)

ممنونم آبتین جان . یک دانیا ممنون

يه توضيح كوچيك هم من بدم :

بعد از هر مطلب يه Span با اين مشخصات درست ميشه :‌

نقل قول:

---

<span class="article_seperator"> & lt;/span>

---

شما ميتونيد كلاس article_seperator رو هرجور كه بخواهيد تعريف كنيد و بين مطالبتون لاين يا هر چيز ديگه كه بخواهيد ! بزاريد....