طراحی با DIV [بایگانی]

saviorperi

سه شنبه 17 اردیبهشت 1392, 15:46 عصر

سلام و خسته نباشید
دوستان عزیز من میخواستم یک وب سایت ساده طراحی کنم، به دلیل تاکیدهایی که در مورد استفاده از تگ های div به جای table شده تصمیم گرفتم با استفاده از این تگ ها طراحی رو شروع کنم، ولی بعد از کلی طراحی با یک مشکل ساده ولی مهم مواجه شدم، اجازه بدید با یک مثال مشکلم رو شرح بدم، کد زیر رو در دنظر بگیرید :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test</title>

<style type="text/css">
body{
direction:rtl;
}

#header{
width:900px;
min-height:200px;
margin:0px auto;
background:#00F;
}

#body{
width:900px;
background:#F00;
margin:0px auto;
}

#sidebar{
float:right;
width:220px;
min-height:100px;
background:#F0F;
}

#content{
float:left;
width:650px;
min-height:300px;
background:#6F0;
}

#footer{
width:900px;
min-height:100px;
margin:0px auto;
background:#666;
}

</style>
</head>
<body>
<div id="header">header</div>
<div id="body">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
</div>اگر این این صفحه رو مشاهده کنید متوجه میشید که تگ footer زیر تگهای content و sidebar یا همون تگ body قرار میگیره، اگر فایل پیوستی رو مشاهده کنید متوجه منظورم میشید، خوب حالا ممنون میشم اگر بدون ارجاع به دیگر آدرس ها لطف کنید راهنماییم کنید که مشکل از کجاست و چطور میشه حلش کرد ؟

r4hgozar

سه شنبه 17 اردیبهشت 1392, 15:57 عصر

سلام دوست عزیز.
مشکل در استایل فوتره.
وقتی یکی رو float.left داری اون یکی رو هم باید همین بدی تا مطابق هم قرار بگیرن. والی اون تو حالت عادی right میشه و کنارش قرار میگیره.
مشکل کدت با عوض کردن این درست میشه
#footer{
width:900px;
min-height:100px;
margin:0px auto;
float:left;
background:#666;
}

مثلا فکر کن شما 2 تا جعبه داری. یکی رو سمت چپ بزاری یکی رو راست. خوب اینها زیر هم قرار نمی گیرن.
اگه یکی رو سمت چپ گذاشتی و یکی دیگه رو هم بخوای سمت چپ بزاری مجبور میشی زیر اولی بزاری.

خودمم نفهمیدم چی گفتم اما امیدوارم تو متوجه شده باشی:لبخند:

موفق باشی

saviorperi

سه شنبه 17 اردیبهشت 1392, 16:50 عصر

سلام دوست عزیز.
مشکل در استایل فوتره.
وقتی یکی رو float.left داری اون یکی رو هم باید همین بدی تا مطابق هم قرار بگیرن. والی اون تو حالت عادی right میشه و کنارش قرار میگیره.
مشکل کدت با عوض کردن این درست میشه
#footer{
width:900px;
min-height:100px;
margin:0px auto;
float:left;
background:#666;
}

مثلا فکر کن شما 2 تا جعبه داری. یکی رو سمت چپ بزاری یکی رو راست. خوب اینها زیر هم قرار نمی گیرن.
اگه یکی رو سمت چپ گذاشتی و یکی دیگه رو هم بخوای سمت چپ بزاری مجبور میشی زیر اولی بزاری.

خودمم نفهمیدم چی گفتم اما امیدوارم تو متوجه شده باشی:لبخند:

موفق باشی

ممنون دوست عزیز، با تغییری که شما بیان کردین و با قرار دادن footer درون body مشکل حل میشه، ولی احتمال راه دیگری هم وجود داره، درسته ؟ آخه ما این float ها رو روی تگ های درون body اعمال کردیم، پس فکر کنم راهی باید وجود داشته باشه که این float ها روی تگ های بعد از بسته شدن body تاثیر نداشته باشن.

r4hgozar

سه شنبه 17 اردیبهشت 1392, 18:28 عصر

دوست عزیز شما اصلا نمی تونی بیرون body کدی رو بنویسی. کد های باید یا بین header باشه یا بین body..
درسته body به معنی بدنه هستش و heder سر صفحه ولی تمام کد هات باید بین این دو تگ باشه.
من با این مثالی که زدین دوباره کد های شما رو نگاه کردم.
شما کد هاتون یه مشکلی داره. البته مشکل نیست. اما تو کد نویسی حرفه ای معمولا اینطور صفحه رو تقسیم بندی نمی کنن.
نگاه کنین من یه مقدار توضیح میدم و بعد یه لینک میدم. با بررسی کردن اون لینک می تونین کامل تر مفهوم چیزی رو که میگم متوجه شین.

