PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : مشکل با 3 ستون در کدنویسی قالب!



DualEngineers
2016/05/30, 02:38 PM
سلام دوستان، من یک قالب خیلی ساده (برای نمونه هستش) کدنویسی کردم ولی قسمت 3 ستون قالبم مشکل داره.
الان ستون وسط به ستون سمت چپ نچسبیده! میخوام ستون سمت چپ به ستون وسط بچسبه. چی کار کنم؟
کدهای قالب رو اینجا میزارم لطفا هر کسی میدونه راهنمایی کنه. ممنون.



<html>
<head>
<style>
#sidebar1 { background: #d72727; width: 25%; padding:5px; float: right; }
#sidebar2 { background: #d72727; width: 25%; padding:5px; float: left; }
#content { background: #ff9d41; width: 45.55%; padding: 14px; float: right; }
#menu { background: #ffff99; height: 30%; height: 20%;}
.cl { clear: both; }
</style>
</head>
<body dir="rtl">
<div id="main">
<div id="sidebar1"><p>ستون سمت راست</p></div>
<div id="content">
<div id="menu"><p>منوی سایت</p></div>
<p>محتوای سایت</p>
</div>
<div id="sidebar2"><p>ستون سمت چپ</p></div>
<div class="cl"></div>
</div>
</body>
<html>

Inna
2016/05/30, 04:17 PM
درود
#sidebar2 ، پس از float عبارت right بنویسید
http://up.vbiran.ir/uploads/11055146461021923380_float-right.png

DualEngineers
2016/05/30, 06:33 PM
مرسی از کمکتون، فقط اين float کارش دقيقا چيه؟
من الان float: right; رو براي 3 تا ستون گذاشتم، الان 3 تا ستون به هم چسبيدن، فقط حالا ميخوام اين 3 تا ستون دقيقا وسط صفحه ام باشند
ولي الان يک مقدار متمايل به سمت راست رفتند و سمت چپ يک مقدار فضاي بيشتري خالي داره.
ممنون میشم راجع به این مشکل هم اگه ممکنه راهنمایی کنید.

Inna
2016/05/30, 08:40 PM
Vakili

Vakili
2016/05/30, 08:44 PM
مرسی از کمکتون، فقط اين float کارش دقيقا چيه؟
من الان float: right; رو براي 3 تا ستون گذاشتم، الان 3 تا ستون به هم چسبيدن، فقط حالا ميخوام اين 3 تا ستون دقيقا وسط صفحه ام باشند
ولي الان يک مقدار متمايل به سمت راست رفتند و سمت چپ يک مقدار فضاي بيشتري خالي داره.
ممنون میشم راجع به این مشکل هم اگه ممکنه راهنمایی کنید.

اول تمامی id هایی که ساختید و استفاده کردید رو به class تغییر بدید !
id در واقع برای استفاده دیگریست ...


سپس در کلاس content پهنا رو 50% کنید
و به کلاس main مقدار padding:0;margin:auto; بدهید
همچنین توجه کنید به کلاس menu دوبار مقدار height داده اید که طبیعتا فقط دومی اجرا می شود اولی را حذف کنید


اول تمامی id هایی که ساختید و استفاده کردید رو به class تغییر بدید !
id در واقع برای استفاده دیگریست ...


سپس در کلاس content پهنا رو 50% کنید
و به کلاس main مقدار padding:0;margin:auto; بدهید
همچنین توجه کنید به کلاس menu دوبار مقدار height داده اید که طبیعتا فقط دومی اجرا می شود اولی را حذف کنید

پیرو پاسخ قبلی:
الآن توی کد هاتون توجه کردم دیدم که به sidebar1 و sidebar1 و content مقداری padding دادید.
این کار برای پروژه فعلیتون اشتباست و باید padding ها رو به div داخلی منتقل کنید !
یعن به این صورت:
ابتدا padding های این سه class رو حذف کنید.
سپس درون هر div با این class ها یک div دیگر بسازی و مقدار padding رو به اون div بدید.
محتوای ستون ها رو هم طبیعتا باید درون div جدید که ساختید قرار بدید.

این یک نمونه از کد خودتون با اصلاحاتی که گفتم:
Edit fiddle - JSFiddle (https://jsfiddle.net/2255dmf7/)

DualEngineers
2016/05/30, 10:23 PM
سپاسگزارم از پاسخ خوبتون، فقط من الان بخوام هدر و فوتر رو هم اضافه کنم مثل کدهای زیر، یک مشکلی داره اونم اینکه رنگ بکگراند برای هدر و فوترم رو نمایش نمیده! نمیدونم مشکل چیه!
بی زحمت کدهایی رو که نوشتم چک کنید و راهنمایی کنید. ممنون.



<!doctype html>
<html>
<head>
<title>Example Page Site</title>
<style>
body {padding:9; margin:auto; margin: 0; }
.hefo { background: #fffbd0; height: 100%; width: 100%;}
.sidebar1 { background: #d72727; width: 25%; float: right; }
.sidebar2 { background: #d72727; width: 25%; float: left; }
.content { background: #ff9d41; width: 50%; float: right; }
.menu { background: #ffff99; height: 20%;}
.cl { clear: both; }
.padding{padding:20px;}
</style>
</head>
<body dir="rtl">
<div class="header" class="hefo"><div class="padding"><p>هدر سایت</p></div></div>
<div class="main">
<div class="sidebar1"><div class="padding"><p>ستون سمت راست</p></div></div>
<div class="content">
<div class="padding"><div class="menu"><p>منو های سایت</p></div><p>محتوای سایت</p></div>
</div>
<div class="sidebar2"><div class="padding"><p>ستون سمت چپ</p></div></div>
<div class="cl"></div>
</div>
<div class="footer" class="hefo"><div class="padding"><p>فوتر سایت</p></div></div>
</body>
</html>

Vakili
2016/05/31, 08:21 AM
مشکل اینجاست که شما دو بار مقدار class به div ها دادید که این امکان پذیر نیست.
اگر میخواهید 2 class به div بدهید باید مثل این نمونه قرار بدید:


<div class="header hefo">


Edit fiddle - JSFiddle (https://jsfiddle.net/9ugt9yha/)