در این جلسه آموزش ویژگی های زبان CSS یا همون css3 properties رو خواهیم داشت . در این جلسه در مورد ویژگی های بسیار مهمی صحبت می کنیم که مربوط به تعین موقعیت و شناورسازی تگ ها در کنار هم هست . نکات مهمی هم در این رابطه خواهیم گفت :
عموم مطالبی که در این جلسه مطرح می شوند عبارتند از :
- ویژگی position و کاربردهای آن
- ویژگی top و کاربردهای آن
- ویژگی left و کاربردهای آن
- ویژگی bottom و کاربردهای آن
- ویژگی right و کاربردهای آن
- ویژگی float و کاربردهای آن
- ویژگی clear و کاربردهای آن
- ویژگی clip و کاربردهای آن
- ویژگی display و کاربردهای آن
- ویژگی height و کاربردهای آن
- ویژگی width و کاربردهای آن
- ویژگی visibility و کاربردهای آن
- ویژگی vertical-align و کاربردهای آن
- ویژگی line-height و کاربردهای آن
- ویژگی direction و کاربردهای آن
- ویژگی text-align و کاربردهای آن
:: توجه
این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.
میخام مثه منوی ناو شماکه با اسکرول از بین نمیره اونجور باشه ابسولوت مال این بود که نسبت به یه تگ دیگه ای فاصله بگیره بود خواهشا راهنمایی کنید چون خیلی پر کاربرد هستش
سلام من مشکل پوزیشن فیکس داشتم این بود که میخواستم اون تگ مورد نظرم بعد از منوی هدرم بنشینه اومدم بهش پوز فیکس دادم و تاپش را هم تنظیم کردم مشکلم اینه که میخام با اسکرول صفحه اون متنم سرجاش باشه ولی متاسفانه میاد توی محتوا و با محتوا قاطی میشه مشکلش چیه؟
پوزیشن فیکس برای این مورد مناسب نیست. از پوزیشن absolute استفاده کنید. یا به شکل دیگه ای اونجا قرارش بدید.
Document * { /* padding: 0px; margin: 0px;*/ } div { /*padding: 0px; margin: 0px;*/ position: absolute; left: 50%; bottom: 50%; background-color: teal; width: 100px; height: 100px; /*clear: both;*/ }استاد دلیل اینکه باکس آبی رنگ دقیقا وسط صفحه نمیاد چیه؟!
چکار کنم که بیاد؟
در ضمن کد رو هر کاری کردم واستون درست آپلود نمیشه تو سایت .نمیدونم از طرف شما هم اینطوره یا نه
سلام برای وسط قرار دادن در صفحه استایل اون المنت خاص رو باید با margin بالا و پایین با عددی مشخص قرار بدین و margin چپ و راست رو مقدار auto قرار بدین.
سلام مهندس
خسته نباشید
من خواستم یه چیزی رو بگم که شما فکر کنم داخل فیلم حواستون نبودش (البته دارم جسارت میکنم )
در دقیقه حدودا 43 وقتی داشتین موقعیت float به سایدار و کانتنت میدادین اومدین درصد بکار بردین و باکس رو از نوع border-box قرار دادید ولی باز هم کنار هم قرار نگرفتن و فرمودید احتمالا بخاطر پدینگ و مارجین های دیفالت مرورگر هست
من دقت کردم در فیلم شما کد box-sizing: border-box; رو به دایو کانتنت دادید ولی به دایو سایدبارمون ندادید و بخاطر همین که دایو سایدبارمون نوع باکسش دیفالت مرورگر بود برای بوردر 2 پیکسل اضافه میکرد
به همین دلیل در یک راستا قرار نمیگرفتن و به خط بعد میرفتن
بازم جسارتمو ببخشید
موفق باشید
نه خواهش میکنم
بعضی وقتا موقع ضبط ممکنه تمرکز کافی رو نداشته باشیم و اینجور موارد پیش بیاد.
ممنون از ذکر این مورد
سلام استاد اوند عزیز …
استاد تفاوت line-height
با vertical-align
چیه ؟؟؟
مثلا اگه بخایم یه عکسو تراز عمودیشو درست کنیم …. میتونیم از line -height استفاده کنیم و هم vertical-align فقط line-heightمقدار منفی نمیگیره ؟؟؟
کاربردشون و فهمیدم ولی نمیدونم کجا باید کدوماشونو استفاده کنم … 😳 🙁 🙁 🙁
line-height برای فاصله بین دوخط یا کلا خطوط متنی استفاده میشه و vertical-align برای تراز عمودی عناصر که نیاز به پراپرتی های مکمل در کنارش داره تا کار کنه مثل پراپرتی display
سلام استاد
برای کامنت کردن یک تکه کد در php storm چه کاری انجام میدادید ؟
ctrl + /ctr + shift + /
تشکر میکنم از دوست خوبم barati ک این سوالو پرسیدن …
و سلام خدمت دوست خوبم اقا لقمان
استاد اوند ما در اکثر زبان های برنامه نویسی کامنت سینگل لاینی داریم (خودت ک بیشتر از من بلدی ::)) )اینجا توی css همچین ساختاری رو نداریم ؟؟؟
/**/
single line //
single line #
بازم تشکر واسه پاسخ گویی خوبتون و زحماتی ک میکشین … 😆
خیر نداریم مگر اینکه از پیش پردازنده های css مثل less و یا sass برای کدنویسی css استفاده کنید
سلام استاد من برای این که طول یک تصویر رو مطابق با پنجره مرورگر کنم از علامت درصد استفاده می کنم اما متاسفانه هیچ تغییری توی صفحه نمی بینم. کد رو به این شکل وارد می کنم :
<!–
–>
و در فایل سی اس اس :
#headerimage{
width: 100%;
}
با مشخصه های margin-right , margin-left هم موفق نشدم.
خواستم تصویر رو از طرف کدهای سی اس اس به عنوان پس زمینه لود کنم که توی این حالت هم حتی تصویر نمایش داده نمی شه.
کدهای من مشکل دار هستن یا ایراد از نرم افزاره؟!
فایل کدهاتون رو به بنده ایمیل کنید تا بررسی بشه
سلام
سوالی در مورد این جلسه ندارم عالی بود , فقط خواستم بگم در دقیقه 44 که اومدین از ویژگی box-sizing: border-box; استفاده کردین ولی باز هم با مجموع 100 درصد عرض width , سایدبار و کانتنت کنار هم نیومد دلیلش اینه که شما اومدین این ویژگی رو در .main .content و .main .footer قرار دادین که اگه این ویژگی باکس سایزینگ رو در .main .contentو .main .side (بجای فوتر) قرار بدین با مجموع 100 درصد عرض سایدبار و کانتنت کنار هم میان .
ممنون از نکته ای که گفتین.
سلام استاد
خسته نباشید
میخواستم بدونم در position : relative مقدار
top : -50px
با
bottom : 50px
چه فرقی میکنه ؟
وقتی میتونیم فاصله از پایین رو برابر 50px قرار بدیم چرا باید فاصله بالا رو 50px- بگذاریم ؟
تقریبا فرقی نداره . چون مبدا top و left هست معمولا از این دو بیشتر استفاده میشه .
اونم تست شد و بدون مشکل دانلود میشه …