PDA

View Full Version : سوال: تغییر استایل منوی افقی در تغییر رزولوشن



ArtMiz
شنبه 04 خرداد 1392, 21:05 عصر
در این آدرس (http://jsfiddle.net/ar5sJ/1/) نمونه کدی گذاشتم که یک منوی افقی رو تعریف می کنه که در مواقعی که رزولوشن صفحه به اندازه کل صفحه نیست منوی شکسته میشه و در خط بعدی به صورت نامناسب نمایش داده میشه. ممنون میشم در صورت امکان راهنماییم کنید.

esmaeilbf
شنبه 04 خرداد 1392, 21:23 عصر
<img src='http://static.adzerk.net/Advertisers/879d9e1805a6495a9e3cbeeffe6da2ad.png' alt='' />
<div id="wrap">
<div id="menu">
<ul>
<li><a href="" title="Home Page" id="Home">Home</a></li>
<li><a href="" title="About us" id="About_us">About Us</a></li>
<li><a href="" title="" id="">Horizontal menu</a></li>
<li><a href="" title="" id="">Horizontal menu</a></li>
<li><a href="" title="" id="">Horizontal menu</a></li>
<li><a href="" title="" id="">Horizontal menu</a></li>
<li><a href="" title="" id="">Horizontal menu</a></li>
</ul>

</div>
</div><!--end wrap-->

img{ width: 100%}
#menu{ background:#A1DBE6;/* min-width: 900px;*/ }
#menu ul { margin:0; padding:7px; list-style:none; border-top:2px solid #6C939A; }
#menu ul li { margin:0; padding:0; display: inline;}
#menu ul li a { color:#287786; font:normal 14px Georgia, "Times New Roman", Times, serif; margin:0; padding:7px; }
#menu ul li a:hover{ border-top:2px solid #287786; color:#fff; background:#287786;}
#wrap{
width:999px;
height:400px;
}
}

moalla
شنبه 04 خرداد 1392, 21:59 عصر
تغییری که خواسته بودین رو اضافه کردم و اینجا (http://jsfiddle.net/moalla/RmXxp/)گذاشتم
اگه منظورتون رو اشتباه فهمیدم و این طوری نمیخواید دقیق تر توضیح بدید

ArtMiz
شنبه 04 خرداد 1392, 22:21 عصر
ممنونم از جوابتون. اگه خط دوم css رو خونده باشید متوجه میشید که من هنوز به جوابم نرسیدم. اگه دقت کنید منو از layout خارج میشه، به عکس بالای منو به که به عنوان نبر هست توجه کنید.

esmaeilbf
شنبه 04 خرداد 1392, 23:02 عصر
عزیز این کدی که گذاشتم ویرایش شده ی کد خودت هست کپیش کن ببین !
چون من حساب کاربری سایته رو نداشتم نتونستم اونجا ذخیرش کنم

moalla
شنبه 04 خرداد 1392, 23:08 عصر
اگه باز اشتباه متوجه نشده باشم میتونید از media queries برای این منظور استفاده کنید. اینجا (http://mediaqueri.es/)رو ببینید

ArtMiz
یک شنبه 05 خرداد 1392, 23:17 عصر
عزیز این کدی که گذاشتم ویرایش شده ی کد خودت هست کپیش کن ببین !
چون من حساب کاربری سایته رو نداشتم نتونستم اونجا ذخیرش کنم

اگه به پست دوم من در این صفحه دقت کنید متوجه منظورم میشید. آقا یا خانم molla جوابشون مرتبط بود. ولی ممنونم از جواب شما.