سلام.خسته نباشید.دارم یک قالب برای جوملا طراحی می کنم. اما می خوام کاری کنم که وقتی ماژولی به یکی از موقعیت های right یا left اختصاص داده می شه ماژول ها ازهم فاصله داشته باشند.چکار کنم؟
لطفا سریع کمکم کنید.خیلی متشکرم
درضمن من یه تاپیک به این عنوان زده بودم ودوستان جواب هایی هم دادند ولی هیچ کدوم درست کار نکرد.
این از عکس:[ATTACH=CONFIG]4516[/ATTACH]
این از کد های سی اس اس:
@font-face {
font-family: 'pars';
src: url('../font/BYekan.eot');
src: url('../font/BYekan.eot?#iefix') format('embedded-opentype'),
url('../font/BYekan.woff') format('woff'),
url('../font/BYekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
background-color:#3b3c15;
color:#333333;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:20px;
direction:rtl;
}
#main{
width:980px;
height:auto;
margin:0 auto;
border-radius:15px;
}
#heder{
height:284px;
width:980px;
background-image: url(../images/heder.jpg);
margin-bottom:10px;
border-radius:15px;
}
#search {
float:left
height:25px;
width:250px;
margin-right:720px;
padding-top:260px;
color:#999999;
}
@charset "utf-8";
/* CSS Document */
<!-- CSS code -->
/* menu*/
#menu1 {
direction:rtl;
overflow: visible;
color: #000;
position: relative;
z-index: 999;
}
#menu2 {}
#menu {
min-height: 40px;
width:auto;
background-color: #819719;
margin:0 auto;
border: none ;
-webkit-border-radius: 8px;
-moz-border-radius: 8px; border-radius: 8px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
*zoom: 1;
}
#menu ul {
margin:0;
padding:0;
}
#menu ul li {
list-style:none;
display:inline-block;
position: relative;
padding:0;
margin:0;
height:20px;
border-left:1px solid #b5c5e5;
font-family:pars,Arial, Helvetica, sans-serif;
}
#menu ul li a {
display:block;
padding:0 10px;
margin:0;
line-height:35px;
text-decoration:none;
font-size:15px;
color:#000;
}
#menu .menu li a {
color: #000;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
#menu .menu li a:hover {
background-color: transparent;
color: #fd2003;
text-decoration: none;
background-color: #dadacf;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu .menu .active a,#menu .nav .active a:hover {
color: #ce205a;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li a span.menutitle {
display:block;
}
#menu ul li a span.menudesc {
float:right;
clear:both;
font-size:11px;
line-height:12px;
margin:-20px 0 0 0;
font-family:pars,Arial, Helvetica, sans-serif
}
/* submenu */
#menu ul li ul {
position:absolute;
width:170px;
right:-999em;
margin:0;
padding:5px;
background-color: #819719;
border: 3px solid #dedede;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#menu ul li a:hover {
text-decoration:overline;
text-shadow:0px 1px 1px #FFF;
}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right:0;
}
#menu ul li ul li:hover ul {
right:170px;
top:0;
}
#menu ul li ul li {
padding:0;
height:auto;
width:170px;
margin:0 0 5px 0;
border-right:none;
background-color:#000000;
}
#menu ul li:hover ul li a {
text-shadow:none;
margin:0;
padding:1px 10px 1px 0px;
line-height:25px;
font-size:13px;
text-align:right;
}
#menu ul li:hover ul li {
background-color:#FFFFFF;
border-radius:7px;
}
#menu ul li:hover ul li a,
#menu ul li ul li a,
#menu ul li li ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a {
color:#000;
border-radius:25px
border:1px solid #b5c5e5;
}
#menu ul li ul li a:hover,#menu ul li ul li.active a,#menu ul li.active ul li a:hover,#menu ul li li ul li a:hover,#menu ul li ul li.active ul li.active a,#menu ul li ul li.active a,#menu ul li.active ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #b2d21a;
border-color: #b2d21a #b2d21a #b2d21a;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style:solid; border-width:1px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#menu ul li ul ul, #menu ul li:hover ul ul,#menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right:-999em;
padding:5px;
margin:-5px 0 0 0;
}
#slider {
height:200px;
width:980px;
border-radius:20px;
margin:0 auto;
overflow:hidden;
padding:5px 0px 0px 0px;
}
#top-users {
width:980px;
height:200px;
float:left;
margin: 0 auto;
margin-top:10px;
}
#user1 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
margin-bottom:5px;
float:left;
overflow:hidden;
}
#user1, #user2, #user3, #user4, #b-user1, #b-user2, #b-user3, #buser4{
background: -linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
background: -moz-linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
background: -webkit-linear-gradient(top , #999966 0%, #999933 0%, #999900 100%);
background: -o-linear-gradient(top , #999966 0%, #999933 50%, #999900 100%);
filter: progid:DXimagetransform.Microsoft.gradient(startcolorstr='#999966',endcolorstr='#999900');
}
h3{
height:42px;
weight:150px;
background-image: url(../images/loh.png);
background-repeat:no-repeat;
margin:0 auto;
margin-top:7px;
margin-bottom:5px;
font-family:pars;
font-size:17px;
font-style:normal;
color:#CCCCCC;
text-align:center;
padding-top:5px;
}
#user1 .moduletable{
font-family:pars;
font-size:16px;
}
#user2 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#user2 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}
#user3 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#user3 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}
#user4 {
height:200px;
width:240px;
border-radius:5px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#user4 .moduletable{
font-family:pars;
font-size:16px;
color:#000000;
}
#center {
width:980px;
height:auto;
margin:5px auto 5px auto;
}
#left {
width:230px;
height:auto;
margin:0 auto;
margin-bottom:5px;
margin-top:5px;
border-radius:15px;
background-color:#CCCC99;
float:left;
overflow:hidden;
}
#left .moduletable
{margin-top:10px;}
#left .moduletable h3{
background-image: url(../images/12.png);
}
#left .moduletable form#login-form ul li {
list-style:none;
font-family:pars;
font-size:11px;
}
#left .moduletable form#login-form fieldset.userdata p#form-login-username label{
font-family:pars;
font-size:13px;
}
#left .moduletable form#login-form fieldset.userdata p#form-login-password label{
font-family:pars;
font-size:13px;
}
#left .moduletable form#login-form fieldset.userdata p#form-login-remember label{
font-family:Pars;
font-size:13px;
}
#left .moduletable form#login-form fieldset.userdata p#form-login-username input#modlgn-username.inputbox{
width:130px;
height:20px;
border-radius:50px;
background-image: url(../images/user1.png);
background-position:right;
background-size:contain;
background-repeat:no-repeat;
margin-top:10px;
}
#left div.moduletable form#login-form fieldset.userdata p#form-login-password input#modlgn-passwd.inputbox{
width:130px;
height:20px;
border-radius:50px;
background-image: url(../images/pass1.png);
background-position:right;
background-size:contain;
background-repeat:no-repeat;
margin-right:57px;
margin-top:-23px;
}
#left .moduletable form#login-form fieldset.userdata input.button{
background-color:#999900;
margin-right:150px;
height:30px;
width:60px;
border-radius:10px;
font-family:pars;
}
#contents {
width:503px;
height:auto;
background-color:#e7e7e1;
margin:0 auto;
margin-top:5px;
border-radius:15px;
background-color:;
float:left;
margin-left:5px;
overflow:hidden;
font-family:pars;
font-size:14px;
padding:0px 5px 0px 5px;
}
#contents .blog-featured h2{
width:450px;
height:33px;
background-color:#999933;
border-radius:10px;
font-size:16px;
padding:8px 6px 0px 0px;
background-image: url(../images/30.png);
background-size:contain;
background-repeat:no-repeat;
}
#contents .blog-featured .items row{
margin-bottom:5px;
}
#right {
width:230px;
height:auto;
margin:0 auto;
margin-top:5px;
border-radius:15px;
background-color:#CCCC99;
float:right;
overflow:hidden;
font-family:pars;
font-size:16px;
}
#right .moduletable h3{
background-image: url(../images/12.png);
}
#right div.moduletable p{
text-align:center;
}
#b-users {
width:980px;
height:200px;
float:left;
margin: 0 auto;
margin-top:5px;
}
#b-user1 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
overflow:hidden;
}
#b-user2 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#b-user3 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#b-user4 {
height:200px;
width:240px;
border-radius:15px;
background-color:#CCCC99;
float:left;
margin-left:5px;
overflow:hidden;
}
#footer {
height:40px;
width:980px;
border-radius:15px;
background-color:#CCCC99;
clear:both;
float:left;
margin-left:5px;
overflow:hidden;
margin-top:5px;
}
اگر به عکس دقت کنین من می خوام مثلا در موقعیت left دو تا ماژول که قرار دارن از هم فاصله داشته باشن مثل سایت sh-haggoy.ir
در صورت امکان سریع کمکم کنین.
متشکر
