ایزی دیزاین

درخواست تغییرات در css

8 پست در این موضوع قرار دارد

سلام دوستان

بنده برای نمایش دسته بندی های سایتم از کد زیر استفاده کردم :



<div class="body2"> <ul id="nav"> <li><?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?></li> </ul></div>

ادرس سایت : http://313sarbaz.ir

و برای زیبا سازی ان یکی از دوستان لطف کردن و سی اس اس مربوطه رو نوشتن و دادن به ما

اما میخواستم ی سری تغییرات در سی اس اس انجام بدم که ممنون کدش رو بهم بدید :

1رنگ پس زمینه کادرش مشکی بشه

2-رنگ نوشته های دسته ها سفید بشه (که داخل کادر مشکی زیباتر دیده بشه )

3-وقتی میری روی ی دسته رنگش نوشته اش سبر بشه

ی مشکل کلی هم که داره اینه که :

4-وقتی میری روی ی دسته ، زیر دسته ها در کادری بزرگتر از حدمورد نیازشون و همین کمی هم سمت راست تر باز میشن که همین امر باعث زیر دسته های ، دسته استانها دیده نشن (لطفا خود سایت امتحان کنید ، کامل متوجه میشید ) لطفا این مورد هم درست کنید.

با تشکر

اینم کد سی اس اس:


/* ------- body2 ------- */
.body2 {width: 960px;margin: 5px auto;color: #666;text-align:right;font-family:BYekan, Tahoma;
font-size:13px;}
a {color: #333;}
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(images/gradient.png) repeat-x 0 -130px;line-height: 100%;border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: right;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding: 8px 20px;margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {background: #000;color: #fff;}
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(images/gradient.png) repeat-x 0 -40px;color: 37badc;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: none;border: none;color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff url(images/gradient.png) repeat-x 0 -100px !important; color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;background: #ddd url(images/gradient.png) repeat-x 0 0;border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {float: none;margin: 0;padding: 0;}
#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}

0

به اشتراک گذاری این پست


لینک به پست

up

0

به اشتراک گذاری این پست


لینک به پست

با سلام

1 برای رنگ پس زمینه داخل #nav بنویسید:


background-color:#000;

2 برای رنگ نوشته ها :


#nav a { color:#fff; }

3 برای تغییر رن به سبز بعد از بردن موس :


#nav li:hover > a { color:green; }

1

به اشتراک گذاری این پست


لینک به پست

متشکرم -

لطفا درباره ی مورد 4 هم راهنمایی کنید .

0

به اشتراک گذاری این پست


لینک به پست

برای گزینه چهارمم

خط 590 فایل سی اس استون کد زیر رو پیدا کنید


#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #DDD url(images/gradient.png) repeat-x 0 0;
border: solid 1px #B4B4B4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

و به کد زیر تبدیل کنید


#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
z-index: 1000;
left: 0;
background: #DDD url(images/gradient.png) repeat-x 0 0;
border: solid 1px #B4B4B4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

موفق باشید

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

ممنون

ویرایش شده در توسط navidbayat73
0

به اشتراک گذاری این پست


لینک به پست

مورد شماره 4با لطف شما اساتید حل شد اما موارد 1 و 2و و3 همچنان مشکل دارند ، بنده موفق به جاگزینی کد های داده شده برای موارد 1 2 3 نشدم

-------

0

به اشتراک گذاری این پست


لینک به پست

کد های زیر به ایدی هایی که داده شده اضاف یا جایگزین شود.


#nav .current a, #nav li:hover > a {
color:green;
}
#nav a {
color: #FFF;
}
#nav {
background: #000 url(images/gradient.png) repeat-x 0 -130px;
}

اگر کار نکرد اطلاع دهید تا بررسی شود.

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری