درباره اولین منویی که درست کردم، میشه نظر بدین؟و اینکه position چرا اینجوری میکنه(مبتدی هستش ها)؟

[sahel65]

سلامی دوباره؛
این منو رو امروز طراحیش کردم و میخوام قشنگ ترش کنم. ولی قبلش میشه راهنماییم کنید؟؟ جواب ندین بهم ها! راهنماییم کنید. اگه هم جواب دادین پس زحمتش رو بکشین و توضیح بدین که چرا مثلا اون خاصیتی رو که داده بودم برداشتین یا تغییرش دادین. مبتدی هستم. مبتدی.
کد طراحی شده من رو ببینین ابتدا تو این لینک. (https://jsfiddle.net/rsm5fu5s/)
حالا سوال اولم - من عمدا رنگ زمینه قرمز رو گذاشتم که ببینم آیا بچه ها(همون منوها) دارن تبعیت میکنن از پدرشون یا نه؛ ولی شیطون شدن و رفتن بالاتر از خط پس زمینه! نباید اینجوری باشن که! چرا اینجوری شدن! حالا چون گفتم که جواب نمیخوام و راهنماییم کنین اومدم و تو این تیکه از کدم این دستور رو اضافه کردم:
ببینید عزیزانم:
ul#menubala li{
border-right:2px solid white;
background-color:#0033FF;
list-style-type:none;
display:inline;
padding:5px 10px;
position:absolute;
}


یعنی اومدم و فقط و فقط این یه خط رو اضافه کردم:

position:absolute;
آخه این خاصیت در واقع میگه به بچه ها که برید دقیقا تو محلی که پدرتون واقع شده قرار بگیرین. درست میگم اینجا رو؟؟
ولی فکر کنم اگه مثلا fixed میدادیم میگفت که برین از گوشه صفحه مانیتور بدون اینکه به پدر و جدتون کار داشته باشین قرار بگیرین؟؟ این رو هم درست میگم.
حالا وقتی که این دستور رو قرار میدم در واقع به خواسته خودم میرسم یعنی اینکه بچه ها مثل مودبها میان و میرن تو تگ پدرشون و تخلفی نمیکنن ولی فقط یک دونه شون دیده میشه! که سوال اصلی من هم همینجاست. چرا بقیه شون دیده نمیشن و کجا غیبشون میزنه!!! میشه این رو برام تشریح کنید. میخوام این منوی خودم رو قشنگ ترش کنم آخه.
مرسی

[mohammad425]

اولش که قبل از آی دی لازم نیست ul بزارید
دوما اگه برای آی دی menubala , عرض تعیین نکنید زیباتر میشه
سوما تگ های li رو باید با تگ </li> باید ببندید
چهارما به جای استفاده از display:inline; , از float:left استفاده کنید و به جای اینکه padding بالا و پایین بدین به تگ های a داخل li
line-height برابر با ارتفاع menubala بدین.

کد اصلاح شده:

.container{ width:960px;
height:800px;
margin:0 auto;
background-color:#CCCCCC;
padding:35px;
}
#menubala{


height:30px;
background-color:red;
float:left;
}
#menubala li{
border-right:2px solid white;
background-color:#0033FF;
list-style:none;
float:left;
padding:0px 10px;

}
#menubala li a{
line-height:30px;
text-decoration:none;

}


<div class="container"> <ul id="menubala">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>

[sahel65]

اولش که قبل از آی دی لازم نیست ul بزارید
این رو تو یه مطلب آموزشی دیدم. بازم چشم. یعنی اینجوری نرمال نیستش و ممکنه خطایی بوجود بیاره؟؟


دوما اگه برای آی دی menubala , عرض تعیین نکنید زیباتر میشه
ممنونم دوست عزیزم، آره خودم این رو میدونستم فقط برای این گذاشتم که موقعیت مکانی منوی فعلی رو داشته باشم و بدونم که آیا درست دارم تو کادر جابجاش می کنم یا نه!


چهارما به جای استفاده از display:inline; , از float:left استفاده کنید و به جای اینکه padding بالا و پایین بدین به تگ های a داخل li
line-height برابر با ارتفاع menubala بدین.
مرسی ؛ این نکته تون برام جالب بود. اینکه خیلی دیدم که بجای display:inline از float:left استفاده می کنن، میشه دلیلشو بهم بگین؟؟؟؟؟
در خصوص دادن line-height بجای padding از چه نظر اینجوری بهتره؟؟؟ خیلی دوست دارم این دو تا دلیل رو بدونم. یعنی هم float و هم line-height.
اگه میشه برام تشریح کنید. چون مبتدیم.

[golbafan]

کارتون بنظر من خیلی خوبه

ادامه بدید و تمرین کنید

با آرزوی موفقیت برای شما

[ABZiko]

به عناون اولین منوتون، واقعا عالیه، به قول جناب golbafan همین طوری تمرین کنید، منو های جدیدتری رو ببینید، روی افکت ها بیشتر کار کنید، مطمئنم که در آینده موفق خواهید بود ...
پیروز باشید

[sahel65]

واقعا از دلگرمی هاتون ممنون و سپاسگزارم. مرسی؛ از خدا میخوام به شما ها که باعث دلگرمی و تشویق من به ادامه کارم میشین بهترین نعمتهاش رو بده و هرچی آرزو دارین برآورده بشه. بازم مرسی و ممنونم.
من خیلی از دانسته ها و داشته هام رو از طریق بچه های خوبی مثل شما تو همین سایت دارم. :بوس::بوس:

[mohammad425]

این رو تو یه مطلب آموزشی دیدم. بازم چشم. یعنی اینجوری نرمال نیستش و ممکنه خطایی بوجود بیاره؟؟
نه خطایی که نمیده ولی وقتی آی دیشو انتخاب میکنید یعنی خودشو انتخاب کردین برای همین گذاشتن ul اضافی هست



مرسی ؛ این نکته تون برام جالب بود. اینکه خیلی دیدم که بجای display:inline از float:left استفاده می کنن، میشه دلیلشو بهم بگین؟؟؟؟؟
در خصوص دادن line-height بجای padding از چه نظر اینجوری بهتره؟؟؟ خیلی دوست دارم این دو تا دلیل رو بدونم. یعنی هم float و هم line-height.
اگه میشه برام تشریح کنید. چون مبتدیم.
در این مورد چیز زیادی نمیدونم فقط از روی تجربه دیدم که ایجوری نتیجه بهتری میده :))))))
اگه از دوستان دلیلشو میدونه بگه استفاده کنیم :)