آموزش Css قسمت بیست و سوم – Fixed Positioning

با سلام خدمت دوستان عزیز

بیست و سومین جلسه آموزش برنامه نویسی Css  را برای شما قرار دادم ، می توانید از طریق لینک زیر آن را مشاهده کرده و یا دانلود کنید.

این جلسه در مورد نحوه ی Position دادن باکس ها و المنت ها از طریق Fixed Positioning هستش و اینکه فرق این نوع position با Absolute Positioning در چه چیزی هستش.

مشاهده ویدیو بصورت آنلاین

دانلود ویدیو

شما میتوانید دیدگاهی بگذارید، یا بازخوردی از سایتتان.

۶۲ دیدگاه برای “آموزش Css قسمت بیست و سوم – Fixed Positioning”

  1. ahmad گفت:

    سلام خدا قوت
    با تشکر از آموزش های خوب شما آقا پیمان

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

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

    مثلا این وبلاگ رو که براتون میفرستم مشاهده کنید ببینید چطور مطلب هاش از همدیگه جدا شدند.

    اگر جواب سوالم رو بدبد ممنون میشم .
    باتشکر

    • admin گفت:

      دوست عزیز ، قالب بلاگفا ، میهن بلاگ ، وردپرس و همه ی سیستم های وبلاگ دهی و مدیریت محتوا دارای یک سری توابع هستند که با استفاده از اون توابع شما میتونید یک نمونه قالب برای پست ها ایجاد کنید و با استفاده از توابع اون نمونه به اندازه تعداد پست هایی که شما براش تعیین میکنید تکرار میشه .

      قبلا گفتم که برای ایجاد فاصله شما میتونید از margin یا padding استفاده کنید ، این فاصله هارو میتونید با margin مشخص کنید.

  2. yas گفت:

    salam o khaste nabashid,bebakhshid in akharin jalaseye css hastesh?

  3. میلاد گفت:

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

    • admin گفت:

      کدهای اسلاید شو معمولا بصورت جاوا(جی کوری) و اچ تی ام ال هستند . کافیه کد هاشو و فایل هایی که لازمه رو بگیرید و در صفحه load کنید .

  4. ميلاد گفت:

    Mamnoon mishe idie yahooto bedi?

  5. ميلاد گفت:

    تو آموزشات یادت نیست وسطش یه پی ام برات اومد.
    ولش کن لااقل یه ایمیلی به من بده تا بتونم باهات در ارتباط باشم من دارم یه سایتی راه میندازم بعضی وقتا به کمک نیاز دارم.ممنون

  6. ميلاد گفت:

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

    • admin گفت:

      به همین سادگی نیست آقا میلاد ، شما میخوایید یک فرم بسازید ، این فرم باید اطلاعات رو به یک صفحه ی php بفرسته که از طریق ۲ متد post یا Get اون اطلاعات رو بگیره و در یک دیتابیس Mysql ذخیره کنه . قسمت اچ تی ام ال رو احتمالا زود یاد میدم ولی اگه میخوای همه ی کاراشو انجام بدی پیشنهاد خواندن کتاب های آموزش PHP رو بهت میدم.

  7. ميلاد گفت:

    آقا پیمان ممنون.
    خوب چطوری انجامش بدم فرض کن من پی اچ پی بلدم که هستم تک تک کارهایی رو که باید انجام بدم بهم بگو.

    • admin گفت:

      اگر بلد بودی که نمی پرسیدی میلاد ! تو باید یک فرم اچ تی ام ال بسازی ، از طریق یکی از این ۲ تا متد GET یا POST اطلاعاتی که مشتری وارد میکنه رو به یک صفحه ی php بفرستی و از طریق اون صفحه در php بگی که اطلاعات رو بگیر ، بعد در صفحه ی php : یک کانکشن بین صفحه و پایگاه داده میسازی و اطلاعات وارد پایگاه داده میشه .

  8. Amir گفت:

    میشه بجای Border یه عکسی چیزی بزاریم؟ میشه کامل توضیح بدید؟

  9. میلاد گفت:

    آقا پیمان چرا درست جواب نمیدی من که گفتم بلد با اچ تی ام ال فرم رو طراحی کنم فق این جکله که گفتی(اطلاعاتی که مشتری وارد میکنه رو به یک صفحه ی php بفرستی و از طریق اون صفحه در php بگی که اطلاعات رو بگیر ، بعد در صفحه ی php : یک کانکشن بین صفحه و پایگاه داده میسازی و اطلاعات وارد پایگاه داده میشه .) این جمله رو بهم آموزش بده خدا خیرت بده ممنون.

    • admin گفت:

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

  10. Amir گفت:

    همون رو میگم border رو برای div بزاریم بعد یه عکس بزاریم میشه آموزش بدید؟

    • admin گفت:

      دوست عزیز من معمولا یک مثال میزنم که یاد بگیرید ، نمیتونم که روی همه ی المنتها براتون انجام بدم ، خودتون یک div بسازید ، براش طول و عرض مشخص کنید ، در داخلش یک عکس یا یک جمله قرار بدید ، براش یک border بکشید و براش position تعیین کنید . با تمرین و تکرار خیلی بهتر مسایل رو درک میکنید . روی یک فایل اچ تی ام ال براحتی میشه همه ی اینارو تست کرد . اگه امتحان کردی مشکلی داشتی بگو من بهت کمک میکنم. حتما خودت انجام بده ! وگرنه یاد نمیگیری

  11. ميلاد گفت:

    سلام آقا پیمان این یکیو که دیگه میتونی جواب بدی من یه div ساختم حالا میخوام تو سی اس اس بک گراندش شیشه ای بشه مثلا المنت های دیگه از پشتش معلوم باشه مثل خیلی از سایتا چه کدی باید بدم؟

    • admin گفت:

      background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

    • admin گفت:

      bayad barash gradient tain koni , to Google bezan gradient Css tools
      yek seri website in khadamat ro behet midan

      code hayei k khasti mese zire: bayad tavajoh koni k har mororgar ye codi ro support mikoni , baraye har khat neveshte shode k dar kodum mororgar on khat code kar mikone

  12. yas گفت:

    salam o khaste nabashid,agha man nemitonam az jalaseye 5 om be bade css ro be sorate moshahedeye online bebinam safeye siyahio faghat vasam baz mikone,downloadam nemishe,vali ta ghesmate 4 moshkeli nadasht,bayad chi kar konam?

    • admin گفت:

      سلام ، تست کردم ، هم مشاهده میشه هم میشه فایل رو دانلود کرد ، مرورگرتون رو عوض کنید ، شاید مشکل حل بشه ، در ضمن میتونید روی فایل دانلود کلیک راست کنیدو گزینه ، Save target as رو بزنید و ذخیره کنید.

  13. yas گفت:

    salam ham ba google chorom emtehan mikonam ham ba firefox nemidonam chera na download mishe na mitonam moshahedeye online dashte basham ta ghesmate4 css hich moshkeli nadare az 5 be bad in moshgel hast

  14. reza گفت:

    سلام
    پس کی ویدیوی جدیدتون اماده میشه؟؟؟
    منتظریم لطفا سریع تر اپ کنید

    • admin گفت:

      dar avalin forsat gharar midam , vali baraye in k ziad aziat nashid , say konid haftei 1bar ya 2bar sar bezanid va video haye jadid ro download konid

  15. یه نفر گفت:

    شما که استادید چرا از وردپرس استفاده میکنید:-؟

    • admin گفت:

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

    • یه نفر گفت:

      manzooram in bood cheraa khodetoon ye systeme moiriat mohtavaa nemisaazid:-?

    • admin گفت:

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

  16. دانیال گفت:

    سلام خسته نباشید .مهندس من الان یه وب سایت با css طراحی کردم واسه یه مشاور املاک نمی دونم بعدش چکار کنم .باید حتما هاست و دامین بگیرم؟ چون فضای آنچنانی نمی خواهد نهایت ۵۰۰ مگ.تورو خدا یه راهنمایی کن حالا که تموم شده باید چکار کنم .الان من وب سایتو بدم به طرف پس فردا می خواد یه چیزی توسایتش بزاره باید با دریم ویور بره سایتو باز کنه که اونو داخل بزاره.اصن هیچ اطلاعاتی ندارم

    • admin گفت:

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

  17. دانیال گفت:

    الان از ورد پرس میشه به عنوان پنل مدیریتی استفاده کرد؟

    • admin گفت:

      میشه ، ولی نه برای سایت شما ، وردپرس یک سیستم جداست ، اگه برید دربارش تحقیق کنید ، حتما بیشتر درباره ی این سیستم اطلاعات کسب میکنید و بدردتون خواهد خورد.

  18. ساحل گفت:

    خسته نباشید.من ی سری اسکریپت آماده دانلود کردم می خواستم بدونم چطوری میشه اینارو داخل Css قرار داد؟

    • admin گفت:

      آقا یا خانم ساحل سی اس اس با این چیزی که شما فکر میکنید فرق داره دوست عزیز ، لطفا اول اچ تی ام ال ، سپس سی اس اس را مطالعه کنید شاید درکتون بهتر بشه.
      بدون مطالعه اظهار نظر نکنید خواهشا

  19. ساحل گفت:

    خسته نباشید جناب دنبال کیلیپی مقاله ای چیزی می گردم که روش طراحی دیتا بیس برای css رو آموزش داده باشه.

    • admin گفت:

      طراحی دیتابیس برای CSS ؟؟؟
      Css دیتابیس نداره عزیزم ، سی اس اس زبان استایل نویسی هستش ، طراحی دیتابیس برای Mysql داریم.

      ویدیوهارو مطالعه کنید بیشتر با این زبان آشنا میشید

  20. پویا گفت:

    سلام آقا پیمان یه سوال خیلی مهم داشتم ممنون اگه راهنمایی کنی من دارم یه قالب طراحی میکنم در یه جایی به مشکل برخوردم مشکل در پستام هست , وقتی من یه خط در پستم وجود داره اون قسمت پایین که مثلا نوشته ادامه مطلب تاریخ نویسنده و…. درست سر جاشه ولی وقتی بیشتر از یه خط میشه اون قسمت پایین هم به اندازه اون خط ها از سر جاش میاد پایین باید چکار کنم که سر جاش بمونه عکساشم گذاشتم تا بهتر بفهمی چی میگم.
    این عکس اولی درست سر جاش قرار گرفته چون پستم یه خط داره:
    http://persian-singers.rozup.ir/Pictures/1.JPG

    اما تو عکس دومی چون پستم بیشتر از یه خط هستش اون قسمت پایین رفته پایین:
    http://persian-singers.rozup.ir/Pictures/2.JPG

    • admin گفت:

      سلام ، من احتمال میدم از margin یا padding برای فاصله استفاده کردید که همین موضوع باعث شده این اتفاق بیفته . ولی کدهاشو یک طوری بدستم برسه شاید بهتر بتونم قضاوت کنم.

  21. پویا گفت:

    آقا پیمان کدها رو به ایمیلت ارسال کردم لطفا هر چه زودتر راهنمایی کن ممنون.

  22. amir گفت:

    سلامی دوباره خسته نباشید . راستش من ۲ ماه که شروع به یادگیری برنامه نویسی کردم تو این مدت در زمینه html دو نوع ویدئو دیدم که یکیش هم مال شما بود و دو تا سایت ایرانی هم آموزش هاشو یاد گرفتم و یک کتاب html الان که می خوام css رو یاد بگیریم هم آموزش شما رو می بینم هم آموزش سایت tutsplus رو یک کتابی هم بنام راهنمای سریع ویژوال html,css,xhtml از الیزابت کاسترو دارم اما از نگارشش خوشم نیومد آیا شما کتابی برای یادگیری css می تونید معرفی کنید ؟
    یک سئوال دیگه داشتم پس از یادگیری css به نظر شما برم به طرف جاواسکریپت یا php یا css3 و html5 رو یاد بگیرم؟ در نظر دارم که یک برنامه نویس خوب و با دانشی پر بشم.

    • admin گفت:

      اگر میخواهید طراح صفحات وب بشید و آینده ای موفق و تضمینی داشته باشید حتما همه ی این زبان هارو یاد بگیرید البته چند زبان دیگر هم باید یاد بگیرید: javascript,jquery و پایگاه داده My sql . قول میدم تا ۶ ماه دیگه در ضمینه طراحی وب میتونی صاحب نظر شی اگه به کارت بصورت جدی ادامه بدی.

      راستش رو بخوای Css بیشتر بصورت عملی قابل درکه تا بصورت کتابی ، معمولا باید در عمل کاربردش رو ببینی و تمرین کنی تا بتونی دانش Css خودت رو بالاتر ببری.
      به دو روش عمل کنی درکت خیلی زودتر بالا میره :
      ۱- کتاب های آموزش Css یا Css3 رو دانلود کن و بخون.میتونی از منابعی همچون سایت W3schools هم استفاده کنی.
      ۲- قالب های آماده ی طراحی شده html رو دانلود کن ، استایل و کدنویسی هارو نگاه کن و ببین چطوری عمل کردن.

  23. پویا گفت:

    آقا پیمان چی شد جواب ما رو ندادی که کد ها رو که برات فرستادم به ایمیلت.

  24. پويا گفت:

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

    • admin گفت:

      نهههه پویا حالت خوبه عزیز ؟؟؟؟؟ این فایل html ساده هست ، چطوری میخوای پست بزاری ؟؟؟؟ عزیز فعلا خیلی خیلی برات زوده !

      فعلا برو html رو یاد بگیر ، بعد Css , بعد php , javascript , mysql سپس بیا طراحی قالب کن . عزیزم قالب وردپرس که صفحه html نیست ، اینا کلی تابع داره ، باید یاد بگیری ، باید php بلد باشی . این قالب فقط و فقط یک قالبه html/Css ساده است و فقط همین .

      طراحی قالب وردپرس رو تا حدی سایت cgtv شرح داده ، چون ویدیو هاشون تصویری هستن خیلی بهتر و مفهومیتر با طراحی وردپرس آشنا میشید ، البته نظر من رو میخویید فعلا خیلی زوده ، فعلا دانش کد نویسی زبان هایی که گفتم رو زیاد کنید خیلی بهتر میتونید .

  25. پويا گفت:

    من همه ی اینارو میدونم من که هنوز تبدیلش نکردم به وردپرس من اینو تازه دارم با دریم ویوور دارم طراحی میکنم شما همین کدارو تو دریم ویوور باز کنین و همون جا تو دریم ویوور اجراش کنین میبینین که کامل اجرا میشه حالا اون قسمتی که مربوط به پست ها هست ببین مشکلش چیه که افزوده نمیشه.

    • admin گفت:

      پویا ، کلا روشی که برای طراحی استفاده کردی درست نیست ، هرچند مفهوم سوالت رو نفهمیدم ولی در کدنویسیت یک سری اشتباهات عجیب داری . مثلا استفاده از margin و padding بصورت کاملا غیر طبیعی .
      فعلا آموزش هارو دنبال کن ، قالب های حاضر و آماده html/css رو هم دانلود کن ، ببین چیا کردن ، خیلی بهتر میتونی مسایل رو درک کنی. قول میدم سوالاتت کم کم حل میشه.
      این سایت CGTV رو هم یه سر بزن ، ویدیو هاش خیلی بهت کمک میکنن.

  26. پويا گفت:

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

    • admin گفت:

      بهترین راه حل اینه که قالب های حاضر و آماده html/css رو دانلود کنی ، کدهاشونو ببینی و تحلیل کنی فعلا

  27. raoof گفت:

    سلام امیدوارم حالت خوب خوب باشه.
    میخاستم بگم من تا الان قسمت ۲۱ رو خودم میخاستم بگم بعد از تموم شدن این ۲۳ قسمت من منتظر قسمت های بعدی css باشم تا تموم بشه بعد برم php رو بخونم یا اگه الانم بخونم اشکال نداره؟؟؟

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

    • admin گفت:

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

  28. reza گفت:

    سلام admin عزیز امیدوارم همیشه موفق باشی
    من دارم یه سایت برا خودم طراحی می کنم چنتا سوال داشتم می خواستم بدونم که:
    ۱٫برای سایتم که تو ضمینه دانلود فیلمه، برا CMSاز چه سیستمی استفاده کنم؟ (خودم که نمی تونم یه cmsبنویسم) 🙁
    ۲٫سوال دوما تو عکس نوشتم:
    http://8pic.ir/images/yd8b4cvrc90nssybqp5.jpg
    ممنون

    • admin گفت:

      دوست عزیز رضا جان سوالاتت اصلا در مورد مباحث و آموزش های سایت نیست. شما میتونید از Cms های wordpress یا php nuke یا سایر cms ها استفاده کنید ، فقط کافیه قالبی که مد نظرتون هست رو پیدا کنید و بعنوان قالب براش انتخاب کنید.

      من نمیتونم در این ضمینه بیشتر راهنماییتون کنم.

    • reza گفت:

      مرسی تا هینجا هم لطف کردی که جوابمو دادی

  29. ندا گفت:

    سلام دوست عزیزم . من میخوام بدونم واسه طراحی یک سایت کاربردی با asp.net باید چه مبحثایی بلد باشم ؟؟؟؟؟؟؟؟؟؟مثلا css یا sql , چی برای اینکه حک نشه یا ………………کلاً مطالعه رو چه مبحثایی باید داشته باشم .؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟/

    • admin گفت:

      این زبان ها میتونه به شما کمک کنه:
      html
      css
      javascript
      asp
      mysql یا Sql-server
      البته برای جلوگیری از هک ، اقدامات خیلی زیاد سختی لازم نیست ، در اصل شما بعد از یادگیری اینا خیلی راحت میتونید در عرض چند هفته روش های نفوذ و جلوگیری از نفوذ رو یاد بگیرید.

دیدگاهی بگذارید

عضو خوراک مطالب شوید مرا در توییتر دنبال کنید!
به اين صفحه امتياز دهيد

--------------------
به سايت ما امتياز دهيد