PDA

View Full Version : مبتدی: مشکل در ساخت قالب با div



mohammadreza65
چهارشنبه 27 آذر 1392, 08:20 صبح
سلام چرا وقتی با div میخوام قالب سایتو درست کنم این div ها همش زیر هم قرار میگیرن ؟ چه چیزش باید تنظیم شه که 3 تا ستون کنار هم قرار بگیرن ؟

p30online
چهارشنبه 27 آذر 1392, 09:32 صبح
سلام دوست عزیز:

هر کدوم را خواستی خاصیت



float:right;

را بهش بده!
و وقتی خواستی پا صفحه را درست کنی این خاصیت را بهش بده !



clear:both;

p30online
چهارشنبه 27 آذر 1392, 09:58 صبح
دوست خوب این هم نمونه!



<!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>
<style>
body{
direction:rtl;
}
#wrapper{
background:#6C0;
width:900px;
height:600px;
margin:0 auto;
}
#header{
width:100%;
background:#FF8000;
height:100px;
}
#sidebar-right{
float:right;
background:#603;
height:500px;
width:160px;
}
#content{
background:#036;
float:right;
height:500px;
width:580px;
}
#sidebar-left{
float:right;
background:#603;
height:500px;
width:160px;
}
#footer{
clear:both;
height:100px;
background:#0F0;
}

</style>
</head>

<body>
<div id="wrapper">

<div id="header">
header
</div>
<div id="sidebar-right">
right
</div>
<div id="content">content</div>
<div id="sidebar-left">left</div>
<div id="footer">foooter</div>
</div>

</body>
</html>

khateratean
چهارشنبه 27 آذر 1392, 15:49 عصر
برای طراحی صفحه با عنصر <div> به چندتا چیز باید اشراف داشته باشید:
1- مفهوم عناصر block و inline: عناصر block عناصری هستند که یک خط را کامل به خود اختصاص می دهند(مانند div) و بر عکس عناصر inline که بقیه عناصر را در کنار خود می پذیرند.
توضیحات بیشتر در لینک روبرو http://beyamooz.com/html/137-basic/506-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-Block
2- خاصیت float در CSS: باعث می شود که عنصر به سمت راست یا چپ منتقل شود و عناصری که بلافاصله بعد از آن قرار دارند در کنارش (یعنی در همان خط) قرار بگیرند.
توضیحات بیشتر در لینک روبرو http://beyamooz.com/css/87-advance/293-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-Float-%D8%AF%D8%B1-CSS
3- خاصیت clear دز CSS: باعث می شود که اگر عنصر جاری بعد از یک عنصر float شده قرار دارد، از قانون float پیروی نکند و نهایتاً یک خط را کامل به خود اختصاص دهد. (البته اگر با مثلاً با مقدار both تنظیم شده باشد)
حالا که با این مفاهیم آشنا شدید برای طراحی صفحه با استفاده از div به لینک زیر مراجعه کنید:
http://beyamooz.com/html/137-basic/507-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-%D8%AF%D8%B1-HTML