مشکلی در div

Printable View

16-02-2012, 15:31
mosi2007

مشکلی در div

سلام دوستان
یه مشکل ساده برام پیش اومده اگه میشه کمک کنید
من 2 تا div تو صفحه دارم که میخوام با css کاری کنم که دیو اولی 35% و دیو دومی 65% صفحه را بگیرد یعنی یه صفحه به دو قسمت تقسیم شود ولی نمیتونم وقتی صفحه را اجرا میکنم دیو دومی در یه ردیف پایینتر قرار میگیره
که من نمیخوام اینطوری بشه میخام هر دو دیو در یک راستا باشه فقط صفحه را به 2 قسمت تقسیم کنه
اینم کد html
, css
[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>d</title>
<style type="text/css">
#profile
{margin-top:30px;
width:35%;
background-color:#0F0;
margin-left:0px;

}
#chat
{margin-top:30px;
width:65%;
background-color:#000099;
margin-right:0px;
margin-left:35%;
}

</style>
</head>

<body>

<div id="profile">
div1
</div>
<div id="chat">
div2
</div>

</body>
</html>[/HTML]
16-02-2012, 23:44
Mr.Mazmamfi

سلام
کافی بود فقط یه Position میدادی .
به این صورت :

[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>d</title>
<style type="text/css">
#profile
{margin-top:30px;
position:absolute;
width:35%;
background-color:#0F0;
margin-left:0px;

}
#chat
{margin-top:30px;
position:absolute;
width:65%;
background-color:#000099;
margin-right:0px;
margin-left:35%;
}

</style>
</head>

<body>

<div id="profile">
div1
</div>
<div id="chat">
div2
</div>

</body>
</html>[/HTML]
18-02-2012, 13:30
tasnim68

position راه مناسبی نیست؛ اصولا برای طراحی tableless از ویژگی float استفاده می کنند.

کد:

float: right; یا float: left;
18-02-2012, 23:01
peyman1987

نقل قول:

نوشته شده توسط tasnim68 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

position راه مناسبی نیست؛ اصولا برای طراحی tableless از ویژگی float استفاده می کنند.

کد:

float: right; یا float: left;

یا این گفته موافق نیستم. هیچ دلیلی برای خوب نبودن Positioning وجود نداره و کلا استفاده از Position و Float توی جاهای مناسب خودشون درسته و Tableless کار کردن اسمش روشه یعنی از Table برای بستن ساختار صفحه استفاده نشه!

راجع به مشکل دوستمون هم کد خودتون درست بود فقط یه Float باید بهش اضافه میشد و Margin هم حذف میشد:

[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>
<style type="text/css">
#profile{
margin-top:30px;
width:35%;
background-color:#0F0;
float: left;
}

#chat{
margin-top:30px;
width:65%;
background-color:#000099;
float: left;
}
</style>
</head>
<body>
<div id="profile">div1</div>
<div id="chat">div2</div>
</body>
</html>
[/HTML]
19-02-2012, 02:13
tasnim68

نقل قول:

نوشته شده توسط peyman1987 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

کلا استفاده از Position و Float توی جاهای مناسب خودشون درسته

خب دقیقا عرض بنده هم همینه!
قابله هم واسه غذا درست کردنه ماهیتابه هم؛ ولی سرخ کردن تو قابله و خورشت گذاشتن تو ماهیتابه خنده داره!
ایشون می خوان دو تا div رو کنار هم داشته باشن و این یعنی طراحی tableless و هر جای دنیا برید برای این کار ویژگی float رو توصیه می کنن. البته این تجربه شخصی منه و چیزیه که من یاد گرفتم، شاید استفاده از position هم برای این کار رایج باشه که البته من برخورد نکردم.
22-02-2012, 01:09
peyman1987

نقل قول:

نوشته شده توسط tasnim68 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

خب دقیقا عرض بنده هم همینه!
قابله هم واسه غذا درست کردنه ماهیتابه هم؛ ولی سرخ کردن تو قابله و خورشت گذاشتن تو ماهیتابه خنده داره!
ایشون می خوان دو تا div رو کنار هم داشته باشن و این یعنی طراحی tableless و هر جای دنیا برید برای این کار ویژگی float رو توصیه می کنن. البته این تجربه شخصی منه و چیزیه که من یاد گرفتم، شاید استفاده از position هم برای این کار رایج باشه که البته من برخورد نکردم.

ولی من باز هم منافات استفاده از position و پیاده سازی tableless رو متوجه نمیشم و اصلا به هم ربطی ندارن و دو تا مقوله جدا هستن. بهرحال مشکل دوستمون به هر دو صورت حل شده! :46: