متن چند ستونی طرح بندی دو ستونی

02.04.2019 تلویزیون (تلویزیون هوشمند)

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

V وبلاگ نویسکد را به ابزار HTML / Javascript در تب Design اضافه کنید. اگر از یکی از آنها استفاده می کنید موضوعات اخیردر وبلاگ خود (Emporio، Contempo، Soho، Notable)، سپس فراموش نکنید که قابلیت مشاهده ویجت را فعال کنید (چک در کنار "قابل مشاهده برای همه"، "نمایش ویجت" HTML / JavaScript "").
در وردپرسکد را به ویجت Text اضافه کنید.

نویسنده: ایوانووا ناتالیا

2019-03-03

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

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

خدمات کارت پستال آماده

کارت پستال 8 مارس را به صورت آنلاین ایجاد کنید

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

Canva یک ویرایشگر عکس کاربردی شناخته شده است. در اینجا الگوهای زیادی پیدا خواهید کرد. ثبت نام الزامی است.
چاپ کلیک کنید اگر کسب و کار خود را دارید، می توانید یک دسته کارت پستال با آرم و مخاطبین شرکت خود سفارش دهید. می توانید از مولد کارت پستال princlick استفاده کنید. تبلیغات عالی و ارزان.
Crello ویرایشگری است که نیاز به ثبت نام دارد. نگران نباشید به انگلیسی، در تنظیمات می توانید به روسی تغییر دهید.
یک کارت پستال آنلاین برای کسانی است که تخیل خوبی دارند، زیرا باید از ابتدا یک کارت پستال ایجاد کنید.
Mumotiki - آماده کنید عکس زیبا، و می توانید متن تبریک را در اینجا اضافه کنید. به هر حال، اگر فقط نیاز به اضافه کردن متن به تصویر دارید، می توانید با آن آشنا شوید.

امیدوارم با استفاده از یکی از این ژنراتورها بتوانید به اندازه کافی هشتم مارس را به بانوان خود تبریک بگویید!

نویسنده: ایوانووا ناتالیا

2019-02-17

محتوای مقاله:

گوگل پلاس در حال خاموش شدن است

سکو گوگل پلاسانتظارات توسعه دهندگان را برآورده نکرد و تا 2 آوریل 2019 به طور کامل حذف خواهد شد. آلبوم های مرتبط با او با او ناپدید می شوند. عکس های گوگلخواهد شد مجوز در دسترس نیستدر سایت هایی با حساب گوگل پلاس از 4 فوریه تبدیل شده است عملکرد در دسترس نیستپروفایل ها، کانال ها و صفحات گوگل پلاس ایجاد کنید. اگر حساب شما حاوی محتوای ارزشمندی است، می توانید دانلود کنید پشتیبان گیری.
اکثر تغییرات بر وبلاگ نویسانی که در بلاگ اسپات وبلاگ می نویسند تأثیر می گذارد. برخی از ابزارک های G +، نظرات G + و نمایه گوگل+ این در اعلان در قسمت مدیریت بلاگر آمده است:

پس از اعلام پایان کار Google API+، برای مارس 2019 برنامه ریزی شده است، در 4 فوریه تغییراتی در ادغام Google+ Blogger ایجاد می شود.
ویجت های +Googleطرح‌های وبلاگ دیگر از ویجت‌های دکمه 1+، دنبال‌کنندگان Google+ و نماد Google+ پشتیبانی نمی‌کنند. همه نمونه‌های این ویجت‌ها از وبلاگ شما حذف خواهند شد.
دکمه های +1دکمه‌های +1 و G + و پیوندهای ارسال به +Google در زیر پست‌های وبلاگ و در نوار پیمایش حذف خواهند شد.
لطفاً توجه داشته باشید که اگر از یک الگوی سفارشی استفاده می‌کنید توابع گوگل+، ممکن است نیاز به تغییر داشته باشد. برای راهنمایی با شخصی که این الگو را در اختیار شما قرار داده است تماس بگیرید.
نظرات +Google.پشتیبانی از نظرات از آن زمان متوقف خواهد شد با استفاده از گوگل+ و برای همه وبلاگ هایی که از این ویژگی استفاده می کنند، نظرات پیش فرض بلاگر بازیابی می شود. متأسفانه، نظرات ارسال شده از طریق +Google نمی توانند به Blogger منتقل شوند، بنابراین دیگر در وبلاگ شما ظاهر نمی شوند.

