0

لایه بندی در html با استفاده از div

24 خرداد 1393

لایه بندی در html با استفاده از div

لایه بندی در اچ تی ام ال

اگر به صفحات وب به دقت نگاه کنید می بینید که می توان قسمت های آن ره به مستطیل های بزرگ و کوچک و تو در تو تقسیم کرد.

به تصویر زیر نگاه کنید.

در این مطلب قصد داریم این لایه بندی را با هم با استفاده از تگ div و دستورات Css ایجاد کنیم.

اگر به دقت به این تصویر نگاه کنیدمی بینید که یک مستطیل بزرگ با رنگ خاکستری وجود دارد که کل صفحه را گرفته یک مستطیل کوچکتر در وسط با رنگ تیره تر وجود دارد و در داخل آن مستطیل هایی تیره تری وجود دارد که این ها را به ترتیب ایجاد می کنیم.

متسطیل بزرگ همان تگ body می باشد و برای ایجاد مستطیل کوچکتر وسط یک تگ div با آی دی wrapper ایجاد می کنیم(مقدار صفت آی دی به اختیار خود شماست شما می توانید هر مقدار که خواستید انتخاب کنید).

html
<!doctype html>
<html>
<head>
	<title>div layout</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div id="wrapper"></div>
</body> 
</html>
css
body{
	padding: 0px;
	margin: 0px;
	background: #e5eaf0;
}
#wrapper{
	width: 500px;
	margin: 0 auto;
	min-height: 600px;
	background: #ccd6e0;
}
 

نتیجه

اگر ملاحظه کنید در داخل  تگ div#wrapper به طور کلی 4 ردیف افقی وجود دارد(فعلا آنها را با رنگ نشان می دهیم ولی درپایان این رنگ بک گراند را به مستطیل آخر می دهیم) .

 html

<!doctype html>
<html>
<head>
	<title>div layout</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div id="wrapper">
		
		<div id="header"></div>
		<div id="content"></div>
		<div id="footer"></div>
		<div id="copyright"></div>
	</div>
</body> 
</html>

 css

body{
	padding: 0px;
	margin: 0px;
	background: #e5eaf0;
}
#wrapper{
	width: 500px;
	margin: 0 auto;
	min-height: 600px;
	background: #ccd6e0;
	overflow: hidden;
}
#content,
#footer,
#copyright,
#header{
	margin:10px;
	background: #a5afba;
	min-height: 150px;
}
 

نتیجه

تگ div#header کامل شد الان نوب تگ div#content  می باشد در دخل این قسمت یک ستون سمت چپ داریم و یک ستون سمت راست الان این دو ستون را ایجاد می کنیم.

html
<!doctype html>
<html>
<head>
	<title>div layout</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div id="wrapper">
		
		<div id="header"></div>
		<div id="content">
			
			<div id="left"></div>
			<div id="right"></div>
		</div>
		<div id="footer"></div>
		<div id="copyright"></div>
	</div>
</body> 
</html>
 css
body{
	padding: 0px;
	margin: 0px;
	background: #e5eaf0;
}
#wrapper{
	width: 500px;
	margin: 0 auto;
	min-height: 600px;
	background: #ccd6e0;
	overflow: hidden;
}
#content,
#footer,
#copyright,
#header{
	margin:10px;
	background: #a5afba;
	min-height: 150px;
	overflow: hidden;
}
#content{
	background: none;
}
#left{
	width: 150px;
	float: left;
	background: #a5afba;
	min-height: 400px;
}
#right{
	width: 320px;
	float: right;
	background: #a5afba;
	min-height: 400px;
}

نتیجه

 

برای باقی مستطیل های تو در تو همین طور ادامه می دهیم در نهایت کد ما این گونه خواهد بود.

html

<!doctype html>
<html>
<head>
	<title>div layout</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div id="wrapper">
		
		<div id="header"></div>
		<div id="content">
			
			<div id="left"></div>
			<div id="right">
				<div id="right-top">
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div id="right-bottom"></div>
			</div>
		</div>
		<div id="footer">
			<div></div>
			<div></div>
		</div>
		<div id="copyright"></div>
	</div>
