کمک در ادیت فایل css

as_ja882

تازه وارد
18/8/14
70
0
6
سلام به همگی دوستان.من یه منوی دایره ای رو روی سایتم نصب کردم که به صورت عمودی نمایش داده میشه.عکسش رو ضمیمه کردم ببینید.حالا من میخوام افقی بشه کد css رو میزارم اگه از دوستان کسی میدونه بگه چه تغییری تو این کد بدم؟


body{
margin:0;
background:url(../images/bg_2.png); /* call background image */
}
/* ========== THE MAIN FONT ========== */
@font-face{
/* call font */
font-family:"BebasNeue";
src:url('../font/BebasNeue.eot');
src:url('../font/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('../font/BebasNeue.ttf') format('truetype'),
url('../font/BebasNeue.svg#svgFontName') format('svg');
}
/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{
width:195px; /* width */
margin:60px 0 0 30px; /* separates menu 60px from top and 30px from left side */
float:left; /* go left */
}
.menu ul{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
list-style:none;
}
/* ========== LINKS/CIRCLES ========== */
.menu ul li{
width:135px; /* width */
height:135px; /* height */
margin-bottom:-35px;
position:relative;
text-align:center; /* text goes to the center */
overflow:hidden;
-webkit-border-radius:70px; /* from cubes to circles */
-moz-border-radius:70px; /* from cubes to circles */
border-radius:70px; /* from cubes to circles */
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
.menu ul li:nth-child(even){
float:left; /* one link goes to the left */
}
.menu ul li:nth-child(odd){
float:right; /* next link goes to the right */
}
.menu ul li a{
display:block;
width:100%; /* full width */
height:100%; /* full height */
text-decoration:none;
}
/* ========== MAIN TEXT/DESCRIPTION TEXT ========== */
.menu .headline, .menu .description{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
/* ========== MAIN TEXT ========== */
.menu .headline{
padding-top:45px; /* separates title 45px from top */
font-family:"BebasNeue"; /* call font */
font-size:22px; /* font size */
color:#333; /* color */
text-transform:uppercase; /* from lowercase to uppercase */
text-shadow:0 0 1px #CCC;
}
/* ========== DESCRIPTION TEXT ========== */
.menu .description{
font-family:'Shadows Into Light Two', cursive; /* call Google Web Font */
font-size:15px; /* font size */
color:#999; /* color */
text-shadow:1px 1px 1px #CCC;
}
/* ========== MAIN TEXT ON MOUSEOVER ========== */
.menu ul li:hover .headline{
font-size:32px; /* font size */
color:#F00; /* color */
-webkit-animation:fromLeft 0.4s ease-in-out;
-moz-animation:fromLeft 0.4s ease-in-out;
-o-animation:fromLeft 0.4s ease-in-out;
animation:fromLeft 0.4s ease-in-out;
}
/* ========== MAIN TEXT ON MOUSE CLICK ========== */
.menu ul li:active .headline{
color:#FFF; /* color */
}
/* ========== DESCRIPTION TEXT ON MOUSEOVER ========== */
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}
@-webkit-keyframes fromLeft{
from{
opacity:0;
-webkit-transform:translateX(-70%);
}
to{
opacity:1;
-webkit-transform:translateX(0%);
}
}
@-moz-keyframes fromLeft{
from{
opacity:0;
-moz-transform:translateX(-70%);
}
to{
opacity:1;
-moz-transform:translateX(0%);
}
}
@-o-keyframes fromLeft{
from{
opacity:0;
-o-transform:translateX(-70%);
}
to{
opacity:1;
-o-transform:translateX(0%);
}
}
@keyframes fromLeft{
from{
opacity:0;
transform:translateX(-70%);
}
to{
opacity:1;
transform:translateX(0%);
}
}
/* LizardTheme/October2012 */​
کد:
/* Animated Vertical Circles Menu ( Theme 1 ) - Animation 4 */
Untitled-2.jpg

 

farsadf

کاربر عضو
11/1/13
383
0
16
19
.menu ul li باید display:inline-block; داشته باشه

 

farsadf

کاربر عضو
11/1/13
383
0
16
19
نه تو فایل css :

display:inline-block;
}​
کد:
.menu ul li{
تگ های p و اون enter ها رو هم بردار

 
آخرین ویرایش توسط مدیر:

as_ja882

تازه وارد
18/8/14
70
0
6
نه تو فایل css :


display:inline-block;
}​
کد:
.menu ul li{
تگ های p و اون enter ها رو هم بردار
ببخشید واقعا من متوجه نشدم اخه تو فیل css من .menu ul li{ هست اما این:

display:inline-block; که نیست.تگ p هم نمیدونم چیه :D

 

hannanstd.ir

مدیر انجمن و توسعه دهنده ووکامرس پارسی
27/9/12
3,478
2
38
لنگرود
خب منظورشون این بود که شما باید اضافه کنی دیگه .

البته خودم تست نکردما

 

farsadf

کاربر عضو
11/1/13
383
0
16
19
اینتر هایی رو میگم که توی ul گذاشتی ( تو صفحه )

بعدشم display:inline-block رو تو همون جایی که گفتم بزار ( نگفتم هم رو حذف کن گفتم اضافه کن ) بعد نتیجه رو اعلام کن

 

as_ja882

تازه وارد
18/8/14
70
0
6
انجام دادم اما هیچ فرقی نکرد الان css شد این کد با اون چیزی که شما گفتین و من تغییر دادم:

body{
margin:0;
background:url(../images/bg_2.png); /* call background image */
}
/* ========== THE MAIN FONT ========== */
@font-face{
/* call font */
font-family:"BebasNeue";
src:url('../font/BebasNeue.eot');
src:url('../font/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('../font/BebasNeue.ttf') format('truetype'),
url('../font/BebasNeue.svg#svgFontName') format('svg');
}
/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{
width:195px; /* width */
margin:60px 0 0 30px; /* separates menu 60px from top and 30px from left side */
float:left; /* go left */
}
.menu ul{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
list-style:none;
}
/* ========== LINKS/CIRCLES ========== */
.menu ul li{
display:inline-block;
width:135px; /* width */
height:135px; /* height */
margin-bottom:-35px;
position:relative;
text-align:center; /* text goes to the center */
overflow:hidden;
-webkit-border-radius:70px; /* from cubes to circles */
-moz-border-radius:70px; /* from cubes to circles */
border-radius:70px; /* from cubes to circles */
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
.menu ul li:nth-child(even){
float:left; /* one link goes to the left */
}
.menu ul li:nth-child(odd){
float:right; /* next link goes to the right */
}
.menu ul li a{
display:block;
width:100%; /* full width */
height:100%; /* full height */
text-decoration:none;
}
/* ========== MAIN TEXT/DESCRIPTION TEXT ========== */
.menu .headline, .menu .description{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
/* ========== MAIN TEXT ========== */
.menu .headline{
padding-top:45px; /* separates title 45px from top */
font-family:"BebasNeue"; /* call font */
font-size:22px; /* font size */
color:#333; /* color */
text-transform:uppercase; /* from lowercase to uppercase */
text-shadow:0 0 1px #CCC;
}
/* ========== DESCRIPTION TEXT ========== */
.menu .description{
font-family:'Shadows Into Light Two', cursive; /* call Google Web Font */
font-size:15px; /* font size */
color:#999; /* color */
text-shadow:1px 1px 1px #CCC;
}
/* ========== MAIN TEXT ON MOUSEOVER ========== */
.menu ul li:hover .headline{
font-size:32px; /* font size */
color:#F00; /* color */
-webkit-animation:fromLeft 0.4s ease-in-out;
-moz-animation:fromLeft 0.4s ease-in-out;
-o-animation:fromLeft 0.4s ease-in-out;
animation:fromLeft 0.4s ease-in-out;
}
/* ========== MAIN TEXT ON MOUSE CLICK ========== */
.menu ul li:active .headline{
color:#FFF; /* color */
}
/* ========== DESCRIPTION TEXT ON MOUSEOVER ========== */
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}
@-webkit-keyframes fromLeft{
from{
opacity:0;
-webkit-transform:translateX(-70%);
}
to{
opacity:1;
-webkit-transform:translateX(0%);
}
}
@-moz-keyframes fromLeft{
from{
opacity:0;
-moz-transform:translateX(-70%);
}
to{
opacity:1;
-moz-transform:translateX(0%);
}
}
@-o-keyframes fromLeft{
from{
opacity:0;
-o-transform:translateX(-70%);
}
to{
opacity:1;
-o-transform:translateX(0%);
}
}
@keyframes fromLeft{
from{
opacity:0;
transform:translateX(-70%);
}
to{
opacity:1;
transform:translateX(0%);
}
}
/* LizardTheme/October2012 */​
کد:
/* Animated Vertical Circles Menu ( Theme 1 ) - Animation 4 */