طرح بندی در css

[prince4prodigy]

با توجه به لینک زیر چند تا سوال دارم.....
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

اصلِ سوالم در مورد نحوه ی استفاده از ویژگی های position و display هست.
برای مثال تو همین لینکی که گذاشتم چرا display :block قرار داده برای #navlist li, #navlist a {height:44px;display:block;} و همینطور چرا وقتی مقدارِ display رو inline تغییر میدیم دیگه کار نمیکنه؟
کلا منطقِ کارکرد position و display رو درک نمیکنم.

مطالبی هم در موردشون خوندم ولی کفایت نکرد.....

[pirmard66]

دوست عزیز...

display همونطور که از اسمش پیداست به معنی نمایش هستش...

position هم به معنای مکان...

ما خیلی مثالها درباره positin و display داریم...

ببین مثال زیر رو متوجه میشی؟

http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed

و برای display:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none

در کل بیشتر برای ساخت منو از این دو دستور استفاده میکنن...

مثلا یک ستون از منوی تو چند زیر مجموعه داره که شما اون زیر مجموعه هارو display رو none قرار میدی ( یعنی مخفی میشه) و برای اون مجموعه با css کاری میکنی که وقتی عمل hover رو انجام دادی زیر مجموعه display اش block یا inline بشه( یعنی نمایان بشه به صورت ستونی یا خطی ) ...

با توجه به دو مثال بالا امیدوارم متوجه موضوع شده باشی..

Good Luck

[prince4prodigy]

ممنون از راهنماییتون.....
ولی در موردِ همون لینکی که خودم گذاشتم من از display:block انتظار دارم که اون نوار منو رو به صورت عمودی نشون بده نه افقی... میشه در این مورد توضیح بدید....

[pirmard66]

....

در مثالی که خودتون آوردین :

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

اگه استایل خط اول رو بردارید block هم درست عمل میکنه..( یعنی اشغال کردن کل سطر! )

اگه الان به صورت inline هستش به خاطر استایل li هستش....

[prince4prodigy]

حرفِ شما کاملا درسته اگه ما تو استایل خط اول رو بردازیم درست میشه (یعنی همون انتظاری که از display:block داریم که عناصر تو چند خط متفاوت قرار بگیرن) . به طور دقیق تر اون استایلی که موجب این اتفاق میشه position:absolute هست.
نحوه ی کار position:absolute رو هم میدونم که مکانِ عنصر رو نسبت به والدش تعیین میکنه.

ولی بازم منطقِ کلیه این کد رو درک نکردم . این که چرا این اتفاق میفته؟ یعنی چطور تریکیب استایل های postion:absolute و display:block باعث میشه که عناصر تو یک خط قرار بگیرن...؟!!

[prince4prodigy]

حرفِ شما کاملا درسته اگه ما تو استایل خط اول رو بردازیم درست میشه (یعنی همون انتظاری که از display:block داریم که عناصر تو چند خط متفاوت قرار بگیرن) . به طور دقیق تر اون استایلی که موجب این اتفاق میشه position:absolute هست.
نحوه ی کار position:absolute رو هم میدونم که مکانِ عنصر رو نسبت به والدش تعیین میکنه.

ولی بازم منطقِ کلیه این کد رو درک نکردم . این که چرا این اتفاق میفته؟ یعنی چطور تریکیب استایل های postion:absolute و display:block باعث میشه که عناصر تو یک خط قرار بگیرن...؟!!