mojtaba031

آموزش css به صورت كامل و جامع

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

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

ممنون بسیار مفید و ارزنده بود

ویرایش شده در توسط elham666

Share this post


Link to post
Share on other sites

سلام.من می خواستم به تصاویرم هنگامی که موس روی اون ها میره حالت برجسته بدم.ولی نمیدونم از چه کد css باید استفاده کنم ودر کجا!با توجه به کدهای html وcss من بایستی این ویژگی رو برای تصاویر در کجا تعریف کنم؟ چون تصاویر اکثر در بلوک ها هستند و با id و کلاس بلوک ها قرار گرفته اند.چطوری بهشون اعمال کنم؟درکجا اعامل کنم و کدش چیه!؟

کد css قالب:


#wrapper {max-width:100%; background: url(../images/body-bg.png); height:auto; margin: auto;}

body {background: url(../images/body-bg.png); margin: 0; height: 100%; min-width: 100%; font-family: tahoma; font-size: 10pt;}



#header {max-width:100%; height: 200px; background: url(../images/headeredit.png); border-radius: 10px;padding-left: 5%}


.css{position: absolute; font-family: b yekan; font-size: 10pt; color: white; background-color: none}

#container {background: url(../images/body-bg.png); width: 100%; height: auto; margin: auto;}

#menu  {background: url(../images/menu11.png); width: 100%; height: 35px  ;background-repeat: repeat-y; display: block; font-family: tahoma;  margin-top: 2px; border-radius: 10px; padding-top: 0px;}


.dj-main{min-width:  100%;background: none; position: absolute; font-family: tahoma ;  font-size: 1pt; direction:rtl; border-radius:10px}



a:link{text-decoration: none; color: blue}
a:visited{text-decoration: none; color: blue}
a:hover{ text-decoration: none; color: red}



#right-sidebar{  background: white; background-repeat: repeat-y;min-width: 19.5% ;  height: auto; display: block; float: right; border-radius: 10px;  margin-top: 2px; margin-bottom: 5px; border: solid; border-color:  silver}
#right-sidebar .block{ background:  url(../images/header-sidebar5.png); width: 100%; height: 30PX;  text-align: center; border-radius: 5px;}
#right-sidebar  .block-content{min-width: 20.5%; height: auto; font-family: tahoma;  text-align: right; border-radius: 10px; margin-bottom: 2%; margin-top:  2% ;padding-right: 4%}

.block1{ background: url(../images/header-sidebar6.png); width: 100%; height: 30PX; text-align: center; border-radius: 5px;}
.block2{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 5px;}
.block3{background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}
.block4{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}


#polldiv_1{text-align: right;direction:rtl}

#content{  background-color: white; max-width: 59.1% ;height: auto; float: right;  display: block; border-radius: 10px; margin-top: 2px; margin-bottom:  10px; margin-right: 6px; margin-left:6px;}
#content  .block1{background: url(../images/titr4.png); width: 100%; height: 30px;  font-size: 11px; text-align: right;display: block; font-family: b homa;  font-size: 10pt}
.sp_news_higlighter{margin-right: 5%}


.content1{background-color:  white; width: 24.15% ; height: 255px;  display: block; float:  right;border: solid; border-color: green; margin-top: 2%; border-radius:  5px; text-align: right; font-family: b yekan;}



#content  .content-content {text-align: right; height: auto; font-size: 8pt;  padding-right: 20px; padding-left:20px; font-family: tahoma;  padding-top: 5px; text-align: right; padding-left: 2% }

#content  .content-content .block-content1{ background-color: gray; width: 49%;  height: auto; display: block; text-align: right; float: right; border:  groove; border-color:white; border-radius:10px;}
#content  .content-content .block-content2{ background-color: gray; width: 49%;  height: auto; display: block; text-align: right; float:left; border:  groove; border-color:white; border-radius:10px;}


#left-sidebar  { background: white; background-repeat: repeat-y; width: 19.6%; height:  auto; float: left; display: block; border-radius: 10px; margin-top:  2px; border: solid; border-color: silver}
#left-sidebar .block{  background:url(../images/header-left.png) ; width: 100%; height: 20px;  font-family: b homa; font-size: 15pt; text-align: center; border-radius:  5px; padding-bottom: 10px; margin-bottom: 2%}
#left-sidebar  .block-content{max-width: 100%; height: auto; font-family: b homa;  text-align: center; border-radius: 10px; border: groove; border-color:  black}

#footer {background: url(../images/footer150.png); max-width: 100%; height: 150px;}
#footer .block-content{ background-color: none; max-width: 100%; height: auto; display: block; text-align: center;}

کد html قالب:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>toluekerman</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css"/>


</head>


<body>

<div id="wrapper">





<div id="header">



</div>

<div id="container">


<div id="menu">


</div>

<div id="right-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block1"></div>

<div class="block-content"></div>
<div class="block2">کاربری</div>
<div class="block-content"></div>
<div class="block3">کاربری</div>
<div class="block-content"></div>
<div class="block4">پیوندها</div>
<div class="block-content"></div>


</div>


<div id="content">
<div class="block1">:تیترخبر</div>


<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>





<div class="content-content">

<div class="block-content1">
<div class="block-content2">

</div>
</div>

</div>



</div>



<div id="left-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>


</div>


<br style="clear: both"/>

</div>



<div id="footer">


<div class="block-content"></div>





</div>


</div>



</body>



</html>











Share this post


Link to post
Share on other sites

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

میخوام الان جاشو با یه اسلاید شو دیگه عوض کنم

چطوری باید این کار روانجام بدم

Share this post


Link to post
Share on other sites

درود و خوش آمد به جوملا فروم

اسلایدر قبلی رو غیر فعال کنید و اسلایدر جدید رو نصب و در همون موقعیت منتشر کنید

Share this post


Link to post
Share on other sites
درود و خوش آمد به جوملا فروم

اسلایدر قبلی رو غیر فعال کنید و اسلایدر جدید رو نصب و در همون موقعیت منتشر کنید

برای منتشر کردن تو قسمت اسلایدر قبلی به چه صورت باید عمل کرد ؟

Share this post


Link to post
Share on other sites

هیچی. مثل همه ماژول ها فقط موقعیت همون اسلایدر قبلی را ببینید و همون را برای اسلایدر جدید انتخاب کنید

Share this post


Link to post
Share on other sites

سلام و خسته نباشید

میشه لطف کنید در ساخت سایت زیر کمکم کنید؟

301 Moved Permanently

پایین سایتم نوار پیمایش افتاده میخوام اونو حذف کنم بلد نیستم

و همچنین روی سایت حقوقی که میرم در آخرش کادر پشتش (یا سایه اش) یکم بزرگه ، میشه کمک کنید کوچیکش کنم؟

و همچینین وقتی منوهای صفحه اصل و تماس با ما و درباره ما رو میبرم بالا دیگه وقتی با موس روش میرم آیکن ماوس به شکل دست درنمیاد و روش کلیک نمیشه و سبز هم نمیشه!

خیلی ممنون میشم

Share this post


Link to post
Share on other sites

درود

از دوستان متخصص در انجمن خواهش میکنم scss رو آموزش بدن.

سپاس.

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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