استفاده کردن از DIV و CLASS باهم

زمان جاریtime : شنبه 16 تیر 1403 - 6:48 بعد از ظهر

شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .

صفحه اصلیHome page / آموزش css / استفاده کردن از DIV و CLASS باهم

ارسال پاسخ جدید

تعداد بازدیدvisits : 1151

mahdip30

ارسال هاAnswers :	68
عضویتRegistration date :	24 /10 /1391
حمایت کردهThanks :	43
حمایت شدهThanked :	9

استفاده کردن از DIV و CLASS باهم

سلام دوستان گل!

من الان میخوام این دوتا لینک رو روی هم بندازم:

http://moisrex.rozblog.com/post/3408/Interesting-style-for-buttons-or-other-box-no-photo.html#moisrex_post

http://moisrex.rozblog.com/post/3409/Another-interesting-style-for-buttons-or-box-2-no-photo.html#moisrex_post

اولی رو میخوام با این مشخصات باشه:

کد:


	width:160px;
	height:340px;

و دومی بیوفته روی این استایل ولی بالاش باشه چون میخوام توش چیزی بنویسم تا مثل یک باکس بشه!

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

اومدم توی CSS یک #Div و یک .Class تعیین کردم بعد توی فایلم اومدم اینجوری کردم:

کد:


<div id="did" class="class">
</div>

کار نداد!

حالا چطوری! ممنون میشم کمک کنید!

[quote] مخور غم گذشته ، گذشته ها گذشته ، هرگز ، ز غصه خوردن گذشته بر نگشته... :D [/quote]

پنجشنبه 03 مهر 1393 - 18:25

وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

amir_sktn

ارسال‌هاAsnwers :	33
عضویتRegistration date :	29 /5 /1392
حمایت کردهthanks :	15
حمایت شدهThanked :	12

پاسخAnswer 1 : استفاده کردن از DIV و CLASS باهم

عزیزم خوبه خودت میگی #Div بعد اومدی تو کد ای دی did دادی!

پنجشنبه 03 مهر 1393 - 18:48

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

mahdip30

ارسال‌هاAsnwers :	68
عضویتRegistration date :	24 /10 /1391
حمایت کردهthanks :	43
حمایت شدهThanked :	9

پاسخAnswer 2 : استفاده کردن از DIV و CLASS باهم

نقل قول از amir_sktn
عزیزم خوبه خودت میگی #Div بعد اومدی تو کد ای دی did دادی!

نه اون که اسم Div هست!

حالا من موندم چیکار کنم!

[quote] مخور غم گذشته ، گذشته ها گذشته ، هرگز ، ز غصه خوردن گذشته بر نگشته... :D [/quote]

پنجشنبه 03 مهر 1393 - 18:53

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

hossein16

ارسال‌هاAsnwers :	334
عضویتRegistration date :	17 /4 /1392
حمایت کردهthanks :	65
حمایت شدهThanked :	105

پاسخAnswer 3 : استفاده کردن از DIV و CLASS باهم

من که اصلا متوجه منظورت نشدم

تعرفه تبلیغات در پرتک

الکسای 7 هزار

پنجشنبه 03 مهر 1393 - 23:55

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

mahdip30

ارسال‌هاAsnwers :	68
عضویتRegistration date :	24 /10 /1391
حمایت کردهthanks :	43
حمایت شدهThanked :	9

پاسخAnswer 4 : استفاده کردن از DIV و CLASS باهم

نقل قول از hossein16
من که اصلا متوجه منظورت نشدم

منظورم اینه که بخوام مثلا مثل این عکسی که گذاشتین برای خودتون!

یک استایل طراحی کنم که بک گراندش آبی باشه بعد یک کادر کوچیک (مثل اون Hossein بالایی) بزنم روی استایل!

بد توضیح میدم ولی یکم فکر کنین میرسین به چیزی که من میخوام!

[quote] مخور غم گذشته ، گذشته ها گذشته ، هرگز ، ز غصه خوردن گذشته بر نگشته... :D [/quote]

جمعه 04 مهر 1393 - 11:17

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

mahdip30

