ساخت منو (سوالی در مورد غالب دهی با css(

[barnamenevis2016]

سلام دوستان...یک سوال در مورد غالب دهی با css داشتم...من می خوام کنار لوگوی سایت که وسط و بالای صفحه هست..یک منو بسازم..به نام login...کاربر روش کایک کنه...براش یک منو ظاهر بشه و اونجا بتونه فیلد ها رو پر کنه...یا خلاصه یک منو بسازم...چطور با css اینکار رو بکنم...با jquery یا css می تونم حالت ظاهر شدن و ناپدید شدن منو رو بسازم...مشکلم با قالب دهی با css...کد زیر رو نگاه کنید:

<div class='headerDiv'>

<li><b><a href='index.php'>logo-home</a></b></li>


<li class='login'>


<h2 id = 'login'>login</h2>


<div class='loginMenu'>
<h2>menu1</h2>
<h2>menu2</h2>
<h2>menu3</h2>
<h2>menu4</h2>
</div>


</li>
</div>
در بالا یک لینک logo-home داریم به فرض logo سایته...من می خوام وسط صفحه باشه و بعد در کنارش و گوشه پایینش...متن login باشه که با کلیک کردن روی اون div با نام کلاس loginMenu ظاهر بشه...مشکل اصلی اینجاست که این menu1 تا menu2 دقیق زیر هم جای نمی گیرن و قاطی می شن...توی کتابا و ویدئوها هم همچین مثالی رو تا حالا ندیدم...اگر دوستان لطف کنند که کد css رو بدن و یا توضیح بدن...خیلی ممنون می شم

[Omid Jackson]

سلام دوستان...یک سوال در مورد غالب دهی با css داشتم...من می خوام کنار لوگوی سایت که وسط و بالای صفحه هست..یک منو بسازم..به نام login...کاربر روش کایک کنه...براش یک منو ظاهر بشه و اونجا بتونه فیلد ها رو پر کنه...یا خلاصه یک منو بسازم...چطور با css اینکار رو بکنم...با jquery یا css می تونم حالت ظاهر شدن و ناپدید شدن منو رو بسازم...مشکلم با قالب دهی با css...کد زیر رو نگاه کنید:

<div class='headerDiv'>

<li><b><a href='index.php'>logo-home</a></b></li>


<li class='login'>


<h2 id = 'login'>login</h2>


<div class='loginMenu'>
<h2>menu1</h2>
<h2>menu2</h2>
<h2>menu3</h2>
<h2>menu4</h2>
</div>


</li>
</div>
در بالا یک لینک logo-home داریم به فرض logo سایته...من می خوام وسط صفحه باشه و بعد در کنارش و گوشه پایینش...متن login باشه که با کلیک کردن روی اون div با نام کلاس loginMenu ظاهر بشه...مشکل اصلی اینجاست که این menu1 تا menu2 دقیق زیر هم جای نمی گیرن و قاطی می شن...توی کتابا و ویدئوها هم همچین مثالی رو تا حالا ندیدم...اگر دوستان لطف کنند که کد css رو بدن و یا توضیح بدن...خیلی ممنون می شم

لطف کنید کد کامل بذارید
با توضیحاتی که دادین من اصلا متوجه نشدم اشکال کار چیه

[barnamenevis2016]

ممنون از توجهتون....خوب تمام کد html همونیه که گذاشتم...من در واقع کد css مناسبی رو نمی تونیم برای چیدن مناسب پیدا کنم و نمی دونم البته کدهای html هم مشکلاتی داشته باشه یا نه...
بهترین نتیجه ای که می تونم بدست بیارم تصویر زیره:
http://uupload.ir/files/5x5_untitled-1.jpg
در تصویر می بینید که منوی شمار یک تا چهار زیر هم و زیر گزینه login قرار نمی گیرن..من می خوام تمام منو ها طبیعتا زیر هم باشن و گزینه login کنار logo باشه...من نتونسم کد css مناسبی پیدا کنم...همچین چینشی معمولا زیاد به کار می ره توی کارم...اگر راهکارشو بگید زیاد بدردم می خوره و کلا یک level می رم بالا...ببخشید سوالم مبتدی هست
ممنون می شم کسی کمک کنه

[Omid Jackson]

ممنون از توجهتون....خوب تمام کد html همونیه که گذاشتم...من در واقع کد css مناسبی رو نمی تونیم برای چیدن مناسب پیدا کنم و نمی دونم البته کدهای html هم مشکلاتی داشته باشه یا نه...
بهترین نتیجه ای که می تونم بدست بیارم تصویر زیره:
http://uupload.ir/files/5x5_untitled-1.jpg
در تصویر می بینید که منوی شمار یک تا چهار زیر هم و زیر گزینه login قرار نمی گیرن..من می خوام تمام منو ها طبیعتا زیر هم باشن و گزینه login کنار logo باشه...من نتونسم کد css مناسبی پیدا کنم...همچین چینشی معمولا زیاد به کار می ره توی کارم...اگر راهکارشو بگید زیاد بدردم می خوره و کلا یک level می رم بالا...ببخشید سوالم مبتدی هست
ممنون می شم کسی کمک کنه

HTML شما از ریشه اشتباه هستش
شما اول باید تصمیم بگیرین چی قراره درست کنین
بعد از اون تو ذهنتون تقسیم میکنین و تگ های مربوط به اون رو تو ذهنتون آماده میکنین
بعد اسکلتش رو میزنین (همون HTML ما)
بعد رو نماش کار میکنین (همون استایل دادن)
حالا میگردین ببینین کجاش موردی داره اونا رو برطرف میکنین
الآن کار شما از اول غلطه
لطفا آموزش های بیشتری ببینین در رابطه با HTML و بعد CSS بعد از این ها شما نیازی ندارین آموزش مشابه وجود داشته باشه کد ها رو با هم ترکیب میکنین و چیزی که میخواین بدست میارین ولی باید بلد باشین مواردی که گفتم رو

[barnamenevis2016]

خوب البته من یک نکته بگم که من کد html رو فکر می کنم در ابتدای کارم به نسبت صحیح تر نوشتم...بعد آخر سر به هوای تصحیح یک سری تغییر ایجاد کردم و کلا نظمش به هم خورد و بدون اینکه تصحیحش کنم اینجا قرار دادم....اگر می شه بی زحمت یک نگاه به کد زیر بکنید،این کدی هست که در ابتدا نوشتم...آیا این هم مورد داره:متفکر::

<div class='headerDiv'>



<ul class='topMenu'>
<li><b><a href=''>logo</a></b></li>

<li class='login'>
<h2>login</h2>

<ul class='loginMenu'>


<form action="#" METHOD="POST">
<center>
username:</br>
<input type="text" placeholder='username or email' size=20 /></br> </br>
password:</br>
<input type="password" placeholder='password' size=20 /></br></br>
</center>
</form>
</ul>


</li>
</ul>




</div>
بعد یک نکته ای که هست....اینه که من الان تونستم تا حدی css اون رو بنویسم.یعنی تا الان آنچه که یاد گرفتم و فکر کردم اصولی هست رو پیاده کردم...و نتیجه ای که می خوام در مرور گر opera گرفتم به شکل تصویر زیر:
http://uupload.ir/files/se1n_untitled-1.jpg

ولی مشکل حالا اینکه مرورگر internet explorer تصویر دلخواه رو نمی ده و به شکل تصویر زیره...منو کمی رفته بالا:چشمک: ....این دو گانگی بین مرور گر رو نمی دونم چطور حل کنم
http://uupload.ir/files/1hp5_untitled-1.jpg

اینم کد css:


.headerDiv{ border-top:5px solid #00ad63;
border-bottom:5px solid #00ad63;
height:110px;
padding:0px 0px 0px 0px;
}
.topMenu{
margin-top:-40px;
margin-left:38%;
}


.headerDiv li{
list-style:none;
}
.headerDiv a:link, a:visited{
font-size:100px;
color:#000;
text-decoration:none;
float:left;
}


.headerDiv .login {
margin-top:20px;
margin-left:20px;
float:left;
font-size:18px;
list-style:none;


}

[barnamenevis2016]

آقا من مشکلم حل شد و می خواستم بگم....که بله من عجله کردم...و هنوز خوب قضیه رو درک نکرده بودم و نباید سوال و این تاپیک رو می زدم:لبخندساده:که با رجوع به مطالب و نوشتار هایی قضیه درکش بیشتر شد و تونستم کار رو به نتیجه برسونم....در درجه اول کد html من اشتباه بود..حتی اون دومی....:خجالت: