Не получаются стили для карусели

[alanbus]

Не получаются стили для карусели

Хочу изменить дизайн карусели товаров на сайте http://srv23440.ht-test.ru/

-сейчас кнопки расположены сверху, но мне необходимо по бокам.

Для этого я создал 3 div и поместил их в контейнер, левый div для левой кнопки, правый для - правой, центральный для самой карсуели товаров. И вроде бы все ок, но все страшно съезжает. На каком этапе я совершил ошибку?

Исходный код

<?php // no direct access

defined('_JEXEC') or die('Restricted access'); ?>

<script type="text/javascript" src="/modules/mod_topmovie/assets/jquery.tinycarousel.min.js"></script>

<script type="text/javascript">

jQuery(function() {

jQuery('.zoocarousel').tinycarousel({ display: 2 });

});

</script>

<link rel="stylesheet" href="/modules/mod_topmovie/tmpl/carusel.css" type="text/css" />

<link href="carusel.css" rel="stylesheet" type="text/css">

<div class="zoocarousel"> <img src="/modules/mod_topmovie/assets/l-arrow.png" class="prev" style="cursor:pointer;" alt="Назад"> <img src="/modules/mod_topmovie/assets/r-arrow.png" class="next" style="cursor:pointer;" alt="Вперед">

<div class="viewport">

<ul class="overview">

<?php

foreach ($positions as $item) {

$src = '/modules/mod_raxo_allmode/tools/tb.php?src=/'.$item['image'].'&w=130&h=90&zc=0';

echo '<li style="width: 190px; text-align: center;

padding-top: 5px;

padding-right: 15px;

padding-bottom: 10px;

padding-left: 15px;">';

echo (isset($item['image'])) ? '<img class="cimage" src="'.$src.'" alt="img"/><br/>':'';

echo "<p id=\"names\">" . $item['name'] . "</p>";

echo (isset($item['price'])) ? $item['price'].'<br/>':'';

echo '</li>';

}

?>

</ul>

</div>

</div>

Новый код (с кнопками по бокам)

<?php // no direct access

defined('_JEXEC') or die('Restricted access'); ?>

<script type="text/javascript" src="/modules/mod_topmovie/assets/jquery.tinycarousel.min.js"></script>

<script type="text/javascript">

jQuery(function() {

jQuery('.zoocarousel').tinycarousel({ display: 2 });

});

</script>

<link rel="stylesheet" href="/modules/mod_topmovie/tmpl/carusel.css" type="text/css" />

<link href="carusel.css" rel="stylesheet" type="text/css">

<div class="maincarusel">

<div class="lblock"><img src="/modules/mod_topmovie/assets/l-arrow.png" style="cursor:pointer;" alt="Назад"> </div>

<div class="mblock">

<ul class="overview">

<?php

foreach ($positions as $item) {

$src = '/modules/mod_raxo_allmode/tools/tb.php?src=/'.$item['image'].'&w=130&h=90&zc=0';

echo '<li style="width: 190px; text-align: center;

padding-top: 5px;

padding-right: 15px;

padding-bottom: 10px;

padding-left: 15px;">';

echo (isset($item['image'])) ? '<img class="cimage" src="'.$src.'" alt="img"/><br/>':'';

echo "<p id=\"names\">" . $item['name'] . "</p>";

echo (isset($item['price'])) ? $item['price'].'<br/>':'';

echo '</li>';

}

?>

</ul>

</div>

<div class="rblock"><img src="/modules/mod_topmovie/assets/r-arrow.png" style="cursor:pointer;" alt="Вперед"></div>

</div>

Стили

@charset "utf-8";

/* CSS Document */

.zoocarousel {

height: 250px;

width: 900px;

overflow:hidden;

}

.zoocarousel .viewport {

float: left;

width: 900px;

height: 250px;

overflow: hidden;

position: relative;

}

.zoocarousel .buttons {

display: block;

margin: 0px 0px 0 0;

float: left;

}

.zoocarousel .next {

margin: 0px 0 0 0px;

}

.zoocarousel .prev {

margin-top: 0px;

margin-right: 0;

margin-bottom: 0;

margin-left: 0px;

}

.zoocarousel .disable {

opacity: 0.7;

filter: alpha(opacity=70);

moz-opacity: 0.7;

khtml-opacity: 0.7;

}

#names {

color: #FFF !important;

padding: 5px;

text-decoration: none;

background-color: #8a8a8a;

background-image: url(/modules/mod_topmovie/assets/caruselbg.gif);

min-height:52px;

background-repeat: repeat-x;

background-position: top;

margin-top: 0px;

border-top-color: #CCC;

border-right-color: #CCC;

border-bottom-color: #CCC;

border-left-color: #CCC;

font-size: 11px;

font-weight: bold;

}

#names a:hover

{color: #CCC !important;

}

#names a:link

{

color: #FFF !important;

text-decoration: none;

}

#names a:active

{

color: #FFF !important;

text-decoration: none;

}

.zoocarousel .overview {

list-style: none;

position: absolute;

padding: 0;

margin: 0;

left: 0;

top: 0;

}

.zoocarousel .overview li {

float: left;

margin: 0 20px 0 0;

padding: 1px;

height: 121px;

width: 236px;

list-style: none;}

.carusel2 {

width: 190px; text-align: center;

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 2px;

padding-top: 10px;

padding-right: 15px;

padding-bottom: 20px;

padding-left: 15px; }

.cimage {

text-align:center;

height: 90px;

border: 2px solid #CCC;

width: 90px;

padding-top: 10px;

padding-right: 48px;

padding-bottom: 10px;

padding-left: 48px;

}

.maincarusel {

width: 980px;

clear: both;

position: relative;

overflow: hidden;

height: 250px;

float: left;

}

.lblock {

position: relative;

height: 250px;

width: 40px;

float: left;

overflow: hidden;

}

.mblock {

position: relative;

height: 250px;

width: 900px;

float: left;

overflow: hidden;

}

.rblock {

position: relative;

height: 250px;

width: 40px;

float: left;

clear: right;overflow: hidden;

}

Edited November 11, 2011 by alanbus