رفع مشکل ارتفاع یکسان ستون ها در طراحی وب

این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با ۱۰۰% ارتفاع داشته باشم در لایه بندی چند ستونی.

چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:

تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
بیشتر از سه ستون
ارتفاع و عرض انعطاف پذیر

شرح مشکل از قرار زیر می باشد:

نمایش پیش فرض پس زمینه

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

و کد CSS تصویر بالا:

.content {
width:60%;
float:left;
padding: 20px 30px;
background: #fff;
color: #6d7072;
}
.sidebar {
width:20%;
float:left;
padding: 20px 30px;
background: #5f6673;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two {
width:20%;
float:left;
padding: 20px 30px;
background: #434750;
color: #ebeef3;
font-size: 90%;
}

راه حل: استفاده از المان های کاذب pseudo-elements

زمانی که در مورد ستون های با ارتفاع یکسان صحبت می نمایم قصد بر آورده کردن دو مورد را داریم:

ستون می بایست به اندازه محتوای خود فضا داشته باشد
ستون ها می بایست مستقل از محتوای وجود و در صورت نیاز ارتفاع فضای خود را افزایش دهند

چرا سئو مهم است؟

بخوانید

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

در مورد مثال ما، پس زمینه به اندازه فضای محتوا وجود دارد و فقط نیاز است پس زمینه می بایست تا انتهای فضای موجود کشیده شود. بنابراین در صورتی که قصد داریم پس زمینه ها تنظیمات ارتفاع متفاوتی داشته باشند، می توانیم ارتفاع را به گروه المان آن اختصاص دهیم. برای انجام این کار می بایست از pseudo-elements استفاده نماییم. برای هر کدام از ستون ها از :before استفاده می نماییم تا یک pseudo-element ایجاد گردد. با تلفیق مکان کامل absolute positionin و z-index پس زمینه را به صورتی در نظر می گیرم تا تمام بخش را در بر گیرد. کد CSS جدید از قرار زیر است:

.content, .content:before {
width:60%;
}
.content {
float:left;
padding: 20px 30px;
color: #6d7072;
}
.content:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}.sidebar, .sidebar:before {
width:20%;
}
.sidebar {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 60%;
background-color: #5f6673;
}

.sidebar_two, .sidebar_two:before {
width:20%;
}
.sidebar_two {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 80%;
background-color: #434750;
}

نمایش پیش فرض پس زمینه

راه حل: استفاده از المان های کاذب pseudo-elements

دیدگاهتان را بنویسید لغو پاسخ

سایر مقالات مرتبط :