Помощь по сайту для artara-nn

[artara-nn]

(04.10.2014 23:59:38)Admin писал(а):  Завтра скину новый код и скрипт для портфолио, а то сегодня уже поздно, вдруг что-то не так встанет, а завтра хоть можно оперативненько переделать.

Ок) а я пока поделаю что выше прописано)

---

Прайс поправлен.

[artara-nn]

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

Цитата:Еще для всех изображений (<img...>), размер которых заранее известен и не меняется (логотип там и т.д.) укажите принудительно размеры width и height. Так же пропишите атрибут alt во всех изображениях. Если писать в нем нечего, то просто alt="", т.к. его отсутствие является ошибкой (хоть и не серьезной).

За это руки вообще никак взяться не могут, т.к. глаза просто разбегаются по коду, а потом в кучу собираются...))

[Admin]

По нижней полосе...

На данный момент ее код такой:

Код:

<div align="center" style="color:#fff;font-size:18px;position:absolute;bottom:-3%;left:40%">Copyright © 2008 Типография Артара</div>

Так вот проблема кроется в том, что отступ снизу (bottom:-3%;) Вы указали в процентах от высоты странички. А т.к. страничка прайсов по высоте в разы больше главной, то вот эти проценты и выходят за границы полосы и образуют белую полосу. Просто укажите отступ в пикселях, тогда на всех страничках все будет одинаково и полоса прижмется.

Код:

<div align="center" style="color:#fff;font-size:18px;position:absolute;bottom:-35px;left:40%">Copyright © 2008 Типография Артара</div>

[artara-nn]

Ок, сделал) а если страницы некоторые очень короткие, то снизу все равно белое пространство под полосой, может можно как-то сделать чтобы она прижималась именно в самый низ?) или не получится?)

[Admin]

А теперь портфолио...

HTML код странички:

Код:

<h1 class="h1_price">Портфолио</h1>
<table class="action">
<tr>
<td><img src="artara-img/portfolio/01.jpg"></td>
<td><img src="artara-img/portfolio/02.jpg"></td>
<td><img src="artara-img/portfolio/03.jpg"></td>
<td><img src="artara-img/portfolio/04.jpg"></td>
</tr>

<tr>
<td><img src="artara-img/portfolio/05.jpg"></td>
<td><img src="artara-img/portfolio/06.jpg"></td>
<td><img src="artara-img/portfolio/07.jpg"></td>
<td><img src="artara-img/portfolio/08.jpg"></td>
</tr>

<tr>
<td><img src="artara-img/portfolio/09.jpg"></td>
<td><img src="artara-img/portfolio/010.jpg"></td>
<td><img src="artara-img/portfolio/011.jpg"></td>
<td><img src="artara-img/portfolio/012.jpg"></td>
</tr>

<tr>
<td><img src="artara-img/portfolio/013.jpg"></td>
<td><img src="artara-img/portfolio/014.jpg"></td>
<td><img src="artara-img/portfolio/027.jpg"></td>
<td><img src="artara-img/portfolio/016.jpg"></td>
</tr>
</table>

JavaScript код, который будет делать анимацию (после теста лучше вынести во внешний файл):

Код:

<script type="text/javascript">
$(document).ready(function(){
var old_width = old_height = old_top = old_left = 0;

$(".action img").click(function(){
    var img_top = $(window).height()/2 - 12 + $(window).scrollTop();
    var img_left = $(window).width()/2 - 12 + $(window).scrollLeft() - 12;

    $(".new_image").remove();
    $(this).clone().addClass("new_image").appendTo("body");

    var img_width = $(".new_image").width();
    var img_height = $(".new_image").height();
    old_width = $(this).width();
    old_height = $(this).height();
    old_top = $(this).offset().top-12;
    old_left = $(this).offset().left-12;

    $(".new_image").width($(this).width()).height($(this).height());
    $(".new_image").offset({top: old_top, left: old_left});
    $(".new_image").animate({width: img_width, height: img_height, top: img_top-img_height/2, left: img_left-img_width/2}, 800);

});

$(document).on('click','.new_image',function(){
    $(this).animate({width: old_width, height: old_height, top: old_top, left: old_left}, 500, function(){ $(this).remove(); });
});
});
</script>

Ну и CSS как всегда:

Код:

.action { width:960px; margin: 0; padding: 0; table-layout: fixed; border-spacing: 8px 25px; }
.action td { width: 220px; height: 230px; padding: 4px; text-align: center; vertical-align: middle !important; background-color: #F0F0F0; border-radius: 8px; border: 1px solid #000000; }
.action img { max-width: 210px; max-height: 210px; cursor: pointer; }
.new_image { position: absolute;  padding: 10px; background-color: #F0F0F0; border-radius: 12px; border: 2px solid #CC0000; cursor: pointer; }

[artara-nn]

По-моему вошло прекрасно, огромное спасибо) только может ячейки не квадратные, а прямоугольные сделать?) где мне поменять их?)

---

(05.10.2014 13:55:12)artara-nn писал(а):  По-моему вошло прекрасно, огромное спасибо) только может ячейки не квадратные, а прямоугольные сделать?) где мне поменять их?)

нашел, немного поменял)

[Admin]

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

Косяк увидел...
Я на главной и в портфолио использовал один и тот же стиль (action), из-за чего на главной акции уменьшились.
Нужно заменить все упоминания action (либо на главной, либо в портфолии) на что-то другое уникальное, и в CSS соответственно тоже развести стили.

[artara-nn]

(05.10.2014 14:07:33)Admin писал(а):  С нижней полосой сложновато, т.к. придется затрагивать несколько других блоков DIV, из-за чего многое менять придется...

понял)

---

(05.10.2014 14:07:33)Admin писал(а):  Нужно заменить все упоминания action на что-то другое уникальное.

Ок, сейчас поменяем)
И есть предложение по улучшению скрипта портфолио (картинка в приложении), сделать что-то вроде прокрутки, т.е. сейчас там четыре ряда, нажимаем стрелку появляется следующие 4 ряда) ну это чтоб при добавлении новых (а их много) страницу сильно вниз не перегружать.
Как считаете?)

---

Также есть предложение по прайсу) возможно сделать пересекающиеся линии на ячейки?) например как здесь tcolorit(.)ru/sborniytirazh/ или как в приложенной картинке)

[Admin]

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

Я бы разбил портфолио на несколько частей, а вверху сделал бы ссылки на "Визитки", "Буклеты", "Пластиковые карты" и т.д. При переходе по ссылке "Визитки" пользователь видел бы только примеры визиток и т.д.
А на главной портфолио выставил бы лучшие примеры вперемешку.

[artara-nn]

(05.10.2014 14:32:24)Admin писал(а):  То, что Вы предлагаете, сделать конечно можно, но трудоемко и загружаться изображения будут разом, просто часть их будет не видно, что будет сильно тормозить загрузку странички, т.к. каждое изображение весит в районе 200 кб.

Я бы разбил портфолио на несколько частей, а вверху сделал бы ссылки на "Визитки", "Буклеты", "Пластиковые карты" и т.д. При переходе по ссылке "Визитки" пользователь видел бы только примеры визиток и т.д.
А на главной портфолио выставил бы лучшие примеры вперемешку.

Спасибо) вариант хороший) так и поступим)