سوال: قرار دادن تو در توی Div [بایگانی]

hesamy2004

سه شنبه 16 فروردین 1390, 08:29 صبح

دوستان در قسمت body صفحه یه Div قرار دادم و میخوام در داخل این دو div دیگه در کنار هم داشته باشم. یکی 75 درصد صفحه رو بگیره و دیگری 25 درصد باقیمانده رو. div اولی مطالب وبلاگه و div دومی هم سایدباره.

حالا مشکلم اینجاست که نمیدونم چره هرسه div رو روی همدیگه نشون میده! این کد CSS هست:

#body_container{
clear: both;
margin: 10px 160px;
border: 1px solid #3F0;
}

div.body_contents{
float: left;
margin-right: 25%;
border: 1px solid #960;
}

div.sidebar{
float: right;
margin-left: 75%;
border: 1px solid #F0F;
}

و شکل خروجی رو در ضمیمه مشاهده میکنید.

در قسمت کد هم اینو نوشتم:


<div id="body_container">
asdASDDS Dad sfsdf sfd fadf
sdf af
sf sdf sdfadfasdf
dfsdfasdf
sdfsdf adf
asdfsdf sdf sdf
dfsdfasdf sdf dfadfasdfasdf fdsasf fdsasdfadsf fdsasdfadsfd
<div class="body_contents">
body contents.
asdASDDS Dad sfsdf sfd fadf
sdf af
sf sdf sdfadfasdf
dfsdfasdf
sdfsdf adf
asdfsdf sdf sdf
dfsdfasdf sdf dfadfasdfasdf fdsasf fdsasdfadsf fdsasdfadsfd
</div>

<div class="sidebar">
sidebar. <br/>
asdASDDS Dad sfsdf sfd fadf
sdf af
sf sdf sdfadfasdf
dfsdfasdf
sdfsdf adf
asdfsdf sdf sdf
dfsdfasdf sdf dfadfasdfasdf fdsasf fdsasdfadsf fdsasdfadsfd
</div>

</div>

hesamy2004

سه شنبه 16 فروردین 1390, 09:03 صبح

در داخل سورس برنامه این خط رو اضافه کردم:

<br style="clear:both;" />

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

colors

سه شنبه 16 فروردین 1390, 09:32 صبح

درود

دوست من از اول یکی براتون ساختم - امیدوارم کارتونو راه بندازه.

کدهای CSS

<style>

#div1{ position:absolute; background:#CCC; width:900px; height:500px}
#div2 { position:relative; border:1px solid red; width:25%; height:100%; float:right}
#div3 { position: relative; border:1px solid blue; width:74%; height:350px}

</style>

اینم کدهای HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="div1">

<div id="div2">

</div>

<div id="div3">

</div>

</div>

</body>
</html>

رضا قربانی

سه شنبه 16 فروردین 1390, 09:49 صبح

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

دوست چرا از <TABLE> <TR> <TD> استفاده نمی کنی ، باعث نظم و هماهنگی قالبتون می شه و به نظر من شما هم از جداول استفاده کنی بهتره.
جدول رو 100% در نظر بگیرید و بقیه کار های لازم رو انجام بدید

hesamy2004

سه شنبه 16 فروردین 1390, 09:55 صبح

دمت گرم رفیق خیلی مرام گذاشتی. اصلاً انتظار نداشتم تینطوری وقت بزاری :تشویق:

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

#body_container{
height: auto;
width: auto;
position:relative;
margin: 10px 160px;
border: 1px solid #3F0;
}

div.body_contents{
height: auto;
width: auto;
float: left;
position:relative;
margin-right: 25%;
border: 1px solid #960;
}

div.sidebar{
height: auto;
width: auto;
margin-left: 75%;
border: 1px solid #F0F;
}

حالا یه مشکل جدید پیدا کرده همونطور که در تصویر ضمیمه میبینی متن div کوچیکتر خیلی پایین اومده و از سطر بعد از div قبلی شروع شده. چرا اینطوری شد؟

hesamy2004

سه شنبه 16 فروردین 1390, 09:58 صبح

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

دوست چرا از <TABLE> <TR> <TD> استفاده نمی کنی ، باعث نظم و هماهنگی قالبتون می شه و به نظر من شما هم از جداول استفاده کنی بهتره.
جدول رو 100% در نظر بگیرید و بقیه کار های لازم رو انجام بدید

ممنون از نظرت. راستش من چند وقتیه وارد دنیای طراحی سایت شدم. تو W3c نوشته بود برای طراحی صفحه از جدول استفاده نکنید و تا میتونید از div استفاده کنید. برای همین از این روش اومدم. اگه موفق نشدم همه چیز رو درست تنظیم کنم حتماً به این روش عمل میکنم.

بازم ممنون.

Spring_64

سه شنبه 16 فروردین 1390, 10:16 صبح

سلام div اول رو width=100% بذاريد و به جاي استفاده از margin براي دايو هاي داخلي width=25%,74%يا width=24%,75% قرار دهيد چون دايو ها در داخل هم قرار مي گيرند لازم است مجموعشان يك درصد كمتر از width در بر گيرنده شان باشد.:متفکر:
البته floatبراي دايو هاي داخلي فراموش نشود.

hesamy2004

سه شنبه 16 فروردین 1390, 11:40 صبح

سلام div اول رو width=100% بذاريد و به جاي استفاده از margin براي دايو هاي داخلي width=25%,74%يا width=24%,75% قرار دهيد چون دايو ها در داخل هم قرار مي گيرند لازم است مجموعشان يك درصد كمتر از width در بر گيرنده شان باشد.:متفکر:
البته floatبراي دايو هاي داخلي فراموش نشود.

ممنونم از لطفت. کد رو مثله زیر همونطور که اشاره کردی تغییر دادم:

#body_container{
margin: 10px 160px;
height: auto;
width: 100%;
clear: both;
border: 1px solid #3F0;
}

div.body_contents{
height: auto;
width: 74%;
float: left;
border: 1px solid #960;
}

div.sidebar{
height: auto;
width: 25%;
float: right;
border: 1px solid #F0F;
}

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

colors

سه شنبه 16 فروردین 1390, 11:57 صبح

خوب اینم هم نظر شخصیه دوستمونه

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

دوست چرا از <TABLE> <TR> <TD> استفاده نمی کنی ، باعث نظم و هماهنگی قالبتون می شه و به نظر من شما هم از جداول استفاده کنی بهتره.
جدول رو 100% در نظر بگیرید و بقیه کار های لازم رو انجام بدید
دوست من استفاده از تیبل غیر استاندارد ترین نحوه کد نویسی برای صفحات متن گذاری شده یا همون HTML است . و استفاده از پوزیشن باعث قابلیت انعطاف پذیری دیوها میشه و این بهترین روش برای ساخت همچین قالبی است.

و برای حل مشکل کدهای، CSS رو به این شکل زیر تغییر بده

#body_container{
height: auto;
width: 99%;
position:relative;
border: 2px solid #3F0;
position: absolute
}

div.body_contents{
height: auto;
width:25%;
float: right;
position:relative;
border: 1px solid #960;

}

div.sidebar{
height: auto;
width: 74%;
border: 1px solid #F0F;
position:relative;

}

سوالی بود در خدمتم

alibabaei2

سه شنبه 16 فروردین 1390, 18:05 عصر

وقتی به دو دیو float می دهید پایین اون ها یک تگ <p> بگذارید و به این تگ کلاس زیر را دهید . ببینید این کارو بکنید درست میشه
.clear
{clear:both;
}