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

[jafararefi 10]

سلام.خسته نباشید.دارم یک قالب برای جوملا طراحی می کنم. اما می خوام کاری کنم که وقتی ماژولی به یکی از موقعیت های right یا left اختصاص داده می شه ماژول ها ازهم فاصله داشته باشند.چکار کنم؟

لطفا سریع کمکم کنید.خیلی متشکرم

[saber 208]

از margin استفاده کنید

[jafararefi 10]

خب درون چه کدی ازش استفاده کنم.در صورت امکان نمونه کد بزارید.

[ATTACH=CONFIG]4484[/ATTACH]

[jafararefi 10]

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

[mmfallah 67]

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

 #left{
   float: left;
   margin-right:10px;
 }
 #center{
   float: left;

 }
 #right{
   float: right;
    margin-left:10px;
 }

با روش های مختلفی می شه استفاده کرد

[hoseinkord 11]

برای موقعیت های قالبتون استفاده کنید مثلا اگر موقعیت right دارید

#right{margin:10px;}

[jafararefi 10]

این فایل css

توضیح بدین چکار کنم

@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 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;


}

[reza.sh 19]

دوست عزیز ادرس بدید تا بهتر راهنمایی بشید (البته اگه انلاینه ) با استفاده از فایر باگ

[jafararefi 10]

نه آنلاین نیست روی لوکاله

[amirparvaneh 100]

برای هر ماژول

;margin-top:10px بدید

[jafararefi 10]

خب من فایل سی ای اس رو بالا گذاشتم.درصورت امکان دقیقا بگین داخل اون چیکار کنم.

از همتون معذرت می خوام

[amirparvaneh 100]

نام موقعیت توی css چیه؟

[jafararefi 10]

نام موقعیت :#right

[pari8002 10]

همشهری عزیز برای این که هر کدام از ماژول های شما از ماژول بالایی فاصله بگیرد باید به moduletable مارگین بدهید نه به کل دایو

به عنوان مثال اگر نام دایو شما left است باید بنویسن:

#left .moduletable

{margin-top:10px;}