پرسش و پاسخ آموزش CSS و HTML

[Mahdi Askari]

******:alpha(opacity=number);

خب این علامت***** چی بوده؟:نیش:
برای اکسپلورر فقط محدوده نامبر بین 0 تا 100 هست؟

خب مشخصه دیگه اونی که ***** شده ***** هستش که ***** شده:50:
آخه تو انجمن کلمه ***** ***** میشه:50:
من اینا رو درست مینویسم ولی مطمئنن شما بخونی همشو * میبینی:50:
حالا اشکاتون رو پاک کنید :نیش:
اینه = fil.ter

محدوده این ***** هم همون اعدادی هست که گفتید:50:

 

[سایه]

حالا اشکاتون رو پاک کنید:نیش:
اینه = fil.ter

:گریه::نیش:

کد transform به شکل متحرک مثل نمونه ای که کنار اصلاعات هر کاربر در کنار پست هاش وجود داره عمل نمیکنه؟:کسل:

​

 

[Mahdi Askari]

حالا اشکاتون رو پاک کنید :نیش:
اینه = fil.ter



:گریه::نیش:

کد transform به شکل متحرک مثل نمونه ای که کنار اصلاعات هر کاربر در کنار پست هاش وجود داره عمل نمیکنه؟:کسل:

​

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

 

[سایه]

با

کد

transform​

فقط تونستم کل کلاس رو تغییر بدم​

.:کسل:
چطور فقط یک عکس آپلود شده رو که در یک کلاس قرار داره با این کد تغییر حالت بدم؟

مثلا این کد ها رو در قسمت تعریف کلاس بنویسم یا تگ body ؟

<img src="http://www.up.iranjoman.com/images/ijnj8dg4yp7c4pfcvag.jpg">

img:hover {  -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg); 
 -o-transform: rotate(45deg);
 transform: rotate(45deg); }

​

 

[Mahdi Askari]

با

کد

transform​

فقط تونستم کل کلاس رو تغییر بدم​

.:کسل:
چطور فقط یک عکس آپلود شده رو که در یک کلاس قرار داره با این کد تغییر حالت بدم؟

مثلا این کد ها رو در قسمت تعریف کلاس بنویسم یا تگ body ؟

<img src="http://www.up.iranjoman.com/images/ijnj8dg4yp7c4pfcvag.jpg">

img:hover {  -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg); 
 -o-transform: rotate(45deg);
 transform: rotate(45deg); }

​

قبلا هم توضیح داده بودم که میشه لینک های یک کلاس به خصوص رو عوض کنیم
این برای همه تگ های اون کلاس میشه انجام بشه
مثلا شما میخواید کلاس پلنگ فقط عکساش این خواص رو داشته باشه

.palang img{
.
.
.
}

 

[سایه]

آقا مهدی تو قالب هایی که دیدم از تگ <script> برای قسمت آرشیو نظرت استفاده شده بود.
اینو که توضیح ندادید!!!

[MENTION=4792]palang[/MENTION]

 

[Mahdi Askari]

آقا مهدی تو قالب هایی که دیدم از تگ <script> برای قسمت آرشیو نظرت استفاده شده بود.
اینو که توضیح ندادید!!!

@palang

سایه خانم اون رو باید کپی کنید
این تگ برای نوشتن کد های جاوا اسکریپت در صفحات اچ تی ام ال هست
برای به کار بردن جاوا در صفحات به این صورت تگ میذاریم و یا میتونیم اینجوری از خارج فراخوانی کنیم

<script type="text/javascript" src="http://www.iranjoman.com/clientscript/vbulletin-core.js?v=4110"></script>

 

[سایه]

این که مثلا ی قالب مختص ی سیستم وبلاگ دهی هست، چطور انجام میشه؟
مثلا کدهای قالب برای سرویس بلاگفا چه فرقی با میهن بلاگ دارن؟

این کد مال قالب بهار هست که شما نوشتید. تو تگی به اسم بلاگفا نوشته شده!!!

 <BLOGFA>
