چطوری یک بنر تبلیغاتی 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%        {}

}