Редактирование блоков "Категории, Производители"

[midik]

Добрый день, извиняюсь, если такая тема уже есть, что то рылся-рылся и не могу найти, скажи как сделать блоки слева и справа шире? помогите, совсем не могу сообразить что именно надо поменять в CSS

ПРИМЕР:

Стандартная ширина:

а нужно чтобы получилось примерно так:

ну и шрифт внутри блока по больше какой командой изменить. Заранее спасибо всем. очень благодарен.

[snastik]

232 строка там есть

margin-left: 190px;

margin-right: 190px;

это отступ среднего блока слева и справа

дальше идем в 220 строку

width: 180px; это ширина левого блока

226 строка

width: 180px; это ширина правого блока

собственно меняете как Вашей душе угодно только не перестарайтесь чтобы Ваши товары по центру влазили ну или убирайте правую колонку совсем

у Вас есть firefox и фаербаг ?

[midik]

да, есть ) спасибо большое, от души благодарен)

[gdi31]

Прошу помощи разобраться со следующим: Под № 1 и 2 - Как избавиться от отступа? Под №3 - в зелёной рамке отмечен модуль - PopupCategory (высасавший все мозги), верхняя вкладка (детская обувь) - вроде ништяк, нижняя (детское бельё) - достала, картинка не клеется и бордюра нет.

Как победить? Помогите! пожалуйста.

Номера - 1, 2, 3

На всякие пожарные оставлю стиль с которыми борюсь.

/* ================================================================ 
Это уведомление об авторском праве должно быть сохранено нетронутым в stylesheet в 
все случаи.

Оригинальная версия этого stylesheet и связанного (x) HTML
доступно в http://www.cssplay.co.uk/menus/pro_variable4.html
Copyright (c) 2005-2007 Stu Nicholls. Все права защищены.
Этот stylesheet и связанное (x) HTML могут быть изменены в любом 
способ соответствовать Вашим требованиям.
=================================================================== */
#nav {padding:0px; margin:0; list-style:none; font: 11px arial, sans-serif; background:url(../image/menu2.png) no-repeat;}
 
#nav ul {padding:0; margin:0; list-style:none; float:left;border-bottom:1px solid #999;border-top:1px solid #999;}

#nav li {padding:0px;margin:0px;}
#nav li li {float:none;border-left:1px solid #999;border-right:1px solid #999; padding:0px;margin:0px;min-width:218px;}
#nav li li.last {border-bottom:1px solid #b80;}
#nav li li.first {border-left:0px;}
/* работник для IE6 */
* html #nav li li {float:left;}

#nav li a {border:1px solid transparent;display:block; padding:5px 0px 5px 10px;color:#3a75c4;/* цвет букв не активного главного меню */ text-decoration:none; white-space:nowrap; background:url(../image/menu3.png) 219px center no-repeat;}
#nav li a.down {background:url(../image/menu4.png) no-repeat right center;}

#nav li li a {border:1px;background:#fff;display:block;  padding:5px 10px 5px 10px; font-weight:normal;}

#nav li li a.fly {background:url(../image/menu5.png) no-repeat right center;}

#nav li:hover {position:relative; z-index:300;}
#nav li.cssplay_hover {position:relative; z-index:300;}
#nav li.cssplay_hover a {color:#f00;}

#nav li li a {color:#3a75c4;}/* цвет букв не активного не главного меню */
#nav li li.cssplay_hover a {color:#1B57A3; background-color:#fff;}