<div class=TopPost>
<div class=TopPost2>        
<b><a href="<-PostLink->"><-PostTitle-></a></b></div></div>
<div class=Post><div class=Post2>                    
<-PostContent->
<br>
<BlogExtendedPost><br><a href="<-PostLink->"><img src="http://iranrazmi.ir/spring/Edame.gif" alt="" width="100" height="25" /></a></BlogExtendedPost><br>

<BlogPostTagsBlock><br>برچسب‌ها: <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags></BlogPostTagsBlock>

                
</div></div>            

<div class=bottompost><div class=CPost3>
<br><br>
<div style="margin-right:10px;padding-top:12px;">
<div class=date>   <-PostAuthor->                                                    <-PostDate->                  <-PostTime->              </div>
<div class=Comment><BlogComment><script type="text/javascript">GetBC(<-PostId->);</script></BlogComment>
</div></div></div><div>            </DIV>            

<br><br>
</BLOGFA>

معنی این خط از کدها چی میشه؟        

 

[Mahdi Askari]

معنی این خط از کدها چی میشه؟        

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

ببینید در اچ تی ام ال شما هیچ چیزی ندارید که بتونید خودتون اضافه کنید
تمام دستورات باید به صورت کد باشه
در این زبان فقط یک فاصله(اسپیس) شناسایی میشه
و اگه بخواید مثلا چند تا فاصله کنار هم بذارید اون تشخیص نمیده
باید از کد مخصوص
 
استفاده کنید که هر دونه از اینا یک اسپیس هست

 

[سایه]

:خجالت:

اول همش یخورده نوشتم کلی سوال دارم :ناراحت:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="<-BlogAuthor->">
<meta name="language" content="Farsi">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription-> - <-BlogTitle->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->">
<title><-BlogAndPostTitle-></title>
<style>

.body{
background: url("http://www.up.iranjoman.com/images/k2ywumyg7afep42oydk6.png") repeat ; 
}
.page{
margin:0px auto 0px auto;
width: 750px;
dir: rtl;
background: #000 ;
padding: 10px;
font:  10px tahoma;
align: center;
position:relative;
top:5px;
}
.header {
background: url("http://www.up.iranjoman.com/images/k1mhbikqzx8lgkx6lj3.jpg")  ;
width:750px;
height:396px;
border-radius:10px;
margin: 0px;
}

.top-menu {
height: 40px;
width: 750px;
margin-bottom: 10px;
text-align: center;
background-image:  url("http://www.up.iranjoman.com/images/n3yxlvnacz1th0bdmy9f.jpg");
border-radius:10px;
margin-top: 5px;
}

.nav{float: right;}

.nav li{ float: left;}

.nav a {
Margin-left: 10px;
Padding: 15px;
Color: black;
font:15px tahoma;
Text-decoration: none;
}
.nav a:focus , .nav a:hover { Color: yellow;}

.TopPost{
height: 56px;
width: 530px;
background:url("http://www.up.iranjoman.com/images/l4lrnadpjjyqdbu08o0.jpg") no-repeat top right;
direction:rtl;
Margin-left: 220px;
text-align:right;
border-radius: 10px 10px 0px 0px ;

color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000]#000[/URL]    }

.Post{
background:url("http://www.up.iranjoman.com/images/v4sswwoymh9p4n1baghc.jpg") repeat-y  top right;
direction:rtl;
text-align:right;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000]#000[/URL]
position:relative;
padding:20 0 0 0;
}
.bottomPost{
background: url('http://www.up.iranjoman.com/images/p5dvnrx2861xtun5b71.jpg') no-repeat top right;
position:relative;
height:24;
width: 530px;
text-align:right;
Margin-left: 220px;
border-radius: 0px 0px 10px 10px
}


</style>
<script  language="javascript">
  function GetBC(lngPostid)
   {
       intTimeZone=<-BlogTimeZone->;
       strBlogId="<-BlogId->";
       intCount=-1;
       strResult="";
       try {
      for (i=0;i<BlogComments.length;i+=2)
      {
           if (BlogComments[i]==lngPostid)
           intCount=BlogComments[i+1] ;
      }
           }  catch( e) {
           }
    if ( intCount==-1)  strResult="آرشیو نظرات";
    if ( intCount==0)  strResult="نظر بدهید";
    if ( intCount==1)  strResult="یک نظر";
    if ( intCount>1)  strResult=intCount + " نظر" ;
  
  strUrl="/comments/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
  strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" +  strResult + " </a>" ;

  document.write ( strResult ) ;
 }
 