حذف نظرات گوگل پلاس

متأسفانه نظراتی که در سامانه منتشر شده اند به صورت غیر قابل برگشت حذف خواهند شد. شما فقط می توانید از همان ابزار استفاده کنید https://takeout.google.comبه Google + نظرات پشتیبان در رایانه خود بگویید. فقط یک بوت لودر برای آن ارائه نشده است و می توانید نظرات را فقط به صورت دستی و به روشی نسبتاً کج بازیابی کنید. چه خوب که به موقع به موقع می رسم.

نحوه جایگزینی نمایه گوگل با نمایه بلاگر

اگر در Blogspot وبلاگ نویسی می کنید، بهتر است اکنون از نمایه Google Plus خود به نمایه Blogger (برای کسانی که در آن زمان به Google Plus تغییر مکان داده اند) تغییر دهید. توصیه می کنم همین الان این کار را انجام دهید تا از موقعیت های پیش بینی نشده ای که ممکن است هنگام حذف رخ دهد جلوگیری کنید حساب های گوگلبه علاوه.

چگونه نمایه بلاگر خود را برگردانیم

انجام این کار در تنظیمات سرپرست Blogger آسان است:
تنظیمات -> تنظیمات سفارشی-> نمایه کاربر - در اینجا Blogger را انتخاب کنید

تغییرات خود را ذخیره کنید

انتقال به را تأیید کنید و نام یا نام مستعار خود را وارد کنید.

فراموش نکنید که یک آواتار در نمایه بلاگر خود آپلود کنید.

نحوه حذف نمایه گوگل پلاس

اگر تصمیم دارید برای همیشه از شر نمایه G + خلاص شوید، به صفحه گوگل پلاس خود بروید -> تنظیمات -> به پایین صفحه بروید -> حساب google plus را حذف کنید:

نویسنده: ایوانووا ناتالیا

امروز به شما خواهم گفت که CSS3 چیست، با چه چیزی خورده می شود، کجا آن را جستجو کنید، چگونه آن را به درستی تجویز کنید. اخطار میدم خودم به شکلی ساده برای عموم به نظرم میگم + مثال. پس بیایید از راه دور شروع کنیم.
CSS سبکی است که در آن ویژگی های یک شی نوشته می شود. این بدان معنی است که آنها در همه موتورهای موجود هستند، اگر نمی توانید آنها را پیدا کنید، یا آنجا را نگاه نمی کنید یا واقعاً نیستند ( سایت کج). معمولا از کجا پیدا می کنند؟ معمولاً این ریشه سایت، نام فایل style.css است، اگرچه در اصل، اگر فایل با این پسوند یک فایل سبک باشد، نام به اندازه پسوند css مهم نیست.
وبلاگ من را هم ببینید

کجا باید آنها را پیدا کرد؟

مسیر فایل در قالب بین اختصاص داده شده است

" />

در Blogspot کمی متفاوت است، در آنجا استایل ها درست در کد، قبل از تگ نوشته می شوند بین

سبک های اینجا

سبک ها چگونه به نظر می رسند؟

بیایید مثالی بزنیم:

#header (پس‌زمینه: #fff؛ اندازه قلم: 13 پیکسل؛ ارتفاع خط: 1.5؛ فونت خانواده: جورجیا، "Times New Roman"، "Bitstream Charter"، Times، سریف؛ رنگ: # 333;) .contacts ( موقعیت: مطلق؛ بالا: 20 پیکسل؛ سمت راست: 10 پیکسل؛)
سربرگ سایت

