Перейти к содержимому


Фотография
- - - - -

Как сделать выравнивание характеристик товара не по левому краю

выравнивание строк

Лучший Ответ motopehota , 30 April 2013 - 10:59

Изменил в настройках нового каталога товара (katalog-tovara) псевдоним  наproduct и всё стало как надо, т.е. как на демо-сайте.

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 4

#1 motopehota

motopehota

Отправлено 30 April 2013 - 02:59

Добрый день, как сделать выравнивание характеристик товара, как в демо-сайте, а ни как у меня по левому краю. Спасибо.

0_89583_5a2feb59_L.jpg


  • 0

#2 RomanL

RomanL

Отправлено 30 April 2013 - 05:32

Дайте ссылку


  • 0
[color=#aa0000]Не забывайте нажимать кнопку «Вопрос Решён» и «+1» под сообщением, которое Вам помогло[/color]

#3 motopehota

motopehota

Отправлено 30 April 2013 - 05:54

К сожалению сайт (joomla3) у меня только на локальном компьютере, могу только html код дать, если поможет.

<!DOCTYPE HTML>
<html lang="ru-ru" dir="ltr">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="http://localhost/jbzoo1/" />
  <meta name="description" content="Заборы" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Каталог товара</title>
  <link href="http://localhost/jbzoo1/" rel="canonical" />
  <link href="/jbzoo1/index.php/feed/rss/katalog-tovarov/professionalnye-ograzhdeniya.feed" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/jbzoo1/index.php/feed/atom/katalog-tovarov/professionalnye-ograzhdeniya.feed" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/jbzoo1/templates/yoo_sync/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/jbzoo1/media/zoo/applications/jbuniversal/assets/css/jbzoo.css?ver=20130427" type="text/css" />
  <link rel="stylesheet" href="/jbzoo1/media/zoo/applications/jbuniversal/assets/css/libraries.css?ver=20130427" type="text/css" />
  <link rel="stylesheet" href="/jbzoo1/media/zoo/elements/rating/assets/css/rating.css?ver=20130427" type="text/css" />
  <link rel="stylesheet" href="/jbzoo1/cache/widgetkit/widgetkit-d1add815.css" type="text/css" />
  <script src="/jbzoo1/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/jbzoo1/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/assets/js/responsive.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/components/com_zoo/assets/js/default.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/libraries/jquery/jquery.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.mousewheel.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.easing.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.fancybox.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.jbzooprice.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.compare.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/applications/jbuniversal/assets/js/jquery.favorite.min.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/media/zoo/elements/rating/assets/js/rating.js?ver=20130427" type="text/javascript"></script>
  <script src="/jbzoo1/cache/widgetkit/widgetkit-06e798a2.js" type="text/javascript"></script>
  <script type="text/javascript">

jQuery(function($){
                setTimeout(function(){
                    var maxHeight = tmpHeight = 0;
                    $(".jbzoo .items .column").each(function(n, obj){
                        var tmpHeight = parseInt($(obj).height(), 10);
                        if (maxHeight < tmpHeight) {
                            maxHeight = tmpHeight;
                        }
                    }).css({height:maxHeight});

                    var maxHeight = tmpHeight = 0;
                    $(".jbzoo .subcategories .column").each(function(n, obj){
                        var tmpHeight = parseInt($(obj).height(), 10);
                        if (maxHeight < tmpHeight) {
                            maxHeight = tmpHeight;
                        }
                    }).css({height:maxHeight});

                    var maxHeight = tmpHeight = 0;
                    $(".jbzoo .related-items .column").each(function(n, obj){
                        var tmpHeight = parseInt($(obj).height(), 10);
                        if (maxHeight < tmpHeight) {
                            maxHeight = tmpHeight;
                        }
                    }).css({height:maxHeight});
                }, 300);
            });
jQuery(function($){
                $("a.jbimage-link[rel=jbimage-popup], a.jbimage-gallery").fancybox({
                    "helpers" : {
                        "title"  : { type : "outside" },
                        "buttons": { position:"top" },
                        "thumbs" : { width :80, height:80 }
                    }
                });
            });
jQuery(function($){ $(".jbzoo .jsPrice").JBZooPrice(); });
jQuery(function($){ $(".jbzoo .jsJBZooCompare").JBCompareButtons(); });
jQuery(function($){ $(".jbzoo .jsJBZooFavorite").JBFavoriteButtons(); });
  </script>
  <!--[if lte IE 8]><link rel="stylesheet" href="/jbzoo1/media/widgetkit/css/ie.css" /><![endif]-->

<link rel="apple-touch-icon-precomposed" href="/jbzoo1/templates/yoo_sync/apple_touch_icon.png" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/base.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/layout.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/menus.css" />
<style>.wrapper { max-width: 1300px; }
#maininner { width: 100%; }
#menu .dropdown { width: 250px; }
#menu .columns2 { width: 500px; }
#menu .columns3 { width: 750px; }
#menu .columns4 { width: 1000px; }</style>
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/modules.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/tools.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/system.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/extensions.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/styles/red/css/custom.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/background/light_squares.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/font1/abel.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/font2/opensanslight.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/font3/abel.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/styles/red/css/style.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/responsive.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/css/print.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/fonts/abel.css" />
<link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/fonts/opensanslight.css" />
<script src="/jbzoo1/templates/yoo_sync/warp/js/warp.js"></script>
<script src="/jbzoo1/templates/yoo_sync/warp/js/responsive.js"></script>
<script src="/jbzoo1/templates/yoo_sync/warp/js/accordionmenu.js"></script>
<script src="/jbzoo1/templates/yoo_sync/warp/js/dropdownmenu.js"></script>
<script src="/jbzoo1/templates/yoo_sync/js/template.js"></script>
<!--[if lte IE 8]><script src="/jbzoo1/templates/yoo_sync/warp/js/html5.js"></script><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="/jbzoo1/templates/yoo_sync/styles/red/css/ie8.css" /><![endif]--></head>

<body id="page" class="page  noblog " data-config='{"twitter":0,"plusone":0,"facebook":0}'>

	<div id="page-bg">

				
		<div class="wrapper grid-block">

			<header id="header" class="grid-block">

				
								<div id="toolbar" class="bfc-o">

											
										<div class="float-right">

						
												<time datetime="2013-04-30">30.04.2013</time>
						
					</div>
										
				</div>
				
							
								<div id="menubar" class="grid-block">
					
										<nav id="menu"><ul class="menu menu-dropdown"><li class="level1 item101"><a href="/jbzoo1/index.php/glavnaya.html" class="level1"><span>Главная</span></a></li><li class="level1 item106"><a href="/jbzoo1/index.php/kontakty.html" class="level1"><span>Контакты</span></a></li><li class="level1 item113 active current"><a href="/jbzoo1/" class="level1 active current"><span>Каталог товара</span></a></li></ul></nav>
					
										
				</div>
							
				
			</header>

						
						
						<div id="main" class="grid-block">
			
				<div id="maininner" class="grid-box">
				
					
										<section id="content" class="grid-block">

						
						
<div id="system-message-container">
<div id="system-message">
</div>
</div>
<div  id="yoo-zoo" class="jbzoo jbzoo-view-category jbzoo-app-katalog-tovarov jbzoo-tmpl-catalog yoo-zoo jbzoo-rborder" >
    <div class="category rborder alias-professionalnye-ograzhdeniya">

        <h1 class="title">Профессиональные ограждения</h1>

        

                    <div class="image-full align-center">
                <img src="http://localhost/jbzoo1/cache/com_zoo/images/ograzhdeniya_9dc93a81aefa5ffd313814e4be797603.jpg" width="450" height="250"                     title="Профессиональные ограждения" alt="Профессиональные ограждения" />
            </div>
        

        

        
        <div class="clr clear"></div>

    </div>


<a class="rsslink" target="_blank" href="/jbzoo1/index.php/feed/rss/katalog-tovarov/professionalnye-ograzhdeniya.feed" title="RSS feed">RSS feed</a><div class="clear clr"></div><div class="items items-col-2"><div class="column rborder width50 first last"><div class="jbzoo-item jbzoo-item-ograzhdeniya jbzoo-item-teaser jbzoo-item-2">
<div class="item-image align-left">
     <a class="jbimage-link jbimage-gallery" title="Ограждения общего назначения" href="/jbzoo1/images/ograzhdeniya/ograzhdeniya-obshchego-naznacheniya/ograzhdeniya.jpg" target="_blank" id="jbimage-link-517f4da82331d"><img class="jbimage" alt="Ограждения общего назначения" title="Ограждения общего назначения" src="/jbzoo1/cache/com_zoo/images/ograzhdeniya_2e874dd5734c70d97e597d3db1fce591.jpg" width="130" height="200" /></a> 
 </div>

<div class="product-props">
        <h4 class="item-title"> <a title="Ограждения общего назначения" href="/jbzoo1/index.php/item/ograzhdeniya-obshhego-naznacheniya.html">Ограждения общего назначения</a> </h4>
    
    <p><i></i></p>

        <p> <div class="jbprice-wrapper jbprice-wrapper-3 not-in-cart jsPrice jsPrice-f52691d1-0d78-42e4-a5d9-7f2bcfa0966c-2">

    
                    <div class="item-sku">
                <strong>Артикул</strong>:
                1            </div>
        
        <div class="currency-list"><span class="price-currency jsPriceCurrency  active" currency="RUB">RUB</span>
<span class="price-currency jsPriceCurrency " currency="USD">USD</span>
<span class="price-currency jsPriceCurrency " currency="EUR">EUR</span></div><span><label class="jbprice-row jbprice-row-0"><span class="price-value jsPriceValue price-currency-RUB active">820,00  руб.</span>
<span class="price-value jsPriceValue price-currency-USD">$26.13</span>
<span class="price-value jsPriceValue price-currency-EUR">20.25 €</span>
</label></span>
    

        <!-- noindex -->
                    <a rel="nofollow" href="#add-to-basket" data-href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=f52691d1-0d78-42e4-a5d9-7f2bcfa0966c&method=ajaxModalWindow&item_id=2" class="jsAddToCart add-to-cart"
                title="В корзину!">В корзину!</a>
        
        <a rel="nofollow" href="#remove-from-basket" data-href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=f52691d1-0d78-42e4-a5d9-7f2bcfa0966c&method=ajaxRemoveFromCart&item_id=2" class="jsRemoveFromCart remove-from-cart"
           title="Удалить из корзины">Удалить из корзины</a>
    <!-- /noindex -->
    

    
</div>
 
 
<div class="wrapper-jbcompare jsJBZooCompare unactive">

    <div class="active-compare">
        <a href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=a79bb4e4-ff28-46ee-9e99-689d52b7ee0a&method=ajaxToggleCompare&item_id=2" class="jsCompareToggle" title="Удалить">Удалить</a>
        <a href="/jbzoo1/index.php/component/zoo/?controller=compare&task=compare&app_id=1&type=ograzhdeniya&layout=v&Itemid=101" title="Сравнение">Сравнение</a>
    </div>

    <div class="unactive-compare">
        <a href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=a79bb4e4-ff28-46ee-9e99-689d52b7ee0a&method=ajaxToggleCompare&item_id=2" class="jsCompareToggle" title="Добавить к сравнению">Добавить к сравнению</a>
    </div>

</div>
 
 
<div class="wrapper-jbfavorite jsJBZooFavorite unactive">

    <div class="active-favorite">
        <a href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=cde063e9-4f80-4cf0-9447-6d42fcdbb2fb&method=ajaxToggleFavorite&item_id=2" class="jsFavoriteToggle" title="Удалить">Удалить</a>
        <a href="/jbzoo1/index.php/component/zoo/?controller=favorite&task=favorite&app_id=1&Itemid=101" title="Избранное">Избранное</a>
    </div>

    <div class="unactive-favorite">
        <a href="/jbzoo1/index.php/component/zoo/?controller=default&task=callelement&format=raw&element=cde063e9-4f80-4cf0-9447-6d42fcdbb2fb&method=ajaxToggleFavorite&item_id=2" class="jsFavoriteToggle" title="В избранное!">В избранное!</a>
    </div>

</div>
 </p>
    
        <ul>
        <li class="element element-radio first">
	<strong>Диаметр прута: </strong>4</li>
<li class="element element-select">
	<strong>Высота ограждения: </strong>1500</li>
<li class="element element-select">
	<strong>Ширина пролета: </strong>2500</li>
<li class="element element-select">
	<strong>Размер ячейки: </strong>50 x 200</li>
<li class="element element-select last">
	<strong>Сечение столбов: </strong>Ø 48 x 2</li>    </ul>
    
    <div class="element element-rating first last">
	<div id="a6145996-4ce6-4a11-8aa9-c17a13b67cc0-517f4da832ac7" class="yoo-zoo rating">

	<div class="rating-container star5">
		<div class="previous-rating" style="width: 0%;"></div>

			</div>

	
	
</div>
</div></div>
<div class="clear clr"></div>
<span class="element element-itemlink first">
	 <a href="/jbzoo1/index.php/item/ograzhdeniya-obshhego-naznacheniya.html">Подробнее</a></span>

|
<span class="element element-itemcommentslink last">
	 <a href="/jbzoo1/index.php/item/ograzhdeniya-obshhego-naznacheniya.html#comments">Оставить комментарий</a></span>

<div class="clear clr"></div>
</div></div></div><div class="clear clr"></div><div class="clear clr"></div></div>

					</section>
					
					
				</div>
				<!-- maininner end -->
				
								
				
			</div>
						<!-- main end -->

						
						
						<footer id="footer" class="grid-block">

								<a id="totop-scroller" href="#page"></a>
				
				
			</footer>
			
		</div>

	</div>
	
		
</body>
</html>

  • 0

#4 SmetDenis

SmetDenis

Отправлено 30 April 2013 - 06:29

Приведенный исходный код практически бесполезен, его нужно смотреть только браузере на сайте.

 

Картинка прижимается к левому краю через float

Чтобы получалась правая колонка, вам все свойства нужно прижать к правому краю.

 

Основы CSS


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#5 motopehota

motopehota

Отправлено 30 April 2013 - 10:59   Лучший Ответ

Изменил в настройках нового каталога товара (katalog-tovara) псевдоним  наproduct и всё стало как надо, т.е. как на демо-сайте.


  • 0




Click to return to top of page in style!