function OpenLD()
{
  window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
  return true;
}
</script>

</head>
<body>
<div class = "body">
<div class = "page">
<div class = "header">
<div style="font-size:25px;font-weight:bold;font-family:tahoma;color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000]#000[/URL]padding-top:70px;margin-left:500px;"><-BlogTitle-></div>
</div>
<div class = "top-menu">

<ul class = "nav">
<li><a href="mailto:<-BlogEmail->">ایمیل</a></li>
<li><a href="<-BlogArchiveLink->">آرشیو</a></li>
<li><a href="<-BlogUrl->">خانه</a></li>

</ul>


</div>

<div class =  "TopPost">
</div>
<div class = "post">

</div>
<div class ="bottompost">
</div>

</div>
</div>

</body>
</html>

http://www.up.iranjoman.com/images/plcexoxta5jmjv1dw8vb.rar

 

[Mahdi Askari]

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

به به بسیار زیبا:دست:

چند تا مورد بود براتون میگم که بایدی هست برای اجرا و چند مورد هم پیشنهادی هست

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

.body{

بادی یک تگ مشخص در صفحات وب هست و نیاز نیست به صورت کلاس تعریف بشه
یعنی اون نقطه پشتش باید حذف بشه
تفاوتش هم اینه که بادی برای کل صفحه اجرا میشه اما کلاس بادی که شما نوشتید فقط برای کلاس درونی قابل مشاهده هست

خب پیشنهادات:
بیس کارتون از روی قالب هایی هست که در سطح نت زیاده و با سایز طولی کم و عرض بالای هدر ساخته میشه
اینطوری یکم جلوی پیشرفت کارتون رو میگیره چون دارید چیزی میسازید که قبل از شما خیلی ها ساختن
بهتر هست با قبلی ها متفاوت بشید و سعی در ایجاد خلاقیت های جدید بدید
چیزی که قالب هاتون رو با بقیه متفاوت کنه

یکم ویرایش کردم قالبتون رو و شما اینو یک نگاهی بندازید:
(پیشنهاد هست و میتونید مثل کار اصلیتون ادامه بدید)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="<-BlogAuthor->">
<meta name="language" content="Farsi">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription-> - <-BlogTitle->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->">
<title><-BlogAndPostTitle-></title>
<style>

body{
background: url("http://www.up.iranjoman.com/images/k2ywumyg7afep42oydk6.png") repeat ; }
.page{
margin: 0px auto;
width: 950px;
font: 10px tahoma;
position: relative;
top: 5px;
background: rgba(0,0,0,.3);
padding: 10px;
}
.header {
background: url("http://www.up.iranjoman.com/images/2q2ilaghol66m1fw0px8.jpg")  ;
width:950px;
height:200px;
border-radius:10px;
margin: 0px;
}

.top-menu {
height: 40px;
width: 950px;
margin-bottom: 10px;
text-align: center;
background-image:  url("http://www.up.iranjoman.com/images/n3yxlvnacz1th0bdmy9f.jpg");
border-radius:10px;
margin-top: 5px;
}

.nav{float: right;}

.nav li{ float: left;
list-style: none outside none;
border-left: 1px solid rgb(0, 0, 0);
margin: 0 7px 0;
}

.nav a {
Margin-left: 10px;
Padding: 15px;
Color: black;
font:15px tahoma;
Text-decoration: none;
}
.nav a:focus , .nav a:hover { Color: yellow;}

.TopPost{
height: 56px;
width: 530px;
background:url("http://www.up.iranjoman.com/images/l4lrnadpjjyqdbu08o0.jpg") no-repeat top right;
direction:rtl;
Margin-left: 220px;
text-align:right;
border-radius: 10px 10px 0px 0px ;

color:[URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000"]#000[/URL]    }

.Post{
background:url("http://www.up.iranjoman.com/images/v4sswwoymh9p4n1baghc.jpg") repeat-y  top right;
direction:rtl;
text-align:right;
color:[URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000"]#000[/URL]
position:relative;
padding:20 0 0 0;width: 750px;
}
.bottomPost{
background: url('http://www.up.iranjoman.com/images/p5dvnrx2861xtun5b71.jpg') no-repeat top right;
position:relative;
height:24;
width: 530px;
text-align:right;
Margin-left: 220px;
border-radius: 0px 0px 10px 10px
}


</style>
<script  language="javascript">
  function GetBC(lngPostid)
   {
       intTimeZone=<-BlogTimeZone->;
       strBlogId="<-BlogId->";
       intCount=-1;
       strResult="";
       try {
      for (i=0;i<BlogComments.length;i+=2)
      {
           if (BlogComments[i]==lngPostid)
           intCount=BlogComments[i+1] ;
      }
           }  catch( e) {
           }
    if ( intCount==-1)  strResult="آرشیو نظرات";
    if ( intCount==0)  strResult="نظر بدهید";
    if ( intCount==1)  strResult="یک نظر";
    if ( intCount>1)  strResult=intCount + " نظر" ;
  
  strUrl="/comments/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
  strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" +  strResult + " </a>" ;

  document.write ( strResult ) ;
 }
 
function OpenLD()
{
  window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
  return true;
}
</script>

</head>
<body>

<div class = "page">
<div class = "header">
<div style="font-size: 20px;
font-weight: bold;
font-family: tahoma;
color: rgb(0, 0, 0);
margin-top: 50px;
margin-right: 300;
float: right;
background: rgba(0,0,0,.3);
padding: 5px;"><-BlogTitle-></div>
</div>
<div class = "top-menu">

<ul class = "nav">
<li><a href="mailto:<-BlogEmail->">ایمیل</a></li>
<li><a href="<-BlogArchiveLink->">آرشیو</a></li>
<li><a href="<-BlogUrl->">خانه</a></li>

</ul>


</div>

<div class =  "TopPost">
</div>
<div class = "post">

</div>
<div class ="bottompost">
</div>

</div>
</div>

</body>
</html>

برای عکس پشت منو هم میتونید از این استفاده کنید و ریپیت کنید عکسو
حجم صفحه خیلی کمتر میشه
http://www.up.iranjoman.com/images/t6rbm7q9oj6lp01lw5n.gif

 

[سایه]

مرسیییییییییی :شاد:
ممنون از راهنماییتون استاد: :84: :39:

عیدتون هم مبارک:2:
...................................
در مورد تگ body فکر کردم باید ی کلاس تعریف کنم که بقیه ی کلاس ها درون اون قرار بگیرند تا بطور کامل صفحه مرورگر رو پوشش بده و همینطوری اسمش رو body گذاشتم:نیش:

خب پیشنهادات:
بیس کارتون از روی قالب هایی هست که در سطح نت زیاده و با سایز طولی کم و عرض بالای هدر ساخته میشه
اینطوری یکم جلوی پیشرفت کارتون رو میگیره چون دارید چیزی میسازید که قبل از شما خیلی ها ساختن
بهتر هست با قبلی ها متفاوت بشید و سعی در ایجاد خلاقیت های جدید بدید
چیزی که قالب هاتون رو با بقیه متفاوت کنه

بسیااااااااار ممنون از پیشنهاد ارزندتون:احترام:

بله این قالب تو نت زیاده ... چون تعریف کلاس هاش واضح تر بود برام و مشخص شده بود دقیقا مربوط به کدوم بخش هست برای شروع کار انتخاب کردم.

یکم ویرایش کردم قالبتون رو و شما اینو یک نگاهی بندازید:
(پیشنهاد هست و میتونید مثل کار اصلیتون ادامه بدید)

الان خیییییییییلی بهتر شده.ممنون:احترام:
خب حالا این باید سه ستونه بشه! واسه شروع یخورده سخت نیست:نیش:

 

[Mahdi Askari]

مرسیییییییییی :شاد:
ممنون از راهنماییتون استاد: :84: :39:

عیدتون هم مبارک:2:
...................................
در مورد تگ body فکر کردم باید ی کلاس تعریف کنم که بقیه ی کلاس ها درون اون قرار بگیرند تا بطور کامل صفحه مرورگر رو پوشش بده و همینطوری اسمش رو body گذاشتم:نیش:



بسیااااااااار ممنون از پیشنهاد ارزندتون:احترام:

بله این قالب تو نت زیاده ... چون تعریف کلاس هاش واضح تر بود برام و مشخص شده بود دقیقا مربوط به کدوم بخش هست برای شروع کار انتخاب کردم.



الان خیییییییییلی بهتر شده.ممنون:احترام:
خب حالا این باید سه ستونه بشه! واسه شروع یخورده سخت نیست:نیش:

هر قالب بزرگی که نباید سه ستونه بشه:خنده1:
ایتجاست میگن ایده باید بدید:نیش:
میتونید سه ستونه کنید
میتونید دوستونه با پست بزرگ بدید و یا اینکه اون فضای خالی رو مختص بعضی کد های خیلی خاص قرار بدید

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

اما اینم بدونید قالب های نا متقارن رو خیلی میپسندن کاربران و جذابیت به خصوصی داره

نه دیگه برای کل صفحه شما همه رو داخل تگ <body> میذارید
پس با تعریف کد ها برای این کد برای کل صفحه اعمال میشه

 

[سایه]

میتونید دوستونه با پست بزرگ بدید و یا اینکه اون فضای خالی رو مختص بعضی کد های خیلی خاص قرار بدید

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

کدوم قالب ها زیاد طرفدار نداره!؟
دوستونه با پست بزرگ یا قالبایی که فضای خالی با کد مخصوص دارن؟:نیش2:

اما اینم بدونید قالب های نا متقارن رو خیلی میپسندن کاربران و جذابیت به خصوصی داره

منظورتون از نا متقارن کدوم قالب هاست؟:نیش2:
دو ستونه با پست بزرگ ! یا سه ستونه!

 

[Mahdi Askari]

کدوم قالب ها زیاد طرفدار نداره!؟
دوستونه با پست بزرگ یا قالبایی که فضای خالی با کد مخصوص دارن؟:نیش2:






منظورتون از نا متقارن کدوم قالب هاست؟:نیش2:
دو ستونه با پست بزرگ ! یا سه ستونه!

استادتو مسخره میکنی؟:91:

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

معمولا قالب های دو ستونه و سه ستونه متقارن هستند
نا متقارن یعنی هیچ چیزش مشخص نباشه کجاست:نیش:
مثلا بلاک ها رو مخفی کنید که با هاور شدن دیده بشه یا کلیک

 

[سایه]

من:تعجب: مسخره:سکوت:
خب الان این فرمش برای دو ستونه خوبه؟
http://www.up.iranjoman.com/images/zean5qhr286atlod6uv.rar

 

[Mahdi Askari]

من:تعجب: مسخره:سکوت:
خب الان این فرمش برای دو ستونه خوبه؟
http://www.up.iranjoman.com/images/zean5qhr286atlod6uv.rar

بعله بسیار هم عالی:دست:

 

[سایه]

میخوام تو کلاس toppost برای عنوان موقعیت تعیین کنم اما کلاس post بهم میریزه!
وقتی برای padding-top مقدار میذارم اینجوری میشه!

 

[Mahdi Askari]

اندازه یک عنصر میشه اندازه ای که شما تعیین کردید بهمراه padding
width:500px ... padding:12px
اندازه عنصر میشه 524px اندازه عنصر و 12 تا پدینگ راست و 12 تا پدینگ چپ

 

[سایه]

اندازه یک عنصر میشه اندازه ای که شما تعیین کردید بهمراه padding
width:500px ... padding:12px
اندازه عنصر میشه 524px اندازه عنصر و 12 تا پدینگ راست و 12 تا پدینگ چپ

مرسی:39:

جرا وقتی این کد رو مینویسم <a href="<-PostLink->"><-PostTitle-></a>
تو قالب زیر تیتر PostTitle ی خط کشیده میشه؟ چطور حذفش کنم؟

چه کدی رو بنویسم که قالب در مرورگرهای مختلف یکسان نشون بده و بهم نریزه؟