ورود

Omid · ۱۳۹۱/۱۰/۱۴, ۰۹:۱۴ ب.ظ

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

admin

سلام .
مثلا فرض کنید منوی کنار سایت را به صورت لیست ساخته باشیم که کدهای آن به صورت زیر است :

کد:
<ul class="sidebar2_menu">

<li><a href="matlab/index.php">آموزش متلب</a></li>

<li><a href="html/index.php">آموزش html</a></li>

</ul>

همان طور که مشاهده می کنید برای لیست یک class با نام sidebar2_menu تعریف کرده ایم . حالا توی کدهای CSS باید اینگونه به این class ارجاع بدهیم :

کد:
ul.sidebar2_menu {

                 list-style:none;

                 }          

ul.sidebar2_menu li a {

                      text-decoration:none;

                      display:inline-block;

                      width:190px;

                      background-color:#0FF;

                      padding:2px;

                      padding-right:4px;

                      border-style:solid;

                      border-width:1px;

                      border-radius:7px 7px 7px 7px;                 

                      }

ul.sidebar2_menu li {                  

                    padding-left:0px;

                    padding-right:0px;

                    padding-top:3px;

                    }    

.sidebar2_menu a:hover {

                       background-color:#0F6; 

                       border-radius:7px 7px 7px 7px;

                       }

کدها رو کامل نوشتم اگه بخشی رو لازم ندارید می تونید حذفش کنید . حالا بخش های مهم رو توضیح میدم :
کد list-style:none برای این است که در کنار لیست ، عدد یا شکلی نمایش داده نشود .
کد text-decoration:none برای این است که زیر لینک ها ، خط نمایش داده نشود .
کد border-style Confused

olid ابتدا نوع کادر را تعیین کرده که به صورت خط پیوسته است .
کد border-width:1px میزان ضخامت خط کادر را تعیین کرده است .
کد border-radius:7px 7px 7px 7px میزان انحنای گوشه های کادر را تعیین کرده که همانی است که شما لازم دارید . دقت کنید که 4 عدد برای 4 گوشه کادر نوشته شده است .
قسمت هایی که برای sidebar2_menu a:hover نوشته شده است برای نحوه تغییر ، هنگام قرار گرفتن موس بر روی قسمت های مختلف لیست می باشد . مثلا اگر موس روی یک قسمت از لیست قرار بگیرد آنگاه رنگ پس زمینه آن تغییر کند .
اگر بخشی از کدها را متوجه نشدید بپرسید تا توضیح بدم .
با توجه به مثال بالا ، اگه خواستید دور یک پاراگراف کادر با گوشه های گرد بسازید ، برای آن class بسازید و آنگاه از border-style ، border-width و border-radius مطابق میلتان استفاده کنید .

Omid

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

کد:
ul.sidebar2_menu li {                  

                    padding-left:0px;

                    padding-right:0px;

                    padding-top:3px;

                    }

چیست؟
یک مشکل دیگر دارم اینست که می خوام این کادر با مطالب داخلش وسط قرار بگیرد آیا دستور برای اینکه دقیقا در وسط قرار بگیرد نیز هست؟ البته من فعلنه با قرار دادن padding-right تقریبا وسطش آوردم به این صورت

کد:
ul.sidebar2_menu{

    list-style:none;

    padding-right:135px;

}

admin

برای هر بخش ، دو مشخصه به نام های margin و padding داریم . برای درک تفاوت بین آنها ، ابتدا خط کادر دور یک بخش صفحه را در نظر بگیرید و درون آن بخش هم فرض کنید که یک متن نوشته شده باشد . مشخصه padding برای تعیین فاصله بین نوشته تا خط کادر می باشد و مشخصه margin نیز برای تعیین فاصله بین خط کادر تا سایر بخش های دیگر اطراف این بخش می باشد .
در واقع padding برابر حاشیه داخلی و margin برابر حاشیه خارجی می باشد . همچنین باید دقت کنید که این دو مشخصه را برای چه تگی در html به کار می برید .
دستورات زیر رو در نظر بگیرید :

کد:
padding-left:2px;

padding-right:2px;

padding-top:2px;

padding-left برای میزان حاشیه داخلی نسبت به سمت چپ می باشد و در واقع کلمه left نشان دهنده جهت حاشیه داخلی تعریف شده است که بعد از کلمه padding آمده است . دو مورد دیگر نیز برای سمت راست و قسمت پایین به کار رفته اند .
البته به جای کدنویسی بالا می توان از کد خلاصه تر زیر استفاده نمود :

کد:
padding: 2px 2px 2px 2px;

که در آن 4 عدد نوشته شده است که مربوط به padding برای هر 4 جهت می باشد .

برای وسط قرار گرفتن ، می توانید از مشخصه text-align استفاده کنید ، مثلا کدهای زیر را در یک صفحه html کپی کنید و نتیجه را مشاهده کنید :

کد:
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

ul.sidebar2_menu {

                  list-style:none;

                  text-align:center;

                  }          

ul.sidebar2_menu li a {

                       text-decoration:none;

                       display:inline-block;

                       width:190px;

                       background-color:#0FF;

                       padding:2px;

                       padding-right:4px;

                       border-style:solid;

                       border-width:1px;

                       border-radius:7px 7px 7px 7px;                 

                      }

 ul.sidebar2_menu li {                  

                     padding-left:0px;

                     padding-right:0px;

                     padding-top:3px;

                     }    

 .sidebar2_menu a:hover {

                        background-color:#0F6; 

                        border-radius:7px 7px 7px 7px;

                        }

</style>

</head>

<body>

<ul class="sidebar2_menu">

<li><a href="matlab/index.php">آموزش متلب</a></li>

<li><a href="html/index.php">آموزش html</a></li>

</ul>

</body>

</html>

مشاهده خواهید کرد که در وسط صفحه نمایش داده می شود ، اما اگر مشخصه text-align را حذف کنید دیگر در وسط قرار نمی گیرد .

admin · ۱۳۹۱/۱۰/۲۳, ۰۱:۲۴ ق.ظ

اما یک نکته مهم رو هم باید ذکر کنم که مشخصه border-radius در مرورگر internet explorer پشتیبانی نمی شود و بنابراین گوشه های کادر در این مرورگر دارای انحنا نخواهند بود .
اما سایر مرورگرها مثل opera و firefox چنین مشکلی ندارند و گوشه های کادر رو انحنادار نمایش می دهند .

ورود
نام‌کاربری:
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.

انجمن سایت کلیدستان

نحوه قرار دادن کادر

نحوه قرار دادن کادر

نحوه قرار دادن کادر

نحوه قرار دادن کادر

نحوه قرار دادن کادر