مخاطبین نویسنده سایت

شما می توانید سبک ها را در هر سایتی، فقط در یک مرورگر مشاهده کنید. اکنون می توانید با خواندن ظاهر آنها در این مقاله به راحتی آنها را تشخیص دهید.
همانطور که می بینید، سبک ها به روش های مختلفی نوشته می شوند. سبک‌هایی که با علامت پوند شروع می‌شوند با یک شناسه بلوک خاص مطابقت دارند، سبک‌هایی با یک نقطه مربوط به یک کلاس بلوک خاص هستند. هیچ راه دیگری وجود ندارد، سبک ها کار نمی کنند. می توانید به نام هایی که می خواهید فکر کنید، نکته اصلی این است که آنها با شناسه و کلاس نوشته شده در html مطابقت دارند. ویژگی های سبک باید در پرانتز و به دنبال آن یک دو نقطه ( به مثال بالا نگاه کنید، پارامتر نوشته شده و با نقطه ویرگول بسته می شود. مجاز است که در آخرین خاصیت در انتها نمی توانید نقطه ویرگول قرار دهید، فقط یک پرانتز بسته می شود.
این اتفاق می‌افتد که CSS مستقیماً در یک بلوک نوشته می‌شود، بدون اینکه آن را به یک فایل جداگانه خروجی دهیم:

سربرگ سایت

CSS در Blogspot

سبک ها را می توان متفاوت نوشت، بعداً به دلیل چیست توضیح خواهم داد. با باز کردن کد، می‌توانیم این را ببینیم (با دقت به استایل‌ها نگاه کنید، تگ‌های وبلاگ‌نویسی آشنا را خواهید دید که سبک‌ها را تعریف می‌کنند):

همانطور که می بینید، ویژگی style .هدر h1به طور جداگانه در بالا توضیح داده شده است. چگونه یک ملک را بفهمیم و پیدا کنیم؟ خیلی ساده، تو فونتیک پارامتر وجود دارد header.font، این چیزی است که ما به دنبال آن هستیم. آن را در گروه ویژگی "Blog Title" برای سبک ".header h1"، در داخل 2 ویژگی "header.font" و "header.text.color" پیدا کنید. بنابراین ما آنها را تغییر می دهیم. این کار برای مرورگر انجام می‌شود تا سبک‌ها را سریع بخواند، بنابراین درخواست‌های کمتری ایجاد می‌کند. پس از همه، ملک header.text.colorمی تواند در جای دیگری تکرار شود. زیر هنوز است header.shadow.offset.leftو دیگران، معنی در آنها یکی است، تکرار نمی کنم.
وقتی می گویند در css (یا سبک ها) جستجو کنید، پس ما در بین تگ ها به دنبال نقطه وبلاگ هستیم
و معمولا قبل از برچسب
مگر اینکه، البته، آنها به طور مستقیم در html نوشته شده باشند (مثال بالا، سبک ها در بلوک ها). در cms های دیگر، معمولاً همه چیز در یک فایل جداگانه با پسوند css. قرار می گیرد

نویسنده: ایوانووا ناتالیا

2019-02-15

این آخرین مقاله برای ارائه اطلاعات به روز در مورد حذف پیوندهای ناخواسته از قالب های Blogspot و همچنین تم های جدید Blogger نوشته شده است. همانطور که می دانید در سال 2018 تغییراتی در کدهای بلاگر ایجاد شد، بنابراین بسیاری از اقدامات با کد باید به روشی جدید انجام شود. به علاوه، موضوعات جدیدی ظاهر شده اند که به شکل متفاوتی شکل گرفته اند. در رابطه با این تغییرات به تحلیل مبحث حذف لینک ها می پردازیم.
می توانید وبلاگ خود را برای پیوندهای خارجی در سرویس های https://pr-cy.ru/link_extractor/ و https://seolik.ru/links بررسی کنید. به یاد داشته باشید که نه تنها صفحه اصلی وبلاگ، بلکه پست ها (پست ها) و صفحات (صفحه) را نیز بررسی کنید. تعداد زیادی از پیوندهای خارجی که برای نمایه سازی باز می شوند، منع می شوند.

چگونه پیوندها را از قالب پیش فرض قدیمی بلاگر حذف کنیم

با استفاده از قالب Simple به عنوان مثال.
این قالب ها بیشترین لینک های ورودی را ارائه می دهند. در وبلاگ آزمایشی خود، وقتی یک تم ساده را نصب کردم، آن را بررسی کردم و 25 پیوند ورودی در صفحه اصلی پیدا کردم که از این تعداد 14 پیوند ایندکس شده بودند.
یادآوری می کنم قبل از ایجاد تغییرات در کد قالب یک نسخه پشتیبان تهیه کنید!

حذف پیوند بلاگر - https://www.blogger.com/.این پیوند در ویجت Attribution گنجانده شده است. در برگه طراحی وبلاگ، به عنوان ابزار Attribution و. برای حذف آن، به تب "Theme" بروید -> HTML را تغییر دهید. با جستجوی ویجت ها (لیست ویجت ها)، Attribution1 را پیدا کنید و تمام کدها را به همراه قسمت پاورقی که در آن قرار دارد حذف کنید. کد جمع‌شده برای حذف به این صورت است:

و این هم کد کامل:

ما تغییرات را ذخیره می کنیم و وبلاگ را از نظر Attribution بررسی می کنیم.
مطمئناً نمادهای آچار و پیچ گوشتی را در وبلاگ خود برای ویرایش سریع ویجت دیده اید. هر یک از این نمادها یک پیوند خارجی به بلاگر را به همراه دارد. اکنون آنها با تگ nofollow بسته شده اند، اما هنوز باید از شر آنها خلاص شوید. ویجت ها را در تب Design ویرایش خواهید کرد.
در اینجا یک لیست جزئی از پیوندهایی است که در نمادهای آچار رمزگذاری شده اند (شناسه وبلاگ متعلق به شما خواهد بود)
- ویجت HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
- ویجت HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
- بایگانی وبلاگ: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
- میانبرهای وبلاگ: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
- پست های محبوب: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
خلاص شدن از شر همه این پیوندها آسان است. برچسب را در قالب وبلاگ خود پیدا کنید ... به تعداد دفعاتی که ویجت در وبلاگ شما وجود دارد ظاهر می شود. تمام رخدادهای تگ را حذف کنید .
پیوندهای ویرایش سریع پست وبلاگ (نماد "مداد") را حذف کنید. ویرایش پست‌ها را آسان‌تر می‌کند، اما تهدیدی را به عنوان پیوند خارجی فرم به همراه دارد: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
نحوه حذف:
روش 1. در برگه طراحی، مورد "پست های وبلاگ" را ویرایش کنید و تیک "نمایش" ویرایش سریع "چک باکس" را بردارید.
روش 2. برچسب را در قالب وبلاگ پیدا کنید و آن را حذف کنید. تغییرات خود را ذخیره کنید و وبلاگ خود را برای نماد و پیوند بررسی کنید.
نوار نوار را حذف کنید. ویجت ها را در قالب html وبلاگ navbar1 جستجو کنید و همه کدها را به همراه بخش حذف کنید.
برای مثال:

اکنون Navbar در وبلاگ پیوندهای خارجی ایندکس شده را ارائه نمی دهد، اما من معتقدم که این یک عنصر اضافی است که بار عملکردی را تحمل نمی کند و بهتر است آن را حذف کنید.
پیوندهای خارجی به تصاویر را حذف کنید. هنگامی که تصاویر را در یک پست وبلاگ آپلود می کنید، یک لینک به طور خودکار در آنها تعبیه می شود. برای حذف چنین پیوندهایی، باید همه پست های وبلاگ را ویرایش کنید. در حالت "مشاهده" و بیشتر به نماد "پیوند". اگر تصویر حاوی پیوند خارجی نیست، وقتی روی عکس در ویرایشگر پست کلیک می کنید، نماد "پیوند" غیرفعال است (هیچ نماد برجسته ای وجود ندارد).
پیوند به نمایه نویسنده وبلاگ را حذف کنید. نویسنده وبلاگ زیر پست را حذف کنید. برای انجام این کار، کد را پیدا کنید درست است، واقعیو true را با false جایگزین کنید. معلوم خواهد شد نادرست
پیوند ویجت "" را از نمایه سازی با تگ nofollow ببندید. اگر از ویجت نمایه در وبلاگ خود استفاده می کنید، از جستجوی سریع ویجت در قالب وبلاگ برای یافتن کد ابزار Profile1 استفاده کنید. شما باید کد ویجت را ویرایش کنید، به جای rel = 'author' در دو مکان rel = 'nofollow' و rel = 'nofollow' را به دو پیوند اضافه کنید. باید چیزی شبیه اسکرین شات بگیرید:

به عنوان مثال ویرایش نمایه Google Plus ساخته شده است. به عنوان یادآوری، گوگل پلاس در تاریخ 2 آوریل 2019 به تدریج حذف خواهد شد. بر این اساس، پس از این تاریخ، باید تغییرات دیگری در کد ویجت «درباره من» ایجاد کنید.
بررسی پیوندهای ورودی هر صفحه پست blogspot که دارای نظر است. کد موجود در قالب وبلاگ را پیدا و حذف کنید:

در تنظیمات وبلاگ، در امتداد مسیر تنظیمات وبلاگ -> سایر -> فید سایت -> اجازه دادن به فید وبلاگ، تنظیمات زیر را اعمال کنید:

پیوندهای خارجی را از الگوی پیش فرض جدید Blogger حذف کنید

استفاده از تم Notable به عنوان مثال

حذف منبع (پیوند زیر - Blogger Technologies)
Attribution1 را در قالب وبلاگ جستجوی ویجت (فهرست ابزارک ها) بیابید و کد را به همراه بخشی شبیه به الگوی قدیمی Blogger حذف کنید (به بالا 1 مراجعه کنید).
پیوند را از ویجت "گزارش سوء استفاده" حذف کنید. این ویجت ReportAbuse1 است. ما در جستجوی ویجت ها می یابیم:
کل کد به صورت زیر است:
ما صفحه پست وبلاگ را با نظرات بررسی می کنیم و پیوندها را با قیاس با الگوهای وبلاگ قدیمی حذف می کنیم (نگاه کنید به بالا - نقطه 8).
پیوندهایی را از پست های وبلاگ که در تصاویر پست تعبیه شده اند حذف کنید (نقطه 5 را ببینید).

نویسنده: ایوانووا ناتالیا 07/19/16 2.9K

در این مقاله قدم به قدم قوانین طراحی وب سایت دو ستونی را بررسی می کنیم. کدی که ارائه کرده‌ایم به شما امکان می‌دهد یک سرصفحه و پاورقی اضافه کنید که این دو ستون را شامل می‌شود.

معرفی

برای تکمیل وظایف این مقاله، باید هم مهارت کدنویسی HTML و هم CSS داشته باشید. اگر اینطور نیست، بهتر است از یک ویرایشگر بصری استفاده کنید.

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

استفاده از ویژگی float برای ایجاد دو ستون

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

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

کد HTML اصلی برای یک سایت با دو ستون

بخش HTML کد بسیار ساده است. ما فقط به دو div نیاز داریم، یکی برای هر ستون:

محتوا

کلمات "Navigation Menu" و "Content" فقط نشانگر نوار پیمایش جانبی و محتوای اصلی هستند. بعداً وقتی محتوای واقعی را در بلوک ها قرار دهید، این کلمات را حذف خواهید کرد. Div "container" یک بلوک حاوی دو ستون است. زمانی می توان از آن استفاده کرد که نیاز به اعمال سبک های خاصی برای هر دو ستون دارید.

کد CSS برای یک سایت با دو ستون

CSS زیر از درصد ("%") برای تعیین عرض هر دو ستون استفاده می کند. از آنجایی که آنها در واحدهای نسبی اندازه گیری می شوند، بزرگ یا کوچک می شوند تا کل پنجره مرورگر را بدون توجه به عرض آن پر کنند. به عنوان مثال، اگر اندازه پنجره مرورگر را تغییر دهید، الگو ستون را به گونه‌ای تنظیم می‌کند که تا حد امکان نزدیک به مرزهای پنجره باشد.

کد CSS بسیار ساده است:

#محتوا (شناور: سمت راست؛ عرض: 80٪؛) #navbar (شناور: سمت راست؛ عرض: 20٪؛)

طبق قوانین چیدمان سایت، کد CSS باید در قسمت سبک صفحه وب یا در یک فایل خارجی قرار گیرد.

نحوه عملکرد کد بالا در عمل را می توان در اینجا مشاهده کرد.

چگونه کار می کند: کد CSS توضیح داده شده است

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

در مثال بالا، "#content" ابتدا به سمت راست منتقل شده و روی 80% عرض پنجره مرورگر تنظیم شده است. قانون بعدی ما همچنین "#navbar" را از جریان سند خارج می کند و آن را در سمت راست قرار می دهد.

از آنجایی که ما قبلاً یک عنصر شناور در این موقعیت داریم. طبق قوانین مشخص شده برای چیدمان پاسخگو، بلوک دوم در صورت وجود فضای کافی در سمت چپ عنصر موجود قرار می گیرد. در غیر این صورت زیر اولین مورد قرار می گیرد. با در نظر گرفتن این موضوع، مجموع اضلاع هر دو بلوک باید 100% یا کمتر باشد، در غیر این صورت فضای کافی برای قرار دادن آنها در کنار هم نخواهیم داشت.

نحوه قرار دادن ستون ناوبری در سمت راست

کد بالا منوی پیمایش را در ستون سمت چپ قرار می دهد. اگر می خواهید منوی ناوبری در سمت راست قرار گیرد، کد را به صورت زیر تغییر دهید:

#محتوا (شناور: سمت چپ؛ عرض: 80٪؛) #navbar (شناور: سمت چپ؛ عرض: 20٪؛)

با کلیک بر روی دکمه جابجایی در ستون سمت راست منوی پیمایش، می توانید این کد را در عمل مشاهده کنید.

نحوه صحیح تغییر عرض

مطابق با قوانین فنی تعیین شده برای چیدمان، سبک های فوق عرض ستون کناری را 20% پهنای پنجره مرورگر و ستون محتوا را 80% تنظیم می کنند که به 100% می رسد.

اگر قصد دارید این مقادیر را تغییر دهید، مطمئن شوید که مجموع آنها برابر یا کمتر از 100٪ باشد، در غیر این صورت مرورگر یک ستون را زیر ستون دیگر قرار می دهد.

اگر یکی از ستون ها زیر دیگری حرکت می کند: چگونه آن را تعمیر کنیم

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

حتی اگر از مقادیر من "20%" و "80%" استفاده کنید، ممکن است این اتفاق بیفتد. برای مثال، اگر برای یک یا هر دو ستون حاشیه، حاشیه و بالشتک اضافه کنید. عرض این ستون ها نیز افزایش می یابد و باعث می شود که مجموع از 100 درصد فراتر رود.

قوانین چیدمان و سازگاری بین مرورگرها به دو روش برای حل این مشکل اشاره دارد:

عرض ستون ها را کاهش دهید تا مرورگر آنها را به شکل دلخواه شما ارائه کند. اما به یاد داشته باشید که درصدها واحدهای نسبی هستند. به عرض پنجره مرورگر کاربر گره خورده است. بنابراین اگر طرح را روی سیستم خود آزمایش کرده باشید و متوجه شده اید که وقتی 10 پیکسل به padding-left به یکی از ستون ها اضافه می کنید و عرض را 1٪ کاهش می دهید، همه چیز خوب کار می کند، نمی توانید نتیجه بگیرید که 1٪ = 10 پیکسل. به عبارت دیگر، 1% از 1024 پیکسل با 1% از 1920 پیکسل متفاوت است و غیره. اطمینان حاصل کنید که تفاوت در عرض پنجره در سایر مرورگرها و مورب های صفحه را در نظر گرفته اید.
راه حل ترجیحی من این است که یک DIV تودرتو در داخل بلوک های "#navbar" و "#content" ایجاد کنم و تمام padding ها، حاشیه ها، حاشیه ها و محتوای واقعی را در آن قرار دهیم. بنابراین، برای بلوک های بیرونی، می توانید 20% و 80% قدیمی را بدون نگرانی در مورد تنظیمات حاشیه، بالشتک و غیره رها کنید.

به عنوان مثال، در سایت دمو با دو ستوناز HTML زیر برای ایجاد یک بلوک DIV تودرتو استفاده می کند:

محتوا

ویژگی های زیر را به سبک های CSS که قبلا برای «#innercontent» و «#innernavbar» نوشته اید اضافه کنید:

#innercontent (padding-left: 10px; padding-right: 10px;) #innernavbar (padding-left: 5px; padding-right: 5px;)

CSS برای "#content" و "#navbar" همان چیزی است که در نیمه اول این مقاله توضیح داده شد.

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

نحوه اضافه کردن سرصفحه و پاورقی سایت که در هر دو ستون کشیده می شود

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

نحوه تقسیم متن به دو ستون با استفاده از جدول

بنا به درخواست کارگران ...

1. من همیشه از ویرایشگر پیشرفته استفاده می کنم. پنجره ای که پیام در آن ایجاد می شود به این صورت است.

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

3. پنجره ای باز می شود که در آن می توانید پارامترهای جدول را تنظیم کنید. من تعداد خطوط را تغییر دادم، به جای 3 پیش فرض، 1 را تنظیم کردم. من حاشیه ها را دوست ندارم، بنابراین شماره 1 را در کادر "اندازه حاشیه" حذف کردم، جدول من اکنون هیچ حاشیه ای نخواهد داشت. و عرض را به جای 500 تغییر دهید، آن را روی 800 پیکسل قرار دهید.

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

5. در ادامه جدول ایجاد شده قابل ویرایش است. برای انجام این کار، منوی زمینه را با دکمه سمت راست ماوس فراخوانی می کنم. "ویژگی های جدول" به شما امکان می دهد پارامترهای جدول تنظیم شده در همان ابتدا را ویرایش کنید.

6. و «ویژگی های سلول» امکان تغییر پارامترهای هر ستون یا هر سطر را، در صورتی که بیش از یک ردیف در جدول قرار دهیم، ممکن می سازد. به عنوان مثال، می توانید اندازه هر سلول را تغییر دهید، آن را به پیکسل یا درصد تنظیم کنید.

7. در اینجا تصمیم گرفتم تصویری بین دو بیت شعر اضافه کنم. برای انجام این کار، در منوی زمینه، "ستون" - "درج ستون بعد" را انتخاب کنید، اگر مکان نما در این لحظه در ستون اول است. یا اگر مکان نما در ستون دوم باشد، "درج ستون قبل" است

8. من یک عکس را با استفاده از "آپلود دسته ای و دکمه" افزودن به پیام اضافه می کنم. "مکان نما باید در جایی باشد که می خواهید تصویر را درج کنید.

9. عکس طبیعتاً اندازه ای که من نیاز دارم نیست.

10. با انتخاب تصویر و فراخوانی منوی زمینه با دکمه سمت راست، رفع آن آسان است. در منوی زمینه، "ویژگی های تصویر" را انتخاب کنید.

11. عرض را از 700 به 300 تغییر می دهم. ارتفاع به طور خودکار تغییر می کند، فقط باید مطمئن شوید که قفل نشان داده شده با فلش بسته است تا نسبت های تصویر حفظ شود و تصویر مخدوش نشود.

13. پیام را در یک پیش نویس ذخیره می کنم تا نتیجه را بررسی کنم.

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

از آنجایی که جدول توسط ردیف ها تشکیل می شود و نه توسط ستون ها، بنابراین برای تغییر ظاهر ستون ها، باید تقریباً برای هر سلول یک سبک تنظیم کنید. در این مورد، استفاده از کلاس های مختلف راحت است - یکی برای سلول های ستون های زوج و دومی برای افراد فرد. در شکل شکل 1 جدولی را نشان می دهد که به این صورت تشکیل شده است.

رنگ ستون‌های فرد را می‌توان با افزودن ویژگی‌های سبک به انتخابگر TABLE تنظیم کرد و برای ستون‌های زوج یک کلاس جدید معرفی می‌کنیم، اجازه دهید آن را زوج بنامیم. ستون اول معمولاً برای سرفصل‌های سطر استفاده می‌شود، بنابراین منطقی است که سبک آن با بقیه سلول‌ها متفاوت باشد. در این صورت کلاس دیگری را معرفی می کنیم که آن را lc می نامیم و تراز سمت چپ و رنگ متن را برای آن تعریف می کنیم (مثال 1). باقی می ماند تا سلول های ستون اول به تگ اضافه شوند کلاس ویژگی = "lc"، و برای سلول های ستون های زوج کلاس = "حتی".

مثال 1. ستون هایی با رنگ های مختلف

جدول

	2004	2005	2006
یاقوت سرخ	43	51	79
زمرد	28	34	48
یاقوت کبود	29	57	36

مثال از یک خط دوتایی برای جدا کردن اولین ردیف سرصفحه از داده های جدول استفاده می کند. با افزودن یک ویژگی border-bottom به انتخابگر TH به دست می آید.

بیایید راه دیگری برای شکل دادن به ظاهر ستون ها در نظر بگیریم - نه تنها با استفاده از رنگ های مختلف پس زمینه، بلکه با استفاده از خطوط بین ستون ها (شکل 2).

ساختار کد عملاً همان چیزی است که در مثال 1 نشان داده شده است. یعنی برای سلول های ستون های زوج از کلاس زوج و برای ستون اول از کلاس lc استفاده می کنیم. برای تنظیم خط بین ستون ها، یک ویژگی حاشیه چپ به انتخابگر TD اضافه کنید که یک خط در سمت چپ سلول ایجاد می کند. با این حال، این یک خط غیر ضروری در سمت چپ در ستون اول ایجاد می کند، بنابراین از border: none برای کلاس lc استفاده می کنیم، این ویژگی مرزهای غیر ضروری را حذف می کند (مثال 2).

مثال 2. خطوط بین ستون ها

جدول

	2004	2005	2006
یاقوت سرخ	43	51	79
زمرد	28	34	48
یاقوت کبود	29	57	36

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

در ادامه مبحث جدید در CSS3: چند ستونی، فلکس باکس، طرح‌بندی شبکه‌ای، ترجمه مقاله را با بررسی عمیق‌تر ویژگی چند ستونی با مثال‌های ساده و گویا به شما پیشنهاد می‌دهم.

حتی روزنامه‌ها و مجلات نیز در عمل ثابت کرده‌اند که متنی که به چند ستون تقسیم شده است بسیار آسان‌تر درک می‌شود. در صفحات وب، نمایش محتوا به این روش تا همین اواخر مشکل بود، به جایی رسید که طراح چیدمان متن را به چندین div تقسیم کرد، اما کارها با ماژول چند ستونی CSS3 بسیار آسان تر می شوند.