افقی کردن منو در کدهای رسپانسیو

[فرهاد-سئو 905]

سلام

خسته نباشین اساتید و کاربران خوب انجمن

من یه قالب دارم طراحی میکنم که این دومین قالب من از وردپرس میشه (یعنی تازه کارم )

الان قالب در سایز معمولی مشکلی نداره و به درستی لود میشه

اما وقتی رزولیشن رو روی 768*1024 میزارم قالب میریزه به هم

برا همین یه فایل respansive.css درست کردم و این کدها رو برای قسمت هدر گذاشتم اما منو از حالت افقی به عمودی در میادش

هر کاری میکنم هم منو درست نمیشه

با فایررباگ مرورگر هم چک کردم دقیقا کدهای خود روزلیشن مربوطه رو لود میکنه اما نمیدونم چرا منو رو عمودی میکنه

این کدهای قالب در حالت معمولی :

#menu-nav {
}
#menu-nav .menu {
width: 415px;
height: 100px;
margin: 5px 35px 0 5px;
float: right;
}
#menu-nav .menu ul {
list-style:none;
}
#menu-nav .menu ul li {
padding: 5px;
width: 105px;
height: 74px;
float: right;
background: url(images/bac-menu1.png) repeat-x;
border: solid 1px #DBDBDB;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
border-bottom: solid 3px #ADADAD;
margin: 2px;
}
#menu-nav .menu ul li:hover {
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background: url(images/bac-menu.png) repeat-x;
width: 105px;
height: 87px;
border: solid 1px #B39302;
border-bottom: solid 3px #876f01;
}
#menu-nav .menu ul li a {
font-family: BYekan;
font-size: 17px;
color: #747474;
text-align: center;
display: inline-block;
width: 105px;
height: 87px;
padding-top: 25px;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
text-decoration: none;
font-weight: normal;
}
#menu-nav .menu ul li a:hover {
background: url(images/felesh.png) no-repeat top center;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
text-shadow: 0px 1px 1px #DDC200;
color: #775817;
}

و این هم کدهای رسپانسیو :

#menu-nav {
}
    #menu-nav .menu {
width: 30%;
height: 85% !important;
margin: 5px 5px 0 5px;
}
#menu-nav .menu ul {
  list-style:none;
}
#menu-nav .menu ul li {
  width: 65%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  float:right;
}
#menu-nav .menu ul li:hover {
  width:65%;
  height:66px;
}
#menu-nav .menu ul li a {
  font-family: BYekan;
  font-size: 10px;
  width: 100%;
  height: 40px;
}

[فرهاد-سئو 905]

یه سوال دیگه داشتم

آیا برای تصاویری که داخل مطلب ها میزاریم به غیر از تصویر شاخص , تابعی وجود داره تا در جایی برای نمایش تصویر مربوط به مطلب رو نشون بدیم؟

چون تصویر شاخص در مطالب قابل کلیک نیست که تصویر رو با سایز واقعی نشون بده برا همین دنبال تابع تصاویر میگردم

[Morteza 34190]

در مورد اول اگر از خروجی یک save as web بگیرید و پیوست کنید راحتتر میشه کمک کرد

موردوم هم:

http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

[فرهاد-سئو 905]

این کد یه صفحه از قالب هست

بعد از اینکه صفحه رو بزرگ میکنی که روزلیشن زیر 1200 بیادش اون موقع منو میریزه به هم

01.zip

[فرهاد-سئو 905]

آقا دردش رو فهمیدم

من پهنا رو با % میزدم که واکنش گرا باشه اما متاسفانه زبون نفهم بود و حالیش نمیشد

الان با px زدم درست شدش

خب راهی نیستش که بشه بصورت % وارد کنم و به نریزه؟

[اشکان 1989]

سلام.

اول اینکه این مشکل به خاطر ul منو هستش.

باید بهش width میدادین.

#menu-nav .menu ul {
  list-style:none;
  width:100%
}
#menu-nav .menu ul li {
  width: 25%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  float:right;
}
#menu-nav .menu ul li:hover {
  width:25%;
  height:66px;

li هم چون در ul عرض 100 درصد هست باید اندازه کم میشد.(روی 25% گذاشتم درست شد.)

در ضمن برای height هم درصد نزارین.

بهم خواهد ریخت.

[فرهاد-سئو 905]

موردوم هم:

http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

نتونستم ازش استفاده کنم !

من میخوام برای پست ها یه تصویر بزارم که وقتی روی عکس کلیک میکنم عکس با سایز واقعی باز بشه

همینطور بتونم یه متغییر ازش بسازم که بتونم در جای دیگه از همین کد بتونم استفاده کنم که بصورت تولتیب تصویر دار نشون بدمش

[اشکان 1989]

نتونستم ازش استفاده کنم !

من میخوام برای پست ها یه تصویر بزارم که وقتی روی عکس کلیک میکنم عکس با سایز واقعی باز بشه

همینطور بتونم یه متغییر ازش بسازم که بتونم در جای دیگه از همین کد بتونم استفاده کنم که بصورت تولتیب تصویر دار نشون بدمش

کد های فایل رسپانسیو هستن.فقط جایگزین کنید بعد کش مرورگر رو خالی کنید درست میشه.

نتونستم ازش استفاده کنم !

من میخوام برای پست ها یه تصویر بزارم که وقتی روی عکس کلیک میکنم عکس با سایز واقعی باز بشه

همینطور بتونم یه متغییر ازش بسازم که بتونم در جای دیگه از همین کد بتونم استفاده کنم که بصورت تولتیب تصویر دار نشون بدمش

میخواین که در صفحه جدید باز بشه یا به صورت پاپ آپ؟(میتونید لینک تصویر سایز اصلی رو به تصویر شاخص بدین و با افزونه های light box به صورت پاپ آپ نمایشش بدین.)

مورد دوم هم بزارین دوستان راهنماییتون کنن.