• slide 0

    کاملترین دوره آموزش PHP به زبان فارسی !

  • slide 1

    آموزش فروشگاه ساز Open Cart - مقدمه

  • slide 2

    وردپرس - ایجاد شورتکد و دکمه اختصاصی در ادیتور - قسمت اول

  • slide 3

    LivIcons : آیکون ها زنده!

  • slide 4

    9 استایل زیبا برای CheckBox با CSS3


اطلاعیه : در حال حاضر کاملترین دوره ی مجازی آموزش زبان PHP با قیمتی بسیار مناسب نسبت به کلاس های حضوری در حال برگذاری است . از این فرصت ویژه استفاده نمایید.

لقمان آوند ۲۱ بهمن ۹۰ 80,939 بازدید

:: خیلی از دوستان در سوال های مطرح شده پرسیده بودند که چطور عکس ، متن و یا شئ خاصی رو در صفحه وب به وسط بیارند و چینش افقی اونو وسطچین کنند . امروز در این پست به صورت کامل و مفصل در مورد چینش افقی انواع متن ، عکس و اشیاء در صفحات Html به روش های مختلف صحبت خواهیم کرد .

:: اول از همه بزارید در یک دسته بندی کلی تگ ها . المان های html رو به دوبخش تقسیم کنیم :

  1. متن ها و المان های شبه متن مثل لینک ها و عکس ها
  2. تگ ها و المان های بلاکی مثل جدول ها و تقسیم بندی ها (تگ div)

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

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

:: روش اول : وسطچین کردن اشیاء ( کهنه و منسوخ شده ) :

در این روش از تگ center که در ورژن های قدیمی html وجود داشت استفاده میشه . بعد از ورود CSS دیگه از این تگ استفاده نمیشه . البته هنوز مرورگرها اونو support می کنن ولی به احتمال زیاد در نسخه های آینده برای استاندارد سازی صفحات وب این سری از تگ های html که منسوخ شدند (تگ هایی مثل center و font ) دیگه توسط مرورگرها پشتیبانی نمیشه تا طراحان رو به استفاده از CSS برای این کار ملزم کنند .

شما هر کدوم از تگهای html ، متن ها ، عکسها و ... رو که درون تگ center قرار بدید ، اون شئ به صورت وسط چین در صفحه ی وب نماییش داده می شه . به طور مثال در کد زیر متن و عکس درون تگ center به وسط خط (از لحاظ افقی) منتقل میشن :

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

:: روش دوم : تعیین موقعیت افقی محتوای پاراگراف در html با استفاده از ویژگی align در تگ <p> :

در صفحات وب معمولا متن ها درون تگ <p> که همون تگ پاراگراف هست قرار می گیرند . برای اینکه چینش افقی متن یک پاراگراف تعیین بشه ، برای این تگ یک attribute به نام align تعریف شده که می تونه مقادیر center ، left و right رو دریافت کنه که به ترتیب متن درون پاراگراف رو چپ چین ، وسطچین و راست چین میکنه . البته ویژگی align مقدار justify رو هم میتونه بپذیره که باعث میشه اندازه ی تمام خط های متن درون پاراگراف یکسان بشه و متن از دو طرف صاف بشه و حالت منظم به خودش بگیره . در صورتی که برای ویژگی align مقداری تعیین نکنید به صورت پیشفرض براش مقدار left در نظر گرفته میشه .

تگ پاراگراف یک ویژگی دیگه به نام dir داره که مخفف direction (جهت) هست که برای پاراگراف هایی که متن درونشون از زبانهای راست به چپ نویس ، مثل فارسی هست باید مقدار rtl یعنی (right to left) و برای زبان هایی که نوشتن اونها از چپ به راست هست مثل انگلیسی باید مقدار ltr یعنی (left to right) رو بگیره . مقدار پیشفرض ویژگی dir هم که ltr هست ، یعنی مخصوص زبان هایی مثل انگلیسی .

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

در تگ p اگر ویژگی align و dir آورده نشه ، مقدار پیشفرضی که گفتیم (left و ltr) براش در نظر گرفته میشه !

:: روش سوم : استفاده از CSS برای تعیین موقعیت افقی محتوای تگ ها

امروزه دیگه سعی می شه تمامی خصوصیات و شیوه ی نمایش تگ ها رو با استفاده از CSS تنظیم کنند و شدیدا توصیه می شه که شما هم همین کارو انجان بدید . حتی برای پاراگراف ها !

:: ویژگی text-align در CSS دقیقا همون کار ویژگی align در پاراگراف ها رو انجام میده . همون مقادیر رو هم میتونه بپذیره . به جای ویژگی dir در تگ p هم یک ویژگی به نام direction در CSS وجود داره که این ویژگی هم مثل dir می تونه دو مقدار ltr و rtl رو بپذیره.

خوبی استفاده از ویژگی های CSS اینه که دیگه فقط مختص تگ p نیست و شما در هر تگی که این ویژگی ها رو به صورت CSS بکار ببرید ، میشه چینش محتوای درون اون تگ رو تعیین کرد .

همون چهار تا پاراگراف بالایی رو که با استفاده از ویژگی های html خود تگ p براتون آوردیم ، در زیر با استفاده از ویژگی های معادل در CSS نوشتم که از لحاظ شیوه ی نمایش و چینش هیچ فرقی با هم نمی کنند ولی استفاده از این روش استاندارد تر هست :