ارسال‌هاAsnwers :	68
عضویتRegistration date :	24 /10 /1391
حمایت کردهthanks :	43
حمایت شدهThanked :	9

پاسخAnswer 5 :

آقا یکی اینو برام درستش کنه!

میخوام کادر کوچیکه بیاد دقیقا بالای باکس!

کد:


<style>
#left_menu_Sky_chat {
	width:160px;
	height:340px;
    	color:#fff;
	background:#4cf;
	background:-o-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:linear-gradient(to bottom, #4cf 0%, #2ae 100%);
	text-shadow:#29a3cc 0 1px 3px;
	-moz-text-shadow:#29a3cc 0 1px 3px;
	-o-text-shadow:#29a3cc 0 1px 3px;
	-webkit-text-shadow: #29a3cc 0 1px 3px;
	-khtml-text-shadow: #29a3cc 0 1px 3px;
	-webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-khtml-border-radius:5px;
	border:1px #ccc solid;
	margin:3px;
	font:12px tahoma;
	direction:rtl;
	float:left;
	padding-right:10px;
	padding-top:50px;
	padding-bottom:10px;
	padding-left:40px
}
.left_menu_Sky {
	width:200px;
	height:30px;
	color:#fff;
	background:#4cf;
	background:-o-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%);
	background:linear-gradient(to bottom, #4cf 0%, #2ae 100%);
	text-shadow:#29a3cc 0 1px 3px;
	-moz-text-shadow:#29a3cc 0 1px 3px;
	-o-text-shadow:#29a3cc 0 1px 3px;
	-webkit-text-shadow: #29a3cc 0 1px 3px;
	-khtml-text-shadow: #29a3cc 0 1px 3px;
	-webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	-khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
	border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-khtml-border-radius:5px;
	border:1px #ccc solid;
	margin:0px 0px 0px 0px;
	font:12px tahoma;
	direction:rtl;
	float:left;
	text-align:center
}
</style>
<div id="left_menu_Sky_chat">
<span class="left_menu_Sky">عنوان</span>
</div>
</div>

[quote] مخور غم گذشته ، گذشته ها گذشته ، هرگز ، ز غصه خوردن گذشته بر نگشته... :D [/quote]

جمعه 04 مهر 1393 - 11:29

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

hossein16

ارسال‌هاAsnwers :	334
عضویتRegistration date :	17 /4 /1392
حمایت کردهthanks :	65
حمایت شدهThanked :	105

پاسخAnswer 6 : 1

نقل قول از mahdip30
آقا یکی اینو برام درستش کنه!
میخوام کادر کوچیکه بیاد دقیقا بالای باکس!
کد:
#left_menu_Sky_chat { width:160px; height:340px; color:#fff; background:#4cf; background:-o-linear-gradient(top, #4cf 0%, #2ae 100%); background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%); background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%); background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%); background:linear-gradient(to bottom, #4cf 0%, #2ae 100%); text-shadow:#29a3cc 0 1px 3px; -moz-text-shadow:#29a3cc 0 1px 3px; -o-text-shadow:#29a3cc 0 1px 3px; -webkit-text-shadow: #29a3cc 0 1px 3px; -khtml-text-shadow: #29a3cc 0 1px 3px; -webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; border:1px #ccc solid; margin:3px; font:12px tahoma; direction:rtl; float:left; padding-right:10px; padding-top:50px; padding-bottom:10px; padding-left:40px } .left_menu_Sky { width:200px; height:30px; color:#fff; background:#4cf; background:-o-linear-gradient(top, #4cf 0%, #2ae 100%); background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%); background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%); background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%); background:linear-gradient(to bottom, #4cf 0%, #2ae 100%); text-shadow:#29a3cc 0 1px 3px; -moz-text-shadow:#29a3cc 0 1px 3px; -o-text-shadow:#29a3cc 0 1px 3px; -webkit-text-shadow: #29a3cc 0 1px 3px; -khtml-text-shadow: #29a3cc 0 1px 3px; -webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; -khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; border:1px #ccc solid; margin:0px 0px 0px 0px; font:12px tahoma; direction:rtl; float:left; text-align:center } عنوان

یه دایو دیگه طراحی کن بعد با استفاده از خاصیت margin یا padding جاشو مشخص کن

اگه میخوای وسط باشه اینو بذار تو استایلش :

margin:0 auto;

margin-top:1px;

امیدوارم جوابتون همین باشه

تعرفه تبلیغات در پرتک

الکسای 7 هزار

جمعه 04 مهر 1393 - 15:30

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

hossein16

ارسال‌هاAsnwers :	334
عضویتRegistration date :	17 /4 /1392
حمایت کردهthanks :	65
حمایت شدهThanked :	105

پاسخAnswer 7 : استفاده کردن از DIV و CLASS باهم

راستی یادم رفت بگم :

بعدشم بجای span بنویس div

تعرفه تبلیغات در پرتک

الکسای 7 هزار

جمعه 04 مهر 1393 - 15:31

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

oisrex

ارسال‌هاAsnwers :	747
عضویتRegistration date :	4 /8 /1393
حمایت کردهthanks :	231
حمایت شدهThanked :	886

پاسخAnswer 8 : استفاده کردن از DIV و CLASS باهم

بفرمایید (تو margin یه تغییراتی دادم):

کد:

<style>
#left_menu_Sky_chat {
width:160px;
height:340px;
color:#fff;
background:#4cf;
background:-o-linear-gradient(top, #4cf 0%, #2ae 100%);
background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%);
background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%);
background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%);
background:linear-gradient(to bottom, #4cf 0%, #2ae 100%);
text-shadow:#29a3cc 0 1px 3px;
-moz-text-shadow:#29a3cc 0 1px 3px;
-o-text-shadow:#29a3cc 0 1px 3px;
-webkit-text-shadow: #29a3cc 0 1px 3px;
-khtml-text-shadow: #29a3cc 0 1px 3px;
-webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
border:1px #ccc solid;
margin:3px;
font:12px tahoma;
direction:rtl;
float:left;
padding-right:10px;
padding-top:50px;
padding-bottom:10px;
padding-left:40px
}
.left_menu_Sky {
width:200px;
height:30px;
color:#fff;
background:#4cf;
background:-o-linear-gradient(#2ae);
background:-webkit-linear-gradient(#2ae);
background:-ms-linear-gradient(#2ae);
background:-moz-linear-gradient(to bottom, #4cf, #2ae);
background:linear-gradient(#2ae);
text-shadow:#29a3cc 0 1px 3px;
-moz-text-shadow:#29a3cc 0 1px 3px;
-o-text-shadow:#29a3cc 0 1px 3px;
-webkit-text-shadow: #29a3cc 0 1px 3px;
-khtml-text-shadow: #29a3cc 0 1px 3px;
-webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
-khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
border:1px #ccc solid;
margin:-50px 0px 0px -35px;
font:12px tahoma;
direction:rtl;
float:left;
text-align:center
}
</style>
<div id="left_menu_Sky_chat">
<span class="left_menu_Sky">عنوان</span>
</div>

</div>

یکشنبه 09 آذر 1393 - 14:26

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

smaeal

ارسال‌هاAsnwers :	10648
عضویتRegistration date :	18 /11 /1392
حمایت کردهthanks :	18906
حمایت شدهThanked :	5424

پاسخAnswer 9 : استفاده کردن از DIV و CLASS باهم

داداش اویسرکس خیلی جالبی....تاپیک هایی بالا میاری که زمانشون گذشته....:دی

===================================================

☼برای تشکر از دکمه « سپاسگزارم » استفاده نمایید☼

یکشنبه 09 آذر 1393 - 14:29

وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport

حمایت شده:

سپاس هاThanks (1) : oisrex -

برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.

moisrex

درباره ماAbout us	لینک های ماOur links	کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex. ایمیلE-mail : Moisrex @ Gmail.com	کدستانMoisrex اینتکIntec تک پیکTak-Pic فتوشاپPhotoshop	کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد

انجمن کدستان Moisrex

آموزش های کدنویسیLearn codes

حل مشکلات کدنویسیWe solve them

گرافیکGraphic

انجمن کدستانMoisrex

آموزش های کدنویسیLearn codes

حل مشکلات کدنویسیWe solve them

گرافیکGraphic

انجمن کدستان Moisrex