صفحه بندی در HTML
صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.
پس صفحه وبتان را با دقت طراحی نمایید.
مثال - خودتان امتحان کنید
Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.
Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.
صفحه بندی وب سایت ها
بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)
با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.
 |
گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی. |
|---|
صفحه بندی با استفاده از عناصر <div>
عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.
توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.
در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:
مثال (صفحه بندی در HTML)
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © beyamooz.com</div>
</div>
</body>
</html>
کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:
Main Title of Web Page
HTML
CSS
JavaScript
مثال - خودتان امتحان کنید
Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.
صفحه بندی با استفاده از جداول
راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.
حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.
|
استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است. |
|---|
در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.
مثال (صفحه بندی در HTML)
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
کد بالا نتیجه زیر را ایجاد می کند.
Main Title of Web Page |
|
| Menu HTML CSS JavaScript |
Content goes here |
| Copyright © W3Schools.com | |
نکات مهم
نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.
برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس
نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)
تگ های صفحه بندی در HTML
| تگ | توضیح |
|---|---|
| <div> |
تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است) |
| <span> |
تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 66652
دیدگاه‌ها
سلام خسته نباشید
در مثال زیر، چرا اگه خصوصیت width رو برای wrapper تعریف نکنیم اگر چه برای footer کلیر تعریف کنیم ولی footer در جای خودش قرار نمیگیره ؟؟
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs_3columns
سلام، در مثال بالا اگر خصوصیت width رو برای wrapper در نظر نگیریم، چون برای footer از خصوصیت clear با مقدار both استفاده شده است، اتفاقی که شما فرمودید نمی افتد ...! و Footer دقیقا سرجای خودش نمایش داده می شود.
با سلام خدمت شما... آموزش صفحه بندی در HTML عالی بود ممنون
سلام و خسته نباشی دارم خدمتون
می خواستم بیبینم استفاده از خصوصیت id در مثال اول، کاربرد خاصی دارد؟ اگر نباشد ایا اتفاق خاصی می افتد؟
سلام
بله حق با شماست. در واقع اگر ID هایی که برای عناصر در نظر گرفتیم را حذف کنید در خروجی تأثیری ایجاد نخواهد شد.
اما توجه داشته باشید که برای صفحه بندی در HTML به هیچ عنوان نباید بصورت درون تگی، استایل دهی کنیم. در اینجاست که اگر از روش فایل CSS خارجی استایل دهی را انجام دهیم، IDهایی که برای Divها تنظیم کرده ایم استفاده خواهد شد.
سلام و عرض خسته نباشید به مهندسین خوب سایت بیاموز من میخواستم کاربرد تگ float و clear رو در مثال اول بدونم با تشکر
سلام.
دستور float و دستور clear به CSS مربوط می شوند. به طور خلاصه می توان گفت که دستور float:left باعث میشه که عنصر مورد نظر به سمت چپ شناور بشه. و دستور clear:both هم باعث میشه که عنصر مورد نظر از دو طرف شناور نباشد.
با سلام و خسته نباشید
هنگام صفحه بندی همه عناصر من در سمت راست یا سمت چپ قرار میگیرند چیکار کنم که این عناصر بیان وسط صفحه؟
سلام برای وسط قرار دادن عناصر می توانید از CSS استفاده کنید.
آموزش صفحه بندی در HTML عالی بود.
سلام
می خواستم بپرسم فرق id و class چیه؟
سلام
از هر دو برای دسترسی به عناصر در JavaScript و CSS و jQuery و ... استفاده می شود. اما زمانی که می خواهید ویژگی id را تنظیم کنید باید دقت کنید که در کل صفحه مقدار در نظر گرفته شده منحصر بفرد باشد. یعنی زمانی که می گوییم فلان عنصر با id مثلا test را می خواهیم باید فقط یک عنصر یافت شود. اما در مورد ویژگی class چنین محدودیتی وجود ندارد، یعنی در یک صفحه شما می توانید چندین عنصر را با یک class یکسان تنظیم کنید. و زمانی که می گویید عناصر با class مثلا test را بده، ممکن است بیش از 1 عنصر یافت شود.
ممنون از پاسخ جامع و کاملتون
آموزش خوبی بود. دست شما درد نکنه
سلام ممنون از سایت بی نظیرتون
میخواستم بگم من راجع به صفحه بندی سایت در چند سایت دیگه هم مطالب مطالعه کردم اما بعضیاشون نوشته بودن در اچ تی ام ال 5 تگ div برای صفحه بندی منسوخ شده، آیا درسته؟ متن دقیق هم این بوده:
در HTML 4.01 ، تگ اغلب برای مشخص کردن بخش های ناوبری مختلف در یک سند HTML (مانند header ، footer ، content area ، side bars ، و غیره) مورد استفاده می گرفت.
HTML 5 عناصر جدیدی را معرفی کرده که باید به جای عنصر استفاده شوند. نمونه هایی از این عناصر جدید شامل < article>، ، و و … هستند .
ممنون میشم پاسخ بدید :)
سلام
در HTML5 تگ های جدیدی مثل header و Footer و ... معرفی شده است که پیشنهاد می شود حتما بجای Div از تگهای مذکور برای صفحه بندی استفاده کنید.
برای اطلاعات بیشتر مطالب ارائه شده در منوی "بیاموز HTML5" را مطالعه فرمایید.
عالی بود.
با سلام و تشکر از مطالب خوب و مفید آموزشی
سوالم اینه که منظورتان از الگو(template) همان قالب سایت میباشد؟؟؟
سلام. در اینجا منظور از الگو، قالب سایت نیست، چون که قالب های سایت از زبان های php و css و html و جی کوئری استفاده می کنند، و شما هنوز در مراحل ابتدایی قرار دارید( یعنی اچ تی ام ال). منظور از الگو درواقع نمونه کدهای html است که برای شما قابل درک باشد.
بعنوان مثال سایت زیر یک نمونه است.
www.html5webtemplates.co.uk/templates.html
با عرض سلام و خسته نباشید
ببخشید من id داخل div را متوجه نشدم و وقتی حذفشون کردم اتفاق خاصی نیوفتاد
میشه یکم توضیح بدین؟
با سلام و تشکر
id در یک واقع یک شناسه یکتا هست که به تگ خاصی میتونه اعمال بشه. در کل صفحه فقط مجاز به استفاده از یک id برای یک تگ خاص هستیم.
خود id به تنهایی کاری نمیکنه، ولی از اون در زبانهای CSS و javascript میشه برای اشاره به اون تگ موردنظر استفاده کرد.
واقعا از خواندن آموزش بالا لذت بودم ، دست شما درد نکنه
موفق باشید.
سلام خسته نباشید
وظیفه این کدها ممنون میشم یه توضیحی بدید ؟
style="margin-bottom:0
footer
both;text-align:center;">
با سلام و تشکر.
کدها درست نیومده!
margin باعث ایجاد فاصله از بخش بیرونی المنت یا تگ موردنظر با سایر المان‌های خارجی میشه.
margin-bottom باعث ایجاد این فاصله فقط از سمت پایین میشه.
text-align ترازبندی متن رو تنظیم می‌کنه. عبارت center باعث ترازبندی از مرکز میشه.
با سلام خدمت شما دوست عزیز و گرامی یک این که کدهای شما از نظر نگارشی مشکل دارند
و دوم این که این کد های سی اس اس هستند که به صورت درون تگی در اچ تی ام ال تعریف شده اند.
موفق باشید.
سلام ببخشین من با notepad++ کدها رو مینویسم ولی با فارسی مشکل داره میشه راهنمایی کنین که کدوم نرم افزار خوب هس
ممنون
سلام
چرا همیشه بالای صفحه و سمت چپ و راست یه حاشیه هست چطوری میشه اونو حذف کرد
با سلام.
برای رفع این مشکل کافیست در CSS برای تگ body خود مقادیر margin و padding رو برابر صفر قرار بدید.
به این صورت:
body{margin:0;padding:0} /*comment
سلام.
وقتی قراره استایل را تو یه فایل خارجی قرار بدیم منظورتون دقیقا کجاس؟و چطور باید انجامش داد؟
با سلام.
منظور این هست که کنار فایل html. یک فایل با پسوند css. ایجاد کرده و کدهای CSS خودمون رو در فایل مذکور قرار میدیم. بعد از طریق تگ link فایل css رو به فایل html پیوست میکنیم.
فرض کنید ما یک پوشه به نام new داریم. در این پوشه دو فایل با نام index.html و main.css ایجاد میکنیم.
در فایل main.css کدهای css مثل کدهای زیر قرار می‌دهیم:
@charset "utf-8";
body {
margin:0px;
padding:0px;
font-family:tah oma !important;
font-size:12px !important;
background-colo r:#ddd !important;
}
div{
padding:10px;
margin:5px;
border:1px solid #ccc;
}
.Center{
text-align:center;
}
در فایل index.html کد زیر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Li nk CSS File</title& gt;
<meta charset="U TF-8">
<meta name="view port" content="w idth=device-wid th, initial-scale=1.0">
<link rel="style sheet" type="text /css" href="main .css" />
</head>
<body>
<div class="Cen ter">
<h1>Titr& lt;/h1>
<p>This is a test for you. This is a test for you. This is a test for you. This is a test for you. This is a test for you. </p>
</div>
</body>
</html>
خط قرمز نحوه‌ی لینک کردن فایل main.css را در فایل index.html نشان میدهد. در اینجا برای راحتی فهم هر دو فایل رو در یک پوشه قرار دادیم. اگر فایلها در جای مختلفی از هم باشن، در هنگام لینک کردن باید آدرس صحیح فایل رو بدید.
موفق باشید.
سلام.خسته نباشین.سایتتون عالیه.ی سوال داشتم.یک سایت که الگو طراحی رایگان داشته باشه معرفی میکنین؟
سوال بعدیم اینه که فایده (wrapper)چیه اصلا؟ وکار margin:0 auto چیه؟درمورد این مسایل وکلمات جدیدهم توضیح بدین.مرسی
سلام
ممنون از حسن نگاهتون.
wrapper یک نام است که برای یک شناسه تعریف شده است. این نام اجباری نیست و می توانید هر نام دیگری استفاده کنید.
با سلام
در مثال اول اگر بخوهیم منو ها در سمت راست قرار گیرند و یا در کل صفحه راست چین باشد چه باید کرد؟
سوال دوم اینکه خاصیت clear چیست چه کاربردی دارد من درست نفهمیدم میشه بیشتر توضیح بدید.
سوال سوم برای ارسال تصویر آدرس کامل تصویر را از روی کامپیوتر وارد می کنم جواب نمی ده چرا کلیک راست properties بعد هم locationکپی پیست مگه همین نیست ولی جواب نمی ده چرا؟ فرمت تصویر چی باید باشه jpj؟؟؟ لطفا پاسخ دهید ممنون
به نقل از shadi:
سلام، فقط کافی است، قسمت های قرمز رنگ را تغییر دهید:<!DOCTYPE html>
<html>
<body style="direction:rtl">
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:right;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright Beyamooz.com</div>
</div>
</body>
</html>
به نقل از shadi:
برای درک خصوصیت clear باید float را خوب فهمیده باشید.
همان طور که می دانید با استفاده از خصوصیت flaot می توانید، یک عنصر block که تمام طول یک سطر را اشغال می کند به سمت راست یا چپ شناور کنید، مثلاً عنصر div یک عنصر block است و خودخواهانه تمام طول سطر را به خودش اختصاص می دهد. با تنظیم float روی div از حالت block در می آید و اجازه می دهد تا عنصر بعدی اش در کنارش قرار بگیرد و این اتفاق تا جایی که خط مذکور جا داشته باشد برای عناصر بعدی خواهد افتاد.
حالا اگر نمی خواهید عنصر جاری در کنار عنصر float شده قرار بگیرد، فقط کافی است که خصوصیت clear را برای آن تنظیم کنید.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
beyamooz.com/cssref/227-css-properties/851-clear
به نقل از shadi:
دقیقاً متوجه سوالتون نشدم ...! اما اگر می خواهید، عکسی را از روی کامپیوترتون روی وب در قسمت "دیدگاه های" سایت بیاموز قرار بدید، این راهش نیست ...! ابتدا باید عکستون را روی اینترنت قرار بدید و سپس آدرس اینترنتی آن را در قسمت دیدگاه ها استفاده کنید.
سلام
از پاسخ سریع شما بسیار تشکر می کنم
توفیقات شما روز افزون
سلام
من نمی تونم دستور div رو بفهممش یه جوری برام گنگ هستش اگه میشه کمک کنید تا درکش کنم ... مرسی
سلام، اولاً نگید دستور div، بگید تگ یا عنصر div ...!
1- div یک عنصر block است یعنی تمام طول یک سطر را اشغام می کند و دیگر عناصر را کنار خودش تحمل نمی کنه، حتی اگر یک کاراکتر داخلش باشه، باز تمام طول سطر را اشغال می کنه ...
2- بیشتر بعنوان یک ظرف برای دیگر عناصر بکار می رود. بعنوان مثال یک فرم اطلاعاتی که شامل 5 فیلد است را در نظر بگیرید، اگر بخواهیم فضای پشت تمام فیلدها را "خاکستری" کنیم، راه حل چیست؟ خوب باید فیلدها را داخل div قرار بدیم و سپس پس زمینه div را "خاکستری" کنیم.
3- div مخفف division بمعنی "قسمت" است و همان طور که در مطلب بالا دیدید یکی از کاربردهای مهم div یعنی قسمت بندی صفحه، آموزش داده شده است.
سلام خسته نباشید 2 تا سوال داشتم
1-در مثال اول که صفحه بندی با استفاده از div هست برای header از h1 استفاده شده و در h1 با style خصوصیت margin-bottom=0 شده وقتی عدده صفر را تغییر میدیم مثلا 1 میکنیم یک حاشیه پایین header ایجاد میشه ولی اگه عددو بیشتر کنیم حاشیه بزرگتر نمیشه در واقع حاشیه ایجاد شده ثابته چه 1 بدیم چه 8 چرا ؟
2-اگه خصوصیت margin-bottom اصن تعریف نکنیم اون حاشیه بازم ایجاد میشه چرا؟ یعنی browser خودش بعد از هر سطر یه فضای خالی میندازه ؟
ممنون .
اکثر مرورگرها، برای نمایش تگ h1 مقادیر زیر را در نظر می گیرند:h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
و اما جواب این سوال که چرا برای h1 خصوصیت margin-bottom را با "0" تنظیم کرده ایم ...!؟
اگر margin-bottom تنظیم نشود، حالت پیش فرض که margin-bottom: 0.67em است در نظر گرفته می شود و چون این اندازه جزو محتوای div والد محسوب نمی شود، بنابراین بهم ریختگی خواهیم داشت و یا بقول شما پایین فضای نارنجی رنگ header یک حاشیه یا فضای سفید رنگ ظاهر می شود.
و اما اینکه گفتید مقدار margin-bottom را تغیر می دهید ولی تغییری حاصل نمی شود ..!؟ این اتفاق بخاطر اشتباه شما در تنظیم نکردن واحد برای اعداد است والا حتماً حاشیه اعمال خواهد شد.
سلام
تو صفحه بندی با استفاده از کدوم روش بهتره؟
اینکه تگ رو تو قسمت head تعریف کنیم؟ (مثل مثال 3 ستونه) یا تو همون تگ ؟ مثل مثال اول
ممنون از سایت خیییییلی خوبتون :)
سلام، همان طور که می دایند در CSS سه روش برای استایل دهی عناصر وجود دارد:
1- قرار دادن کدهای CSS در یک فایل خارجی و لینک کردن آن به صفحه HTML
2- قرار دادن کدهای CSS در قسمت head صفحه HTML
3- قرار دادن کدهای CSS داخل تگ با استفاده از ویژگی style
اگر می خواهید اصولی کار کنید، روش اول، بهترین انتخاب است، در این صورت خواهید توانست از کدهای CSS در تمام صفحات پروژه استفاده کنید.
سلام...خسته نباشيد..من چنتا سوال دارم....
1-وقتي ب div مورد نظر با css خصوصيت ميديم مثلا ارتفاع 10%....اين درصد بر چه اساسي حساب ميشه؟براساس كل صفحه؟كل ابعاد نمايشگري ك سايتو نشون ميده يا اندازه ي browser؟
2-اگه تو div اصلي صفحه ي div مجدد تعريف بشه و div داخلي نسبت ها رو با چي حساب ميكنه؟كل صفحه ؟
اين سوال رو از اون جهت پرسيدم چون وقتي صفحه رو از حالت fullscreen خارج ميكنم شكل سايتي ك ساختم عوض ميشه!بعضا اندازه ها متفاوت ميشه! ميخواستم راهنمايي كنيد..
3-اصولا اندازه دادن ب عناصر مختلف ب صورت درصد بهتره يا با اندازه ي مطلق؟مثلا cm! ك وقتي از ي نمايش گر ديگه با ابعاد متفاوت مشاهده ميشه زيباييش ب هم نريزه
سلام، ممنون
1- ارتفاع div مورد نظر شما برابر خواهد شد با 10% ارتفاع والدش، حالا این والد می تواند یک عنصر دیگر باشد و یا تگ body
2- جواب سوال دوم در دل سوال اول قرار دارد. یعنی اگر اندازه ی div های داخلی را با % بیان کرده باشید، این محاسبه نسبت به اندازه div والد انجام خواهد شد. در ضمن اگر اندازه ها را با واحد % (درصد) بیان کنید، برای div ی که والدش عنصر body است، اندازه ی div نسبت به اندازه پنجره مرورگر محاسبه خواهد شد. یعنی هر زمان که اندازه پنجره مرورگر بنحوی (مثل fullscreen) تغییر کند، بلافاصله اندازه div مورد نظر ما نیز تغییر خواهد کرد.
3- بنظر من برای اینکه از حداکثر اندازه ی نمایش گر استفاده کنیم بهتر است که اندازه ها به واحد درصد (%) باشد.
10 % المان والدش یا 100 % المان والدش
اگر المان ما دو تا والد مثل bodyو head داشت آنوقت چه می شود؟؟؟؟؟؟!!!!!!!!!!!!
المان head که اندازه خاصی ندارد اصلاً
گیج شدم
راهنمایی کنید لطفاً
توجه کنید که یک عنصر فقط و فقط یک والد دارد ...! و نمی تواند دو والد داشته باشد.
در مورد عنصر head، حق با شماست، اندازه خاصی ندارد.
موضوع خیلی ساده است، لطفاً توجه نمایید:
فرض کنید داخل body یک div داریم که خصوصیت width:90% برای آن تنظیم شده است، حالا با توجه به اینکه عرض div نسبت به والدش محاسبه می شود نهایتاً عرض div برابر با 90 درصد از عرض body خواهد بود.
سلام .من خیلی این سایت را واسه اموزش دوست داشتم چون خیلی کامل بود به چه سختی ای میخواستم بخونم ترجمش میکردم الان خیلی خوشحالم که این سایت ترجمه شد واقعا نیاز داشتم یک دنیا ممنونم
سلام
چرا وقتی میخوام Style ایجاد کنیم برای footer باید از این خصوصیت استفاده کرد ! clear:both;
چرا نمیشه برای فوتر بر اساس width برای wrapper , عرض تعیین شه
مثلا:#footer{
width:500px;
height:25px;
}
توضیح بیشتر میدید
ممنون
سلام
دلیل استفاده از خصوصیت clear در footer: اگر به کدهای HTML قبل از footer دقت کرده باشید دوتا Div داریم که برای هر دوی آنها خصوصیت float با مقدار left تنظیم شده است. این یعنی اینکه فوتر ما باید div قبلیش را احاطه کند، با استفاده از خصوصیت clear این موضوع اتفاق نمی افتد. البته چون div اصلی با 500 پیکسل تنظیم شده و دو div قبلی footer این فضا را کامل می پوشانند، footer خواه ناخواه بعد از دو div بالای خودش قرار می گیرد اما در نظر بگیرد یک اشتباه کوچک در سایز بندی بکنیم اون موقع همه چیز بهم می ریزه، برای اطمینان از اینکه footer صددرصد در زیر قرار می گیرید در اینجا بهتر است که خصوصیت clear را برای آن تنظیم کنیم.
در ضمن div یک عنصر block است و تمام طول یک سطر را اشغال می کند و چون footer باید تمام سطر را اشغال کند نیازی به تنظیم width وجود ندارد.
باسلام
میشه بگید خروجی html کدومه میخوام برای 1 شنبه ارائه بدم
سلام . ممنون از سایته عالیتون . یک سوال داشتم .
داخله این جدولی که با div قالب بندی شده اگر بخوایم گزینه های menu و html و غیره رو به صورت لینک در بیاریم که وقتی روش کلیک میشه محتوای هر کدوم داخله اون قسمتی که نوشته شده Content goes here نمایش داده بشه به چه صورت باید کد رو بنویسم ؟
مجددا بسیار ممنون بابت سایت پر محتواتون .
با سلام و تشکر.
شما عبارت cascade menu in html and css رو در گوگل سرچ کنید. برای شما نمونه سمپل از منوها رو میاره که هم کاربردی و هم زیبا هستند.
منوهای ابشاری منظور شماست.