#nav li:hover ul {left:220px; top:0px; z-index:500;}
#nav li.cssplay_hover ul {left:0; top:33px; z-index:500;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
* html #nav ul {width:2px;}
/* это, возможно, было это простое, если все браузеры поняли */
/* шоу следующий уровень */
#nav li:hover li:hover > ul {left:-5px; margin-left:100%; top:-1px; z-index:500;}
/* сохраняйте дальнейшие уровни скрытыми */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto; }
/* покажите сопровождаемый путь */
#nav li:hover > a {color:#fff;/* цвет букв главного активного меню */background:#000;/* цвет активной вкладки главного меню */border:1px solid #999;border-right:1px;}
#nav li li:hover > a {text-decoration:underline;border:0px;background:#000;/* цвет активной вкладки не главного меню */color:#fff;}
a.onSelectedLi  { color:#1B57A3;}

/* но IE5.x и IE6 нуждаются в этой партии, чтобы разработать flyouts */
#nav li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a
{color:#fff; background-color:#d5aa00;}

#nav li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
{color:#000; background-color:#e5ba00;}

/* шоу следующий уровень */
#nav li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{left:100%; margin-left:-5px; top:-1px;}

/* сохраняйте дальнейшие уровни скрытыми */
#nav li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

В живую поглядеть, можно по ссылке в профиле.

[gdi31]

Прошу помощи разобраться со следующим: Под № 1 и 2 - Как избавиться от отступа? Под №3 - в зелёной рамке отмечен модуль - PopupCategory (высасавший все мозги), верхняя вкладка (детская обувь) - вроде ништяк, нижняя (детское бельё) - достала, картинка не клеется и бордюра нет.

Как победить? Помогите! пожалуйста.

Номера - 1, 2, 3 . . .

Задача под номером 3, решена с помощью EvzeNsx, которому ещё раз ОГРОМНОЕ СПАСИБО!

Номера 1 и 2 всё ещё открыты

[EvzeNsx]

1. добавь в stylesheet.css в 431 строке

height: 16px;

2. добавь в stylesheet.css в 711 строке

margin-top: -1px;

или проверь рисунки для фона box_top.png - ощущение, что у них внизу белая полоса высотой 1px.

[gdi31]

1. добавь в stylesheet.css в 431 строке

height: 16px;

2. добавь в stylesheet.css в 711 строке

margin-top: -1px;

или проверь рисунки для фона box_top.png - ощущение, что у них внизу белая полоса высотой 1px.

Спаибо ещё раз! ОГРОМНОЕ! (полосы нет, зато две строки - волшебные) :)

P.S. Вот и ещё два вопроса для меня закрыты.

[aachernishev]

В силу того, что мало пока знаю, методом тыка решить не получилось :

Проблема : Надо левый блок сделать определенной ширины, например 220px, правый же, чтобы остался с шириной - 180px.

Что делал:

1. Изменил ширину сайта с 960 px до 1000px.

#container {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

2. Поменял ширину левого блока :

#column_left {
	float: left;
	width: 220px;
	margin-right: 10px;
	clear: left;
}

3. Изменил отступ :

#content {
	margin-left: 230px;
	margin-right: 180px;
	margin-bottom: 10px;
}

4. Сделал новую картинку :

box_top_left.png

с шириной в 220px

5. Дальше метод тыка не сработал, а именно, тут,

.box {
	margin-bottom: 10px;
	background: url('../image/box_top.png') no-repeat;
}

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

#column_left {
	float: left;
	width: 220px;
	margin-right: 10px;
	clear: left;
        background: url('../image/box_top_left.png') no-repeat;   //это
}

игрался с no-repeat, в общем..

метод тыка иссяк, кто скажет как правильно сделать, а то сам понимаю, что не то делаю, а как надо - не знаю :huh:

oc.store v.0.2.2

[EvzeNsx]

раз уже есть новая картинка, то допишите правило

#column_left .box {
       background:url('../image/box_top_left.png');
}

[shpakov]

Ребят, подскажите пожалуйста.

Почему-то вылезает за границы (с право)средняя область.(шаблон не дефолтный)

Вот так:

Попробовал определить где это вообще находится, получается вот что:

<html xmlns="http-~~-//www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<body>  
 <div id="container">    
   <div id="header">      
      <div id="content">	   
        <div class="middle">		   
          <table class="list">		      
            <tbody>			     
              <tr>
                  <td width="25%">                    
                  <td width="25%">                    
                  <td width="25%">                    
                  <td width="25%">

Т.е. вроде как надо смотреть настройки этого "<table class="list">" но не вижу размеров (или просто не умею видеть). В этих CSS нифига не понимаю.

Подскажите кто знает, где править что бы изображения не вылазили за границы?

Или надо лезть в код и убирать 4-е изображение в каждой строке, что бы они шли не по 4 а по 3. Но уж больно это какой-то корявый выход. Такое формирование наверняка же завязано с размером среднего окна. Если оно не позволяет разместить 4 изображения, то наверное должно же автоматически ставить только 3?

В общем буду рад любым советам как исправить этот косяк.

---------------------------

Вышел из положения путем изменения размера (ширины) картинок товаров, через настройки в админ панели.

Хотелось что бы картинки товаров были 150х150, но пришлось сделать 120х150. Больших неудобст от этого не возникло (т.к. все равно картинка имеет больший размер по вертикали) И можно сказать что проблема решена, НО наверняка же так не должно было быть?

Неужели при больших размерах картинок товаров "это окно" не должно оставаться постоянного размера, а вот кол-во картинок в строке не должно под это окно подгоняться?

Змінено 27 вересня 2011 користувачем shpakov