چطوری یک بنر تبلیغاتی css رو در موقعیت نمایش بدیم

[ehsansabet]

من الان دمو رو چک کردم، این کدهای css رو داخل template.css اضافه کن ببین درست میشه؟!

کد: (انتخاب همه)

#dl2{
  display:block;
  font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
  padding: 10px 20px 10px 20px;
  margin:5px;
  background-image:url('http://www.4design.in/wp-content/uploads/DIRT2DEATHfont.jpg');
  background-color:#0b121b;
  background-repeat:repeat;
  background-position:right center;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  width:468px;
  height:60px;
  box-shadow: 0px 0px 5px 1px #3A3A3A;
  text-shadow: 0 0px 2px #726169;
  border: 2px solid #fe0072;
  overflow:hidden;
  color:#fff;
   }
   #dl2 ul.dl{
    width:210px;
    margin: -10px 80px 0px 100px;
    list-style:none;
}
   #dl2 ul.dl li{
   display:block;
    background: #fe0072;
    color: #fff;
    text-shadow: 0 1px 0 #363636;
    border-radius:0px 0px 5px 5px;
    box-shadow: 0px 0px 5px 1px #3A3A3A;
    padding: 5px;
    width:200px;
    text-align:center;
    font-size:0px;
}
#dl2 a{
    text-decoration:none;
    color:#000;
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    -o-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
}
#dl2 a:hover{
    color: transparent;
    text-shadow: 0px 0px 2px #c5e4f4;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    -o-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
}
#my_banner{
animation:my_banner 5s infinite;
-moz-animation:my_banner 5s infinite;
-webkit-animation:my_banner 5s infinite;
font-size:18px;
float:right;
}
@keyframes my_banner{
0%        {}
10%        {}
20%     {transform: scale(2);}
30%        {filter:alpha(opacity=0);opacity:0;}
40%     {transform: scale(2) rotate(360deg);}
50%     {transform: scale(2) rotate(-360deg);}
60%        {padding: 0px 80px 0px 0px;}
70%        {transform: scale(2);}
80%        {padding: 0px 70px 0px 0px;}
90%        {transform: scale(2);}
}
@-webkit-keyframes my_banner{
0%        {}
10%        {}
20%     {-webkit-transform: scale(2);}
30%        {filter:alpha(opacity=0);opacity:0;}
40%     {-webkit-transform: scale(2) rotate(360deg);}
50%     {-webkit-transform: scale(2) rotate(-360deg);}
60%        {padding: 0px 80px 0px 0px;}
70%        {-webkit-transform: scale(2);}
80%        {padding: 0px 70px 0px 0px;}
90%        {-webkit-transform: scale(2);}
}
@-moz-keyframes my_banner{
0%        {}
10%        {}
20%     {-moz-transform: scale(2);}
30%        {filter:alpha(opacity=0);opacity:0;}
40%     {-moz-transform: scale(2) rotate(360deg);}
50%     {-moz-transform: scale(2) rotate(-360deg);}
60%        {padding: 0px 80px 0px 0px;}
70%        {-moz-transform: scale(2);}
80%        {padding: 0px 70px 0px 0px;}
90%        {-moz-transform: scale(2);}
}
#my_banner1{
animation:my_banner1 5s infinite;
-moz-animation:my_banner1 5s infinite;
-webkit-animation:my_banner1 5s infinite;
font-size:18px;
float:left;
text-shadow: 0 0px 5px #000;
margin:-15px 0 0 0;
padding:5px;
}
@keyframes my_banner1{
0%        {}
10%        {}
20%     {margin:-15px 0px 0px -190px;}
30%        {margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%        {margin:-15px 0px 0px -190px;}
70%        {}
80%        {}
90%        {}
}
@-webkit-keyframes my_banner1{
0%        {}
10%        {}
20%     {margin:-15px 0px 0px -190px;}
30%        {margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%        {margin:-15px 0px 0px -190px;}
70%        {}
80%        {}
90%        {}
}
@-moz-keyframes my_banner1{
0%        {}
10%        {}
20%     {margin:-15px 0px 0px -190px;}
30%        {margin:-15px 0px 0px -190px;}
40%     {}
50%     {}
60%        {margin:-15px 0px 0px -190px;}
70%        {}
80%        {}
90%        {}
}