![]() |
|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
![]() |
|
Опции темы | Поиск в этой теме |
![]() |
#1 |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
![]()
Тему даже уже как назвать в голове не укладывается, вопрос наболевший, в общем суть его в том что есть сайт с резиновым дизайном, скажем так обзор продукции производителя, снизу превьюшки, а в центре продукт с описанием. Так вот эти самые превьюшки выводятся снизу горизонтальным блоком, который выравнивается по центру в зависимости от того сколько превьюшек (т.е. берется ширина каждой, складывается и потом от этого центрируется блок), но иногда происходит сбой, может какая-то задержка при загрузке сайта и выводиться либо 1-на превьюшка, либо еще какой-то казус, весь фокус в том что все это должно быть резиновое, но у меня не получается это сделать без этого глюка, всю эту картину можно наблюдать здесь http://elegatec.500mb.net/2, там много всего, но то что пока не нужно я скрыл, превьюшки анимированы, на это не обращайте внимания, анимация здесь точно не виновата (хотя пока что и сбивает резину), вот модули, которые отвечают за происходящее:
HTML: Код HTML:
<div class="pxs_thumbnails"> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> <div class="thumbdiv"><img class="previmg" src="../2/images/thumbs/MK34.png"></div> </div> Код HTML:
// панель превьюшек var thumb_width_px = $pxs_thumbnails.width(); // длинна в пикселях превью var centrum = Math.floor((w_w - thumb_width_px)/2); // позиционирование к центру в пикселях thumb_width_percent = Math.floor((thumb_width_px/w_w)*100); // длинна в процентах превью center_percent = Math.floor((centrum/w_w)*100); // позиционирование к центру превью // применяем стиль,выставляем длинну и отступ в % $pxs_thumbnails.css({ 'width': Math.round(thumb_width_percent+1)+'%', 'left': Math.round(center_percent)+'%' }); var thumb_img_percent = Math.round(($thumbs.width()/thumb_width_px)*100); // длинна 1-й превьюшки в % $thumbs.css({ 'width': thumb_img_percent+'%' }); var spaces = one_image_w/(total_elems+1); Код HTML:
.pxs_thumbnails { height: 11%; position: absolute; top: 87%; left: 0px; overflow: visible; border: 1px solid violet; display: inline; } .pxs_thumbnails div { cursor:pointer; display: inline; border: 1px solid #CCCCCC; bottom: 0; height: 97%; float: left; top: 5%; overflow: visible; width: 6%; } .pxs_thumbnails .thumbdiv img.previmg { border: 1px solid red; display: inline; position: relative; overflow: visible; } сама функция ЯС находится в файле http://elegatec.500mb.net/2/driver.js с 68-й строки (у меня так), возможно в ней вся загвоздка, что в ней может быть не так? в итоге должно получиться без глюка и резиновое П.С. Если вы не видите глюк, попробуйте обновить несколько раз. |
![]() |
![]() |
![]() |
![]() |
||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Относительное позиционирование | melkortheshadow | HTML и CSS | 6 | 13.04.2011 23:10 |
Относительное позиционирование | Vinnipux | HTML и CSS | 1 | 25.02.2011 07:49 |
Позиционирование | Syltan | HTML и CSS | 0 | 25.03.2010 19:15 |
Позиционирование | serg_sk | HTML и CSS | 0 | 18.03.2010 20:42 |
Позиционирование каретки | Spice | Win Api | 1 | 25.03.2009 04:51 |