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



نحوه قرار دادن کادرزمان کنونی: ۱۳۹۵/۰۹/۱۳، ۰۲:۵۶ ق.ظ
کاربران در حال بازدید این موضوع: 1 مهمان
نویسنده: Omid
آخرین ارسال: admin
پاسخ 5
بازدید 3646

رتبه موضوع:
  • 1 رای - 3 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
نحوه قرار دادن کادر

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

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

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

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

کد:
<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-styleConfusedolid ابتدا نوع کادر را تعیین کرده که به صورت خط پیوسته است .
کد border-width:1px میزان ضخامت خط کادر را تعیین کرده است .
کد border-radius:7px 7px 7px 7px میزان انحنای گوشه های کادر را تعیین کرده که همانی است که شما لازم دارید . دقت کنید که 4 عدد برای 4 گوشه کادر نوشته شده است .
قسمت هایی که برای sidebar2_menu a:hover نوشته شده است برای نحوه تغییر ، هنگام قرار گرفتن موس بر روی قسمت های مختلف لیست می باشد . مثلا اگر موس روی یک قسمت از لیست قرار بگیرد آنگاه رنگ پس زمینه آن تغییر کند .
اگر بخشی از کدها را متوجه نشدید بپرسید تا توضیح بدم .
با توجه به مثال بالا ، اگه خواستید دور یک پاراگراف کادر با گوشه های گرد بسازید ، برای آن class بسازید و آنگاه از border-style ، border-width و border-radius مطابق میلتان استفاده کنید .
bookbook 
لطفا برای درج کد، از دکمه مخصوص درج کد در ادیتور انجمن استفاده کنید.
در مورد برنامه نویسی، مدیران تنها راهنمایی می کنند و نوشتن برنامه نهایی، به عهده کاربران می باشد (اینجا محلی برای یادگیری است، نه سفارش کدنویسی).
کاربران باید ابتدا خود به خطایابی برنامه بپردازند، نه اینکه به محض دیدن خطا، کدها را در انجمن، copy و paste کرده و از مدیران انتظار بررسی داشته باشند.
پاسخ

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

#3
از توضیحات کامل و دقیقی که دادین بسیار سپاسگزارم
فقط کاربرد بخش سوم یعنی
کد:
ul.sidebar2_menu li {                  
                    padding-left:0px;
                    padding-right:0px;
                    padding-top:3px;
                    }

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

کد:
ul.sidebar2_menu{
    list-style:none;
    padding-right:135px;
}
پاسخ

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

#4
برای هر بخش ، دو مشخصه به نام های 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 را حذف کنید دیگر در وسط قرار نمی گیرد .
bookbook 
لطفا برای درج کد، از دکمه مخصوص درج کد در ادیتور انجمن استفاده کنید.
در مورد برنامه نویسی، مدیران تنها راهنمایی می کنند و نوشتن برنامه نهایی، به عهده کاربران می باشد (اینجا محلی برای یادگیری است، نه سفارش کدنویسی).
کاربران باید ابتدا خود به خطایابی برنامه بپردازند، نه اینکه به محض دیدن خطا، کدها را در انجمن، copy و paste کرده و از مدیران انتظار بررسی داشته باشند.
پاسخ

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

#5
اما یک نکته مهم رو هم باید ذکر کنم که مشخصه border-radius در مرورگر internet explorer پشتیبانی نمی شود و بنابراین گوشه های کادر در این مرورگر دارای انحنا نخواهند بود .
اما سایر مرورگرها مثل opera و firefox چنین مشکلی ندارند و گوشه های کادر رو انحنادار نمایش می دهند .
bookbook 
لطفا برای درج کد، از دکمه مخصوص درج کد در ادیتور انجمن استفاده کنید.
در مورد برنامه نویسی، مدیران تنها راهنمایی می کنند و نوشتن برنامه نهایی، به عهده کاربران می باشد (اینجا محلی برای یادگیری است، نه سفارش کدنویسی).
کاربران باید ابتدا خود به خطایابی برنامه بپردازند، نه اینکه به محض دیدن خطا، کدها را در انجمن، copy و paste کرده و از مدیران انتظار بررسی داشته باشند.
پاسخ


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)