09370037921

لایه بندی در 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
سلام
مطلبت خیلی به دردم حورد ولی حیف که کمی دیر پیدات کردم چون دیگه یاد گرفته بودم
ولی بازم ممنون
پاسخ دادن
صادق جعفری
صادق جعفری 28 مهر 1393
امین عزیز
ممنون که به وب سایت ما سر زدی امیدوارم مطالب آتی سایت بیشتر به درد شما بخوره
پاسخ دادن
rohol
rohol 30 آبان 1393
داداش دمت گرم
عالی بود،برای من که تازه کارم خیلی خوب بود.
فقط یه مشکل داشتم :
اونم اینکه توی هر مرحله که دیو ها از هم جدا میشدن باید رنگشونو عوض می کردم تا نشون داده بشن. این خوبه یا خیلی مشکله؟
پاسخ دادن
صادق جعفری
صادق جعفری 30 آبان 1393
دوست عزیز چه شما رنگ رو تغییر بدی و چه تغییر ندی اون لایه با همون ابعاد وجود دارد تمامی این ها بستگی به طرح سایت شما خواهد داشت. ممکن است در سایت شما تمامی قسمت ها و بلوک ها رنگ پس زمینه آنها سفید رنگ باشد این امر هیچ مشکلی برای سایت شما بوجود نخواهد آورد
پاسخ دادن
امین فراست
امین فراست 05 آذر 1393
سلام
آقای جعفری عزیز می تونید آموزش رسپونسیو را هم در سایتتون قرار بدید؟
البته به همین سادگی و روانی که در این آموزشتون گفتید.(آموزش هاتون عالیه ساده و روان است)
ممنون
پاسخ دادن
علی حمزه پور
علی حمزه پور 08 ارديبهشت 1396
سلام و عرض ادب
وب سایت قشنگ همراه با مطالب فوق العاده روانی دارید..
خیلی عالی بود ..
یه دنیا ممنون
پاسخ دادن
مجتبی
مجتبی 01 خرداد 1396
سلام آقا صادق
من که لذت بردم از مطالبتون
فقط اگه لطف کنی آموزش ایجاد (نوشتن دیدگاه) رو برای سایت بگذارید ممنونتون میشم.
یه چیزی شبیه به نوشتن دیدگاه در سایت خودتون و همچنین مدیریت کردنش...
پاسخ دادن
arman
arman 21 مرداد 1396
سلام
ببخشید من یه مشکلی دارم .. هرکاری می کنم نمی تونم margin-top بخش هدر وmargin-button فوتر را ایجاد کنم به بالا و پایین قسمت #wrapper چسبیده .. ولی از راست و چپ و اکی هستند.. البته من اندازه ها رو هم تغییر دادم ... لطفا راهنماییم کنید ... با سپاس
پاسخ دادن
ایمان
ایمان 24 آبان 1396
از کد زیر در cssتون استفاده کنید:
overflow: hidden;
پاسخ دادن
ali
ali 12 آذر 1396
دست شما درد نکنه آقای جعفری
پاسخ دادن

نوشتن دیدگاه