جایگزین کردن div های سایت با تگ های مشخص HTML5
قدم بعد در طراحی سایت با HTML5 جایگزاری div هایی است که در table 10.1 نمونه ای از آن ها را به شما نشان دادیم. Div هایی که اکثر مردم دنیا از آن ها استفاده می کردند اما خصوصیت id ثابتی در بر داشتند که باعث شد در HTML5 همه چیز کوتاه تر و ساده تر شود. این div ها را به یاد دارید؟
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!
</p>
</div>
</div><!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="events.html">Club Events</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
</ul>
</div><!-- end of navigation div -->
...
</body>
یکی از این div ها یک جایگزاری به نقص خواهد بود! آن که خصوصیت id به نام header داشت. دیگری هم نزدیک است، با خصوصیت id به نام navigation که در HTML5 با تگِ nav نوشته می شود.
بیایید در مارک آپ خود آن ها را تغییر دهیم:
- در index.html تگ div با خصوصیت id به نام header را پیدا کرده و آن را با تگِ باز و بسته <header> جایگزین نمایید.
- تگ های باز و بسته div با خصوصیت id به نام navigation را پیدا کرده و با تگِ nav جایگزین نمایید—تگ بسته را فراموش نکنید.
- علاوه بر کارهای بالا می توانید کامنت هایی با عناوین end of header div و end of navigation div را حذف کنید. از آنجایی که تگ های ساده و گویای HTML5 نیازی به توضیح اضافی ندارند و خود گویای همه چیز هستند.
امیدوارم مارک آپ شما هم به این صورت در آمده باشد:
<body>
<header>
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!
</p>
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="events.html">Club Events</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
</ul>
</nav>
...
</body>
درک دریافت این کد در نگاه اول ساده تر به نظر می رسد، اینطور نیست؟ اما در صفحه وب نتیجه کار چگونه خواهد بود؟ خواهیم دید.
عکس 10.1: سایت ما با تگ های header و nav
بسته به اینکه نتیجه کار بر روی چه مرورگری نمایش داده شود مشکلات کوچک و بزرگی دیده خواهد شد. مشکلات کوچک مانند گم شدن تصویر پس زمینه در بخش navigation، مشکلات بزرگ هم از قبیل یک layout کاملاً خراب شده و درهم و برهم (این مورد تنها به IE محدود خواهد شد!). دلیل اصلی این اتفاق بر هم زدن رابطه بین ساختمان کلی HTML با CSS ای است که قبلاً برای آن تنظیم کرده بودیم:
#header {
border-top: 3px solid #7da5d8;
}
این مارک آپ دیگر بر روی هیچ بخشی از سایت پیاده نمی شود زیرا دیگر خبری از یک id با خصوصیت header نیست. با حذف علامت # به CSS می گوییم که این Style را به تگ header اعمال کند و مشکل حل خواهد شد.
header {
border-top: 3px solid #7da5d8;
}
به طور مشابه در بخش navigation نیز چنین مشکلی وجود دارد:
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
که باید به صورت زیر درآید:
nav {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
نتیجه را ذخیره کنید و در مرورگر خود بازبینی نمایید، در بیشتر مرورگرها ادامه دادن کار به همین شکل کافی خواهد بود. اما در نسخه های پیشین IE9 باید اندکی بیشتر به مرورگر توضیح دهیم زیرا نسخه های پیشین IE9 اصلاً از وجود تگ های HTML5 مطلع نیستند. اگر IE نداند که یک تگ را چگونه باید نشان دهد آن را به صورت inline نشان می دهد(مانند span)؛ باید به مرورگر بفهمانیم که این تگ ها را به صورت block-level نمایش دهد (همان طور که پیش تر div بودند و به صورت block-level با آن ها برخورد می شد):
header {
border-top: 3px solid #7da5d8;
display:block; /* Only for IE8 or less */
}
...
nav {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
display:block; /* Only for IE8 or less */
}
این تغییرات کوچک را اعمال کنید و در مرورگرهای IE6، IE7 و IE8 نتیجه را مشاهده نمایید. دست رِمی شارپ درد نکند که با Script فعال کننده پشتیبانی HTML5 می توان با IE فارغ از آنکه از چه نسخه ای استفاده می کنیم کنار بیاییم. شاید متوجه حد فاصل خالی بالای بخش navigation در بعضی از مرورگر ها بشوید.
عکس 10.2: تگ nav باعث به وجود آمدن یک فضای خالی در بالای نوار navigation شده است.
این مشکل به دلیل margin استفاده شده در فهرست بدون اولویت u1 که درون nav قرار دارد به وجود آمده است. تغییرات کوچکی به وجود می آوریم تا به واسطه آن ها از حل این مشکل در تمامی مرورگرها اطمینان حاصل کنیم، پس margin تگ u1 را حذف می کنیم (اما نه برای سایر تگ هایی که درون body قرار گرفته اند). این کار را با افزودن یک selector انجام می دهیم:
nav ul {margin:0;}
این کار فضای بالای بخش navigation را حذف کرده است. با این کار می بینیم که تصویر پس زمینه به خوبی در زیر بخش navigation جای گرفته است.
عکس 10.3: با حذف margin استفاده شده در فهرست بدون اولویت ما همه چیز درست شد.
متاسفانه فضای بالای لینک های navigation نیز از بین رفت. می توانیم آن ها را مجبور کنیم که با اندکی فاصله در تگ nav به نمایش در آیند و برای این کار از padding استفاده می کنیم:
nav ul {margin:0; padding-top:15px;}
حالا همه چیز باید درست شده باشد، به عکس 10.4 که نتیجه کار را نشان می دهد توجه کنید.
عکس 10.4: با اندکی padding بخش navigation به حالت عادی خود بازگشت.
تا به اینجا با تنظیماتی که انجام دادیم نسخه های قبلی IE می توانند تگ های جدید HTML5 را شناخته و کار style دهی بر روی آن ها را به خوبی انجام دهند؛ تعدادی از المان های صفحه سایت را به المان های جدید HTML5 تغییر دادیم و CSS موجود را هم با تغییرات جدید هماهنگ کردیم تا کد HTML با CSS ای که نوشته بودیم هم خوانی داشته باشد.