:: یه نکته اینکه برای استفاده از ویژگی های CSS درون تگ های html ، باید از ویژگی style درون اون تگ استفاده کرد که ویژگی های CSS مختلف رو که با علامت semi-colon (;) از هم جدا شدند به عنوان مقدار می پذیره . (برای آشنایی کامل با چگونگی استفاده از ویژگی های CSS پیشنهاد می کنم حتما مطلب شیوه های مختلف استفاده از CSS در صفحات html و Syntax و قواعد نوشتاری زبان CSS رو بخونید) .
:: برای تعیین چپنش افقی عکس ها ، می تونید اون رو درون یک تگ پاراگراف که چینش رو براش تعیین کردید استفاده کنید .

:: روش چهارم : استفاده از CSS برای تعیین موقعیت افقی المان های بلاکی مثل جدول ها و تقسیم بندی های صفحه (تگ div)

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

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

:: برای این منظور باید از ویژگی های CSS برای همون تگی که می خوایم چینشش رو تعیین کنیم ، استفاده کنیم . برای راست چین و چپ چین کردن یک المان بلاکی باید از ویژگی float در CSS که به معنی شناور بودن هست در خود تگ استفاده کنیم . ویژگی float دو مقدار left و right رو می پذیره که باعث شناور شدن المان بلاکی در چپ یا راست میشه . به طور مثال در کدهای زیر جدول آورده شده به سمت راست صفحه منتقل میشه (محتواش راست چین نمیشه ، خودش به راست میره) و تگ div آورده شده در سمت چپ شناور میشه .

در المان های بلاکی به صورت پیش فرض پهنای المان 100 درصد هست . برای همین من با استفاده از ویژگی width مقدار 200 پیکسل رو برای پهنای تگ جدول و div فوق تعیین کردم تا به چپ و راست رفتنشون مشخص باشه .

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

:: چون قصد دارم در آینده در مورد ویژگی margin و دو ویژگی padding و border در CSS یک مطلب مفصل بنویسم و تفاوت و کاربردهاشون رو بگم در اینجا مختصرا در مورد margin توضیح میدم . تگ margin چهار مقدار رو که با یک space از هم جدا میشن ، می پذیره که به ترتیب فاصله از بالا ، راست ، پایین و چپ تگ رو مشخص می کنه . به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف 10 پیکسل ، از راست 7 پیکسل از پایین 5 پیکسل و از چپ 3 پیکسل هستش :

همونطور که گفتم شما میتونید به جای واحد pixel از درصد استفاده کنید . با قرار دادن مقدار 50 درصد برای فاصله از چپ و راست ، المان رو به وسط میارید . همچنین برای انتقال یک المان بلاکی به وسط ، مرسوم هست که در تگ margin برای فاصله از بالا یک مقدار رو تعیین می کنند و به جای سه مقدار دیگه از کلمه ی auto استفاده می کنند . که اینکار به صورت پیشفرض فاصله از سه سمت دیگه رو 50% در نظر میگیره .
همون تگ پاراگراف فوق رو با یکی از دو شیوه ی زیر با استفاده از تگ margin میشه به وسط منتقل کرد :

:: برای به وسط آوردن جدول و تگ div ی که در بالا به چپ و راست شناورش کرده بودیم هم میشه به این شکل عمل کرد :

:: ضمنا بر اساس طراحی تون می تونید به جای 50 درصد از دو طرف ، از یک طرف مثلا 30 درصد و از طرف دیگه 70 درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %30 فاصله دادید مایل میشه !
امیدوارم که این مقاله هم بدردتون خورده باشه . برای دریافت مطالب دیگه یادتون نره مشترک فید ما بشید ، یا اینکه از باکس نارنجی رنگ زیر اشتراک ایمیلی بگیرید .

0
1
0
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها

33 دیدگاه برای این مطلب مطرح شده است . نظردهی برای این مطلب بسته شده است .
  • ‏‏

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

    با سپاس

    3
    • ‏‏
      میلاد حیدری(۲۱ شهریور ۱۳۹۱)

      مثل :

      به همین راحتی!

      0
      • ‏‏

        این طوری که دوتا textBox پشت هم میاد. من میخوام یک textBox بعد از یه متنی که با پاراگراف زدیم بیاد.

        0
        • ‏‏
          میلاد حیدری(۲۱ شهریور ۱۳۹۱)

          این کار برای تگ های پاراگرافیک ، div، هدر ها ، غیر ممکن است!

          0
        • ‏‏

          آها، ok . پس چطوری میشه همچین چیزی نوشت؟ مثلا: بنویسید “نام کاربری” و جلوش یک تکست باکس بیاد !

          ممنون از راهنماییتون.

          0
        • ‏‏
          میلاد حیدری(۲۴ شهریور ۱۳۹۱)

          0
  • ‏‏
    مجید(۵ مهر ۱۳۹۱)

    من برای راست چین کردن مشکل ظاهرا بزرگی داشتم و از روش دوم استفاده کردم (گزینه ی آخر) استفاده کردم. مشکلم هم حل شد.
    ممنونم ازت

    1
  • ‏‏

    با تشکر از ویبلاگ خوب تون من خیلی مشکلاتام حل شد

    0
  • ‏‏

    سلام
    مشکل بنده حل شد
    با استفاده از مطالب شما
    با تشکر بسیار :roll:

    1
  • ‏‏

    با درود بی کران
    به کارتان ادامه دهید فرزند سرزمین کورش.

    آموزش کار بزرگانست.

    بدرود

    -1
  • ‏‏

    thank you so much

    1
  • ‏‏

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

    0
    • ‏‏
      لقمان آوند(۲۸ خرداد ۱۳۹۲)

      0
  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    Username or Email :
    Password :
    Remember ?  
    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :