سلام
دوستان من یک قالب رو فارسی کردم و منوی اون رو که سمت چپ بوده با این تکنیک سعی کردم به وسط صفحه بیارم که کدش رو می بینید :
#menu{
float: left;
margin-left: 300px;
margin-top: -40px;
padding: 0;
background: #000;
}
اما مشکل اینه که در مرورگر های مختلف اون 300 پیکسلی که فاصله دادم به چپ یکجور شناسایی نمیشه و البته میدونم راه وسط چین کردنش هم این نیست
با دستورات auto margin چپ و راست هم در انجمن سرچ کردم نیجه نداد
لطفا اساتید کمک کنین ..... دیگه خستم کرد !!!
البته فکر میکنم باید از این قسمت استایل کار رو اصلاح کنم تا درست بشه که کپی میکنم کد رو :
/** =====================================================
Logo and menu bar
========================================================= */
#top{
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: 0;
overflow: hidden;
background: url(images/black-bg.png) 0 0 repeat;
z-index: 12;
}
#top #logo a img{
margin-right:400px;
}
#top #menu-close-open{
position: absolute;
right: 10px;
width: 30px;
height: 30px;
}
#top #menu-close-open.withbg{
background-color: #000;
padding: 5px;
}
#menu-close-open a.close{
display: block;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
background: url(images/menu-close-open.png) scroll 0 0 no-repeat;
}
#menu-close-open a.close:hover{
background-position: -40px 0px;
}
#menu-close-open a.open{
display: block;
width: 30px;
height: 30px;
margin: 0px 50px 0px 0px;
padding: 0;
background: url(images/menu-close-open.png) scroll 0 -40px no-repeat;
}
#menu-close-open a.open:hover{
background-position: -40px -40px;
}
/** =====================================================
menu
========================================================= */
#menu{
float: left;
margin-left: 300px;
margin-top: -40px;
padding: 0;
background: #000;
}
#menu ul#wipnav{
margin: 0;
padding: 0px;
list-style-type: none;
z-index: 1002;
position: relative;
float: left;
}
#wipnav li{
list-style-type: none;
margin: 0px 5px 0px 5px;
padding: 0px;
float: left;
overflow: visible;
display: inline;
}
#wipnav li a{
margin: 0;
padding: 0px 15px 0px 15px;
color: #dadada;
text-transform: uppercase;
font-weight: bold;
font-family: BYekan , sans-serif ;
font-size: 16px;
letter-spacing: 0px;
border-radius: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#wipnav li a:hover, #wipnav li a.onhov{color: #FFF;}
#wipnav ul {
position:absolute;
list-style-type: none;
top:auto;
left: auto;
text-align:center;
margin: 65px 0px 0px -160px;
display:none;
z-index: 1001;
width: 200px;
}
#wipnav ul ul,
#wipnav ul ul ul,
#wipnav ul ul ul ul,
#wipnav ul li.onhove ul{
position:absolute;
top:auto;
left:190px;
margin: 65px 0px 0px -160px;
z-index: 1001;
}
#wipnav ul li{
width : 198px;
margin: 65px 0px 0px -160px;
height: auto!important;
margin: 0 0 0 0;
border-left: none;
border-right: none;
}
#wipnav ul .onhove,
#wipnav ul li:hover,
#wipnav ul .current_page_item{
margin: 65px 0px 0px -160px;
margin: 0;
}
#wipnav li:hover ul ul,
#wipnav li:hover ul ul ul,
#wipnav li:hover ul ul ul ul{display:none;}
#wipnav li:hover ul,
#wipnav li li:hover ul,
#wipnav li li li:hover ul,
#wipnav li li li li:hover ul{
display:block;
}
#wipnav li ul a, #wipnav li.onhove ul a,
#wipnav li.onhove li.onhove ul a,
#wipnav li.onhove li.onhove li.onhove ul a{
width : 168px;
height: auto;
line-height: 18px;
font-size: 12px!important;
padding: 15px 15px;
margin: 0;
display: block;
float: left;
color: #cacaca;
letter-spacing: 0px;
font-family: BYekan , sans-serif ;
}
/** menu background settings start from here */
#wipnav li a:hover{
color: #FFF;
}
#wipnav li a:hover span{
color: #FFF;
}
#wipnav ul a,
#wipnav ul ul a,
#wipnav ul ul ul a{
background: #0A0A0A url(images/menu-line.png) scroll left top repeat-x;
}
#wipnav ul li:first-child>a, #wipnav ul li:first-child>a:hover, #wipnav ul li:first-child>a.pageactive{
background-image: none!important;
}
#wipnav ul a:hover, #wipnav ul a.onhov, #wipnav ul a.pageactive,
#wipnav ul ul a:hover, #wipnav li li ul a.onhov, #wipnav ul ul a.pageactive, #wipnav ul ul ul a.pageactive,
#wipnav ul ul ul a:hover{
color: #FFF!important;
}
#wipnav li a.pageactive{
color: #FFF;
}
لطفا راهنمایی کنید