مبتدی: ایجاد نوار ابزار بالای صفحه گوگل + چند سوال در همین رابطه [بایگانی]

davood59

دوشنبه 12 تیر 1391, 18:37 عصر

سلام به دوستان عزیز؛
وقت همتون بخیر و خوشی
من برای تمرین اومدم و میخواستم صفحه google رو خودم طراحی کنم؛ بدون نگاه کردن به سورس صفحه اصلی
برای مرحله اول قسمت بالا یا همون Header رو ایجاد کردم؛ حالا چند تا سؤال برام پیش اومده که اگه جوابمو بدید ممنون میشم.
در ابتدا کد CSS رو مشاهده بفرمایید:

<style type="text/css">
*
{
margin:0;
padding:0;
}

#wraper
{
width:100%;
}

#header-wraper
{
width:100%;
float:left;
background-color:#292929;
}

#header-wraper ul
{

padding:0;
margin:0;

}

#header-wraper ul li
{
display:inline;
font-size:12px;
list-style-type: none;
}

#header-wraper ul li a
{
display:block;
color:#cacaca;
text-decoration:none;
float:left;
padding:7px 7px;
text-decoration:none;
}

#header-wraper ul li a:hover
{
background:#696969;
}

#content-wraper
{

}

#footer-wraper
{

}
.right
{
text-align:right;
float:right;
}
.bold
{
font-weight:bold;
}
</style>

و اینهم کد HTML :

<body>

<form id="form1" runat="server">
<div>
<div id="wraper">
<div id="header-wraper">
<ul>
<li><a href="#">+You</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Maps</a></li>
<li><a href="#">Play</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gmail</a></li>
<li><a href="#">More</a></li>
<li><a href="#" class="right bold">Sign in</a></li>

</ul>
</div>
<div id="content-wraper"></div>
<div id="footer-wraper"></div>
</div>

</div>
</form>
</body>

حالا ابهاماتی که برام پیش اومده:
1- در این قسمت از کد:

#header-wraper
{
width:100%;
float:left;
background-color:#292929;
}

برام خیلی جالب بود چرا وقتی که float:left رو بر میدارم از اعمال رنگ پس زمینه منو که همون رنگ مشکلی باشه خودداری میکنه؟؟ چه دلیلی داره که وقتی این رو قرار میدیم رنگ فورا اعمال میشه؟ شاید دلیلش عدم درک کامل من از float باشه؟؟
2- در این قسمت از کد :

<li><a href="#" class="right bold">Sign in</a></li>
چرا علیرغم اینکه از کلاس right استفاده کردم و به کلاس right هم هر دو خاصیت float و text align رو right دادم؛ بازهم sign in رو نمیبره سمت راست؟
باید از clear:both استفاده کنم؟
با سپاس.

Saber Mogaddas

سه شنبه 13 تیر 1391, 18:18 عصر

سلام

برام خیلی جالب بود چرا وقتی که float:left رو بر میدارم از اعمال رنگ پس زمینه منو که همون رنگ مشکلی باشه خودداری میکنه؟؟ چه دلیلی داره که وقتی این رو قرار میدیم رنگ فورا اعمال میشه؟ شاید دلیلش عدم درک کامل من از float باشه؟؟
تو این کد :

#header-wraper
{
width:100%;
float:left;
background-color:#292929;
}

شما به header-wraper ارتفاع ندادید و این کد به تنهایی یعنی یه تگ داریم که عرض اون صدرصد هست و پس زمینه اون کد 292929 و دستوری وجود نداره که height رو مشخص کنه با برداشت float رنگ پس زمینه شما محو نمیشه بلکه عملا تگheader-wraper شما چون ارتفاع نداره دیده نمیشه ..دستور float همیشه باعث میشه که تگ مورد نظر ما اگه height ای نداشته باشه به صورت خودکار نسبت به محتوای تگ Height بگیره..برای درک بیشتر به همین استایل height:30px; رو اضافه کنید و دستور float رو حذف کنید..

چرا علیرغم اینکه از کلاس right استفاده کردم و به کلاس right هم هر دو خاصیت float و text align رو right دادم؛ بازهم sign in رو نمیبره سمت راست؟
اگه به selector

#header-wraper ul li a

توجه کنید اینجا به تگ a داخل li را float:left دادید و اولویت این دستور جلوتر از .right هست و float:right این selector رو خنثی میکنه ..
برای حل این مشکل می تونید کلاس right رو به تگ li ی sign in بدید..و به دلیل اینکه به تگ ul عرض ندادید li ای که برای sign in در نظر گرفته شده به سمت راست شناور خواهد شد.
به صورت زیر :

<li class="right"><a href="#">Sign in</a></li>

باید از clear:both استفاده کنم؟
کار دستور clear خنثی کردن خاصیت float های بالا دست خود میباشد و تو مثال شما نیاز به استفاده از این دستور نیست.
موفق باشید..