Небольшая проблема в шаблоне vamshop

[matvey 0]

В IE6, когда открываеш закладку "Избранное", левая колонка немного начинает закрывать контент, тот что посрединке, а если закладку отодвинуть немного больше, то правая колонка падает где-то вниз влево, а левая наежает на контент. В Мозилле все нормально. Проверял и на офисном компьютере и на домашнем - так же. Особенно это заметно на офисных мониторах, не TFT. Хотя по идее должна появиться полоса прокрутки (как в шаблонах на таблицах).

Можно это исправить? Сразу скажу изменять % в stylesheet.css - не поможет - уже менял по-разному! Просто не хочется переделывать в шаблон на таблицах, те более что уже изучил шаблон на div'ах.

[support 447]

А какое у тебя разрешение экрана?

Ну вобщем проблема понятна, если окно сильно сжать будет тоже самое.

Но это так просто не исправить, это такая особенность div'ной вёрстки.

Можно конечно указать min-width как раз появится полоса прокрутки, но min-width в IE неправильно работает.

[matvey 0]

На домашнем 1280/1024, на офисном еще меньше.

Попробую почитать еще документацию по stylesheet.css

На табличный дизайн переходить не хочу.

[support 447]

Ну я пока не знаю как решить проблему, min-width не совсем так работает как нужно.

vamshop нормально у меня отображается в IE от 800x600

Может закладка избранная сужает магазин ниже 800 пикселей.

[matvey 0]

Наверное сужает ниже 800 пикселей.

[support 447]

Это вообще основная проблема при вёрстке блоками (div'ами), они слипаются и складываются.

[matvey 0]

А твое мнение - лучше табличный дизайн или все-таки на div'ах?

[support 447]

Да принципиальной разницы ведь нет.

У каждого метода свои плюсы и минусы.

div'ная вёрстка чуть сложнее в понимании (для новичков), но код получается компактный, ничего лишнего.

Ну и вот из недостаткой блоков вот такие вот проблемы о которых ты написал.

[matvey 0]

Спасибо! Буду буду мудрить что-то с div'ами.

[matvey 0]

Такая вот закономерность, когда добавляеш клас

/* Контейнер */

div#container

  {

    width: 1200px;

    margin: 0 auto;

  }

 

/* /Контейнер */

и фиксируеш его ширину в пикселях - блоки не налазят друг на друга и появляется полоса прокрутки, но когда там написать в %, то такого эфекта нету. Может есть еще какие-то параметры, которыми можно это дело зафиксировать?

[support 447]

так ты попробуй width уменьшить

1200 нет ведь разрешения такого.

Обычно 1024

т.е. попробуй width например 1020 поставить

[matvey 0]

Я просто для примера привел, сейчас у большинства разрешение от 1024 и выше. Ну а тем у кого 800/600 (2-5% моих посетителей) - не повезло. Кстати таким способом можно легко зафиксировать нужную ширину сайта, не залезая в % ширины левой и правой колонки и центра - там приходится хорошо помучиться пока выставиш эти %.

[support 447]

Ну я понимаю, но ты ж тоже понимаешь наверняка что это неуниверсальное решение, указание width (min-width)

Я тут пытаюсь найти решение, как сделать что б не распадалось в ie, но пока не нашёл.

[matvey 0]

Согласен - должно быть что-то еще!

[matvey 0]

Немного решил проблему со слипанием в stylesheet.css таким макаром:

/* Центр */

div#wrapper

  {

    float: left;

    width: 100%;

  }

div#content

  {

    margin: 0 240px; /* отступ центра от боковых колонок */

  }

/* /Центр */

/* Левая колонка */

div#left

  {

    float: left;

    width: 222px; /* Ширина левой колонки */

    margin-left: -100%;

    background: #666666;

  }

/* /Левая колонка */

/* Правая колонка */

div#right

  {

    float: left;

    width: 222px; /* Ширина правой колонки */

    margin-left: -222px;

    background: #666666;

  }

/* /Правая колонка */

(Использую стиль "Светленький")

Просто заменил проценты пикселями - теперь левая и правая колонка держатся нормально и боксы не отличаются шириной при сужении экрана (особенно те, в которых есть картинка), но есть одно но - когда в описании товара есть таблица или картинка шириной 400-500 px - при сужении экрана начинается наезд колонок и контента друг на друга. Пока не удалось решить проблему с центральной частью сайта, ведь ее не зафиксируешь пикселями. Пробовал вставлять картинки в левую и правую колонку, делал картинку шапки (лого) шириной на весь экран - не помогло. Если у кого-то будут еще предложения - пишите!

[support 447]

Ну вот в том то и дело, что нельзя пиксели указывать в резиновом дизайне.

Я пока тоже так и не разобрался, нашёл пару похожих тем в интернете, но пока не решил проблему.

[matvey 0]

Значит ты тоже читал о Резиновой верстке на **tp://www.webmascon.com/topics/coding/43a.asp . Я попробовал даже сделать то что там предлагалось, но уменя не получился даже ихний шаблон, не знаю может ошибку какую-то сделал.

[support 447]

Нет, именно это не читал.

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

[support 447]

Вобщем, вроде бы добавление простого overflow: auto решает эту проблему, т.е. в IE правая колонка не исчезает.

Открой /templates/vamshop/stylesheet.css и замени:

div#right
   {
     float: left;
     width: 18%;
     margin-left: -18%;
     background: #fff;
   }
[/code]

На:
[code]
div#right
   {
     float: left;
     overflow: auto;
     width: 18%;
     margin-left: -18%;
     background: #fff;
   }

[matvey 0]

Спасибо большое, Саша! Правая колонка теперь не падает. Жаль что overflow не действует на контент.

[support 447]

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

ну или в stylesheet.css указывать min-width

[matvey 0]

Я уже давно сделал по 1 товару в строке, был в ужасе когда увидел главную страницу сайта на офисном мониторе с небольшим разрешением. А min-width помогает только когда указываешь в пикселях.

[support 447]

Ну да, в пикселах.

На маленьких разрешениях сайт не будет сжиматься, а будет полоса прокрутки.

Как сделать универсальный вариант, что б ничего не распадалось я пока не придумал.

[matvey 0]

Для тех кто использует только div' ы и не может без них, немного решил проблему наезжания колонок друг на друга. При снижении разрешения экрана, правая и левая колонки сходятся вместе и середина сжимается, а при критическом - середина падает вниз. Нужно следить что-бы таблицы (если они есть в описаниях товара) или изображения товаров не были слишком широки, или не использовать их вообще.

Ниже фрагменты кода:

для index.php (ввел новый класс wrap):

<div id="wrap">

<!-- Левая колонка -->

<div id="left">

Боксы Слева

</div>

<!-- /Левая колонка -->

<!-- Правая колонка -->

<div id="right">

Боксы справа

</div>

<!-- /Правая колонка -->

<!-- Центр -->

<div id="content">

<div id="wrapper">

{$main_content}

</div>

</div>

<!-- /Центр -->

</div>

Ставил между Навигация и Низ

В stylesheet.css:

/* Центр */

div#container

   {

padding:0;

margin:0;

min-width:770px;

text-align:left;

width:100%;

   }

#wrap {

clear:both;

padding:0;

}

   

