رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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

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

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

اما وقتی رزولیشن رو روی 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;
}

13823733531.jpg

13823733532.jpg

لینک به ارسال

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

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

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

لینک به ارسال

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

موردوم هم:

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

لینک به ارسال

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

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

01.zip

لینک به ارسال

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

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

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

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

لینک به ارسال

سلام.

اول اینکه این مشکل به خاطر 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 هم درصد نزارین.

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

لینک به ارسال

موردوم هم:

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

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

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...