</body> 
</html>
css
body{
	padding: 0px;
	margin: 0px;
	background: #e5eaf0;
}
#wrapper{
	width: 500px;
	margin: 0 auto;
	min-height: 600px;
	background: #ccd6e0;
	overflow: hidden;
}
#content,
#footer,
#copyright,
#header{
	margin:10px;
	background: #a5afba;
	min-height: 150px;
	overflow: hidden;
}
#footer,
#content{
	background: none;
}
#left{
	width: 150px;
	float: left;
	background: #a5afba;
	min-height: 400px;
}
#right{
	width: 330px;
	float: right;
	min-height: 400px;
}
#right-top div{
	width: 100px;
	float: right;
	margin-left: 10px;
	height: 100px;
	background: #a5afba;
}
#right-bottom{
		background: #a5afba;
		width: 320px;
		float: right;
		height: 290px;
		margin-top: 10px;
}
#footer{
	margin-left: 0px;
}
#footer div{
	width: 235px;
	float: left;
	margin-left: 10px;
	height: 150px;
	background: #a5afba;
}

نتیجه

صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

دیدگاه‌ها

امین فراست
امین فراست یکشنبه, 27 مهر 1393 19:34 پاسخ دادن
سلام
مطلبت خیلی به دردم حورد ولی حیف که کمی دیر پیدات کردم چون دیگه یاد گرفته بودم
ولی بازم ممنون
صادق جعفری
صادق جعفری دوشنبه, 28 مهر 1393 01:49 پاسخ دادن
امین عزیز
ممنون که به وب سایت ما سر زدی امیدوارم مطالب آتی سایت بیشتر به درد شما بخوره
rohol
rohol جمعه, 30 آبان 1393 17:48 پاسخ دادن
داداش دمت گرم
عالی بود،برای من که تازه کارم خیلی خوب بود.
فقط یه مشکل داشتم :
اونم اینکه توی هر مرحله که دیو ها از هم جدا میشدن باید رنگشونو عوض می کردم تا نشون داده بشن. این خوبه یا خیلی مشکله؟
صادق جعفری
صادق جعفری جمعه, 30 آبان 1393 15:17 پاسخ دادن
دوست عزیز چه شما رنگ رو تغییر بدی و چه تغییر ندی اون لایه با همون ابعاد وجود دارد تمامی این ها بستگی به طرح سایت شما خواهد داشت. ممکن است در سایت شما تمامی قسمت ها و بلوک ها رنگ پس زمینه آنها سفید رنگ باشد این امر هیچ مشکلی برای سایت شما بوجود نخواهد آورد
امین فراست
امین فراست چهارشنبه, 05 آذر 1393 16:28 پاسخ دادن
سلام
آقای جعفری عزیز می تونید آموزش رسپونسیو را هم در سایتتون قرار بدید؟
البته به همین سادگی و روانی که در این آموزشتون گفتید.(آموزش هاتون عالیه ساده و روان است)
ممنون
علی حمزه پور
علی حمزه پور جمعه, 08 ارديبهشت 1396 15:07 پاسخ دادن
سلام و عرض ادب
وب سایت قشنگ همراه با مطالب فوق العاده روانی دارید..
خیلی عالی بود ..
یه دنیا ممنون
مجتبی
مجتبی دوشنبه, 01 خرداد 1396 13:38 پاسخ دادن
سلام آقا صادق
من که لذت بردم از مطالبتون
فقط اگه لطف کنی آموزش ایجاد (نوشتن دیدگاه) رو برای سایت بگذارید ممنونتون میشم.
یه چیزی شبیه به نوشتن دیدگاه در سایت خودتون و همچنین مدیریت کردنش...
arman
arman شنبه, 21 مرداد 1396 13:30 پاسخ دادن
سلام
ببخشید من یه مشکلی دارم .. هرکاری می کنم نمی تونم margin-top بخش هدر وmargin-button فوتر را ایجاد کنم به بالا و پایین قسمت #wrapper چسبیده .. ولی از راست و چپ و اکی هستند.. البته من اندازه ها رو هم تغییر دادم ... لطفا راهنماییم کنید ... با سپاس
ایمان
ایمان چهارشنبه, 24 آبان 1396 22:47 پاسخ دادن
از کد زیر در cssتون استفاده کنید:
overflow: hidden;

نوشتن دیدگاه