div#wrapper

   {

    float:left;

width:100%;

   }

div#content

   {

padding:0;

margin:0 240px;

   }

/* /Центр */

/* Левая колонка */

div#left

   {

     margin:0;

padding:0;

width:220px;

float:left;

margin-right:10px;

   }

/* /Левая колонка */

/* Правая колонка */

div#right

   {

     margin:0;

padding:0;

width:220px;

float:right;

margin-left:10px;

   }

/* /Правая колонка */

/* Низ */

div#footer

   {

     clear:both;

     width: 100%;

     background: #666666;

     border-top: 1px solid #ff6600;

     text-align: center;

     color: #fff;

   }

   

div#footer p

   {

     margin: 0;

     padding: 5px 10px;

   }

   

/* /Низ */

PS. В принципе пикселы можно заменить процентами для "резинового" дизайна, но сам не пробовал. Ограничил в пикселах левый блок и правый, что-бы не было корявости из-за разных используемых размеров картинок. Цвета использовал для своего сайта. Дивы <div id="wrapper"> и <div id="content"> в index.php меняются местами!!!

Охотно выслушаю коментарии для улучшения шаблона. На данный момент использую данный вариант на рабочем и посещаемом магазине.

[support 447]

matvey

Спасибо, а вот глянь ещё вариант похожий, я писал в статье - http://vamshop.ru/support/modules/smartsection/item.php?itemid=25

Посмотри пример 3.

Он как раз делает не "резиновый" дизайн и эта тоже решает проблему с наезжанием колонок.

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