نگاه کنین. شما یه صفحه دارین که می خواین 2 قسمت داشته باشه. پس یک صفحه دارین ( یک دایو) که دو قسمت داره یا 3 قسمت ( یعنی 2 دایو داخل دایو کلی )
خوب یکی از این قسمت ها هدر که این هدر خودش 2 قسمته. یکی لوگو هدر و یکی هم لیست بالای صفحه ( پس تو دایو هدر که خودش داخل دایو کلی 2 تا دایو دیگه داریم)
خوب دایو دوم ما مریوط به content و دو طرف این کانتنت هم مثلا گزیده مطالب سمت چپش و آرشیو سمت راستش. ( میشه 3 تا دایو تو دایو دوم )
و دایو سوم هم یک قسمت ( میشه یک دایو داخل دایو سوم)

ما اول دایو کلی مربوط به کل صفحه.
بعد دایوهای مربوط به 3 قسمت اصلی
و در اخر هم دایو های مربوط به هر قسمت رو می نویسیم.
اینجوری میشه صفحت رو تقسیم کنی.

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

مشاهده (http://barnamenevis.org/showthread.php?350524-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%8C%DA%A9-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-CSS-HTML)

موفق باشی

moalla

سه شنبه 17 اردیبهشت 1392, 22:51 عصر

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

اموزش (http://quicklearn.ir/?q=node/14)

saviorperi

سه شنبه 17 اردیبهشت 1392, 23:04 عصر

دوست عزیز شما اصلا نمی تونی بیرون body کدی رو بنویسی. کد های باید یا بین header باشه یا بین body..
درسته body به معنی بدنه هستش و heder سر صفحه ولی تمام کد هات باید بین این دو تگ باشه.
من با این مثالی که زدین دوباره کد های شما رو نگاه کردم.
شما کد هاتون یه مشکلی داره. البته مشکل نیست. اما تو کد نویسی حرفه ای معمولا اینطور صفحه رو تقسیم بندی نمی کنن.
نگاه کنین من یه مقدار توضیح میدم و بعد یه لینک میدم. با بررسی کردن اون لینک می تونین کامل تر مفهوم چیزی رو که میگم متوجه شین.

نگاه کنین. شما یه صفحه دارین که می خواین 2 قسمت داشته باشه. پس یک صفحه دارین ( یک دایو) که دو قسمت داره یا 3 قسمت ( یعنی 2 دایو داخل دایو کلی )
خوب یکی از این قسمت ها هدر که این هدر خودش 2 قسمته. یکی لوگو هدر و یکی هم لیست بالای صفحه ( پس تو دایو هدر که خودش داخل دایو کلی 2 تا دایو دیگه داریم)
خوب دایو دوم ما مریوط به content و دو طرف این کانتنت هم مثلا گزیده مطالب سمت چپش و آرشیو سمت راستش. ( میشه 3 تا دایو تو دایو دوم )
و دایو سوم هم یک قسمت ( میشه یک دایو داخل دایو سوم)

ما اول دایو کلی مربوط به کل صفحه.
بعد دایوهای مربوط به 3 قسمت اصلی
و در اخر هم دایو های مربوط به هر قسمت رو می نویسیم.
اینجوری میشه صفحت رو تقسیم کنی.

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

مشاهده (http://barnamenevis.org/showthread.php?350524-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%8C%DA%A9-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-CSS-HTML)

موفق باشی

دوست عزیز خیلی ممنون، ولی منظور من خود تگ body نبود، منظورم تگی با آی دی body بود، فکر کنم تو کدی که نوشتم مسائلی که بهش اشاره کردین رو رعایت کردم، ولی باز آموزشی که معرفی کردین رو مطالعه میکنم

saviorperi

سه شنبه 17 اردیبهشت 1392, 23:16 عصر

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

اموزش (http://quicklearn.ir/?q=node/14)
دوست عزیز متاسفانه مثل اینکه آموزشی که معرفی کردید مشکل داره، فقط توضیحات آموزش هست و خبری از خود آموزش نیست

moalla

سه شنبه 17 اردیبهشت 1392, 23:23 عصر

عذر میخوام. تصحیح شد