کمک در ایجاد کد آخرین مطالب به همراه css آن

korosh73 · 21 ژوئن 2012

سلام دوستان .

میخواستم که توی سایتم ، که توی عکس زیر مشخص کردم ، این قست رو به آخرین مطالب سایت اختصاص بدم. ولی نه اینکه یه <Ul> و </ul> بهش اضافه کنم و کد آخرین مطالب رو بهش اضافه کنم .

الان توی عکس بالا همونطوری هست که گفتم با اون تگ ها .

حالا میخوام یه جور زیبا تر باشه با استایلی چیزی . ممنون میشم کمک کنین که این درست بشه .

کد div اون قسمت که مشخص کردم هم اینه :

PHP:

<div class="best-posts">
             <ul>
        <?php get_archives('postbypost', 5); ?>
      </ul>

            </div>

استایل هم اینه ( CSS ):

PHP:

body
{
	background-color:#ffffff;
	background-image:url(images/back.jpg);
	background-repeat:repeat-x;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	direction:rtl;
}
body a
{
	text-decoration:none;
}
body a img
{
	border:0px solid #FFF;
}
#main
{
	margin-right:auto;
	margin-left:auto;
	width:1007px;
	margin-top:-8px;
}
#header
{
	background-image:url(images/header.jpg);
	width:1007px;
	height:141px;
}
#menu
{
	height:50px;
}

#menu
{
	margin-left:auto;
	margin-right:auto;
	color:#7b7b7b;
	text-shadow:1px 1px 0px rgba(256,256,256,0.8);
	height:50px;
}
#menu ul
{
	padding-top:5px;
}
#menu ul li
{
	margin-right:15px;
	float:right;
	list-style:none;
}
#menu ul li a
{
	color:#7b7b7b;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#menu ul li a:hover
{
	color:#0092b6;
}
#menu ul li.line
{
	background:url(images/menu-split.png);
	width:2px;
	height:48px;
	margin-top:-15px;
}
#search
{
	margin-top:-23px;
	float:left;
}
.search-text
{
	padding:10px;
	width:180px;
	height:15px;
	background-color:#f5f5f5;
	border:1px solid #dadada;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#737373;
}
.search-text:hover
{
	background-color:#e8e8e8;
}
.search-bot
{
	width:32px;
	height:26px;
	background-image:url(images/search.png);
}

#sokhan-rooz
{
	width:970px;
	height:22px;
	padding:10px;
	background-color:#fff7e0;
	border:solid 1px #ffccad;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	margin-left:auto;
	margin-right:auto;
}
.sokhan-rooz-text
{
	background-image:url(images/sokhan-rooz.png);
	background-position:right;
	background-repeat:no-repeat;
	width:970px;
	height:22px;
	margin-top:-10px;
	padding-right:30px;
	list-style:none;
	color:#ff8400;
}
.sokhan-rooz-text ul li
{
	list-style:none;
	margin-right:-40px;
	padding-top:2px;
}
.sokhan-rooz-text ul li a
{
	color:#ff8400;
	list-style:none;
}

#contain
{
	width:980px;
	height:32px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffff;
	box-shadow:inset 0 0 10px #cacaca;
	-moz-box-shadow:inset 0 0 10px #cacaca;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	margin-top:10px;
	height:auto;
	padding-top:10px;
	padding-right:10px;
	margin-bottom:10px;
}
.menus-right
{
	width:205px;
	float:right;
}
.menus-left
{
	width:775px;
	float:left;
}
/*--------------------------- Menu Right ----------------------------*/
.menu-right
{
	width:200px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	background-color:#f9f9f9;
	border:solid 1px #e8e8e8;
	margin-bottom:10px;
	padding-top:5px;
	color:#4a4a4a;
}
.menu-right a
{
	color:#4a4a4a;
}
.menu-right-main
{
	width:200px;
}
.menu-right-main ul li
{
	list-style-image:url(images/or-bul.png);
	list-style-position:outside;
	line-height:20px;
	margin-right:-8px;
}
.stat-head
{
	background-image:url(images/stat.png);
	width:193px;
	height:37px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
}
.category-head
{
	background-image:url(images/category.png);
	width:193px;
	height:37px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
}
.ads-head
{
	background-image:url(images/ads.png);
	width:193px;
	height:37px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
}
.archive-head
{
	background-image:url(images/archive.png);
	width:193px;
	height:37px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
}

/*--------------------------- Menu Left ----------------------------*/

.post
{
	width:380px;
	float:right;
	margin-left:3px;
	margin-right:3px;
	margin-bottom:10px;
}
.post-main
{
	background-image:url(images/block-main.png);
	width:380px;
	height:250px;
	color:#4a4a4a;
}
.post-rss
{
	float:left;
	margin-left:10px;
	margin-top:8px;
}
.post-main a
{
	color:#4a4a4a;
}
.post-main ul li
{
	list-style-image:url(images/bl-bul.png);
	list-style-position:outside;
	margin:-11px;
	line-height:32px;
}
.post-down
{
	background-image:url(images/block-down.png);
	width:380px;
	height:15px;
}
.farhang-head
{
	background-image:url(images/farhang-head.png);
	width:380px;
	height:52px;
}
.gallery-head
{
	background-image:url(images/gallery-head.png);
	width:380px;
	height:52px;
}
.game-head
{
	background-image:url(images/game-head.png);
	width:380px;
	height:52px;
}
.jok-head
{
	background-image:url(images/jok-head.png);
	width:380px;
	height:52px;
}
.mob-head
{
	background-image:url(images/mob-head.png);
	width:380px;
	height:52px;
}
.tech-head
{
	background-image:url(images/tech-head.png);
	width:380px;
	height:52px;
}
.footer
{
	background-image:url(images/footer.png);
	height:88px;
	width:auto;
	margin-left:-8px;
	margin-right:-8px;
	margin-bottom:-8px;
	position:relative;
	padding-top:10px;
}
.footer a
{
	color:#ffffff;
}
.best-posts
{
	width:580px;
	height:280px;
	float:right;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	background-color:#f9f9f9;
	border:solid 1px #e8e8e8;
	margin-bottom:10px;
	padding-top:5px;
	color:#4a4a4a;
}
.buttons
{
	width:178px;
	height:280px;
	float:right;
	margin-bottom:10px;
	padding-top:10px;
	color:#4a4a4a;
	padding-right:7px;
}
.post-pic
{

	margin-right:-15px;
	padding:5px;
	border:1px solid #d9d9d9;
	background-color:#FFF;
	width:325px;
	height:88px;
}
.img
{
	padding-right:35px;
}
.new-article
{
	padding:10px;
	line-height:18px;
}
.new-article a
{
	color:#369;
	font-weight:bold;
}
.post-big
{
	background-color:#ffffff;
	border:#ebebeb solid 1px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	width:750px;
	float:right;
	padding:10px;
	line-height:20px;
	margin-bottom:10px;
}
.post-big-title
{
	border-bottom:#ebebeb solid 1px;
	padding-right:20px;
	padding-bottom:10px;
	background-image:url(images/or-bul.png);
	background-repeat:no-repeat;
	background-position:right;
	padding-top:5px;
	color:#484848;
	margin-bottom:20px;
}
.post-big-main
{
	height:auto;
}
.post-big-main p , a
{
	color:#535353;
}
.post-big-main img
{
	padding:5px;
	background-color:#dedede;
	border: solid 1px #c7c7c7;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.post-big-main img:hover
{
	padding:5px;
	background-color:#fffddd;
	border: solid 1px #d1cea0;
}
.comment-forms
{
	background-color:#f4f4f4;
	border: 1px solid #aaaaaa;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	-webkit-border-radius:10px;
	padding:5px;
	margin-left:5px;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.comment-forms:hover
{
	background-color:#e6e6e6;
}
.comment-comment
{
	background-color:#f4f4f4;
	border: 1px solid #aaaaaa;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	padding:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	cursor:pointer;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.comment-comment:hover
{
	background-color:#e6e6e6;
}
.comment-submit
{
	background-color:#f4f4f4;
	border: 1px solid #aaaaaa;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	padding:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	cursor:pointer;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.comment-submit:hover
{
	background-color:#e6e6e6;
}
#comment-box a
{
	color:#5d5d5d;
}
.comment-body
{
	text-align : right;
	float : right;
	width : 545px;
	padding : 10px;
	margin-bottom : 10px;
	background-color :  #eee;
	box-shadow : 0px 0px 8px #9c9c9c ;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.comment li
{
	list-style:none;
}
.comment ul
{
	list-style:none;
}
.comment-reply-link li
{
	list-style:none;
}
#comment-box li
{
	list-style:none;
}

امکانش هست مثل این بشه ؟ :

مرسی .

korosh73 · 21 ژوئن 2012

کسی نیست کمک کنه ؟

ariyadownload · 21 ژوئن 2012

آره، امکانش هست
خیلی ساده هست
باید اول نگاه کنید اون کد php که نوشتید در حالت نمایش سایت چه چیزی رو تولید می کنه؟ (منظورم کدهای html هست)
که به راحتی می تونید این مورد رو متوجه بشید.
بعد از اینکه متوجه شدید، حالا در قسمت css آدرس دهی ها رو به این صورت تعیین کنید (فرض ما بر این است که کد php شما تگ li و a تولید می کنه)
برای کنترل css به این صورت افدام کنید:

کد:

div.best-posts ul li{
 style mad nazar shoma
}
div.best-posts li a{
	 style mad nazar shoma
}

الان برای اون موراد هرچی تعریف کنید استایل اون مورد رو تغییر می ده

korosh73 · 21 ژوئن 2012

به نقل از ariyadownload :
آره، امکانش هست
خیلی ساده هست
باید اول نگاه کنید اون کد php که نوشتید در حالت نمایش سایت چه چیزی رو تولید می کنه؟ (منظورم کدهای html هست)
که به راحتی می تونید این مورد رو متوجه بشید.
بعد از اینکه متوجه شدید، حالا در قسمت css آدرس دهی ها رو به این صورت تعیین کنید (فرض ما بر این است که کد php شما تگ li و a تولید می کنه)
برای کنترل css به این صورت افدام کنید:

کد:

div.best-posts ul li{ style mad nazar shoma } div.best-posts li a{ style mad nazar shoma }

الان برای اون موراد هرچی تعریف کنید استایل اون مورد رو تغییر می ده

ممنونم. میشه کدی رو بهم بدین ( همراه با css ) که دیگه نیازی به ویرایش من نباشه ؟ چون خیلی گیرم تو مسئله از صبح روش کار میکنم ولی هیچ .

مشه مثل این عکسه در بیاد ؟
مشاهده پیوست 162340

ariyadownload · 21 ژوئن 2012

بفرمایید:

کد:

div.best-posts ul li{
	color: #3e3e3e;
	padding:2px 0;
}
div.best-posts li a:hover{
	color: #78a9b0;
}

فقط اون عکس کنار لینک ها رو قرار ندادم، چون اون عکس رو نداشتم

کمک در ایجاد کد آخرین مطالب به همراه css آن

korosh73

Registered User

korosh73

Registered User

ariyadownload

Registered User

korosh73

Registered User

ariyadownload

Registered User

بک‌لینک