VPF::Позиционирование модуля в подвале

s1lver

Дата 7.6.2013, 07:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Доброго времени суток!

Прошу помощи разобраться в позиционировании модуля в "подвале" сайта oshpz.com
Если добавлять код непосредственно в шаблон, то позиционируется нормально. Но перестают работать ссылки из-за перекрытия слоев.

Если же размещается больше 2-х модулей в "подвале" то второй модуль смещается вниз.

user posted image

Никак не могу додуматься как решить эту проблему.. smile

Добавлено через 12 минут и 17 секунд
Первую ошибку вроде решил... но вылезла другая проблема smile

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

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

Я собрался жить вечно - пока все идет нормально!

Urfin

Дата 7.6.2013, 09:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 27.10.2006
Где: хохляндия

Репутация: нет
Всего: 1

смотреть надо css вашего шаблона. В частности параметры "footer" и увеличить для него height на 50.

Этот ответ добавлен с нового Винграда - http://vingrad.com

s1lver

Дата 7.6.2013, 09:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Цитата(Urfin @ 7.6.2013, 09:20)

Если увеличить высоту подвала, то это ничего не даст(только подвал растягивается вниз не красиво). Левый блок статистики все равно "плавает" по подвалу.

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

Я собрался жить вечно - пока все идет нормально!

SergV

Дата 7.6.2013, 10:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: 1
Всего: 1

Тут только css, "жесткая" ширина для блоков и float -> left/right. Насколько понимаю, по скрину ширина блока(ов) не фиксированая, поэтому и сместился следующий блок в низ под первый...
Так, небольшой пример:

Код


...
<div class="footer">
 <div class="block left">
    ...
 </div>
 <div class="block center">
    ...
 </div>
 <div class="block right">
    ...
 </div>
</div>
...

Код


.footer { width: 100%; ... }
.block { width: 30%; float: left; ... }
...
.block.right { float: right; ...

Думаю из примера видно что к чему, где футер имеет всю ширину, и 3 модуля имеют по 30% от ширины, и за счёт float располагаются 2 штуки подряд слева, и последний справа. Всё будет в ряд, хотя по сайту и так уже вроде всё в ряд... :)

Этот ответ добавлен с нового Винграда - http://vingrad.com

s1lver

Дата 7.6.2013, 10:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Цитата(SergV @ 7.6.2013, 10:17)

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

Нормальный вид, при полном экране

user posted image

Ошибка! Смещение блока, при изменении размера экрана

user posted image

Как мне поправить этот момент?

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

Я собрался жить вечно - пока все идет нормально!

SergV

Дата 7.6.2013, 17:12 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: 1
Всего: 1

Не дочитал про статистику... smile

Не смотрел что там по стилям, но там явно думаю идёт привязка блока со статистикой к left + bottom с position absolute скорее всего. Вот это и заставляет гулять статистику при изменениии размера окна, так как расстояние к низу и левой стороне всё время одинаковое...
Всё что нужно сделать, это в контейнер левого блока с лого, вложить этот блок со статистикой, убрав в стилях позицию с привязкой к краям браузера... Если нет блока отдельного под нижнее лого, то значить сделать дополнительный, кинуть туда статистику и привязать к левому краю...

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

Этот ответ добавлен с нового Винграда - http://vingrad.com

s1lver

Дата 13.6.2013, 08:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Честно ничего не понял. Если я привязываю блок со статистикой, то блок с контактами начинает ездить. И так далее по кругу smile

Код блока со статистикой:

Код


.statistic {
width: 190px;
height: 1%;
position: absolute;
padding-top: 75px;
padding-left: 190px;
margin: 0 Auto;
}

Код блока с контактами:

Код


.socialoshpz {
left: 190px;
width: 440px;
height: 1%;
position: relative;
margin: 0 auto;
text-align: right;
font-size: 11px;
color: #fff;
padding-left: 140px;
padding-top: 10px;
}

Код подвала:

Код


#footer {
margin: 0 auto;
height: 134px;
background-image: url(../images/fut.jpg);
background-repeat: no-repeat;
background-position: center top;
text-decoration: none;
border: none;
display: block;
}

Не могу ничего придумать...

Цитата

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

Не было возможности проверить на большом мониторе пока, спасибо за наводку smile

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

Я собрался жить вечно - пока все идет нормально!

SergV

Дата 20.6.2013, 09:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: 1
Всего: 1

Цитата

Код блока со статистикой:


   .statistic {
   width: 190px;
   height: 1%;
   position: [color=red]absolute[/color];
   padding-top: 75px;
   padding-left: 190px;
   margin: 0 Auto;
   }

Как уже и писал, блок статистики завязан на абсолютном привязывании.
Что бы это убрать, нужно знать как блоки в html прописаны.
Я уже выше приводил пример как можно дно сделать, немного подкорректирую html под что нужно:

Код


...
<div class="footer">
 <div class="block left">
    // лого с копирайтом
    ...
    <div class="block statistic">
      // статистика: - это поместить внутри, так как по ширине он не шире логотипа с текстом,
        // и статистика не будет не куда ездить
    </div>
 </div>
 // остальное
</div>
...

То что сейчас, контейнер статистики, за счёт "position: absolute;", становится независимым от контейнера в котором расположен, то есть привязывается к окну браузера но не блока в котором находится. Как вариант можно попробовать заменить absolute на relative, и поиграть со стилем блока, но так как я не знаю как сделана вёрстка(нет желания копать исходный код страницы), то может придётся переделывать немного вёрстку футера.

Этот ответ добавлен с нового Винграда - http://vingrad.com

s1lver

Дата 21.6.2013, 14:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Код


 <div id="footer">

         <div class="moduletable"> <!--див генерируется движком автоматом-->
                    
<div class="custom"  ><!--див генерируется движком автоматом-->

    <div class="statistic"> <!--левый блок статистики - проблемный-->
</div></div>
        </div>

            <div class="moduletable"><!--див генерируется движком автоматом--> 
           
<div class="custom"  ><!--див генерируется движком автоматом-->

    <div class="socialoshpz"> <!--правый блок все отлично-->

         
</div></div>
        </div>
    
  </div><!-- #footer -->

Все дело в том, что движок генерирует дивы в соответствии с активными модулями. Левый и правый блоки - это модули, которые вставляет движок в дивы генерированные автоматом. smile

Стилей для классов moduletable и custom никаких нет, они пустые.

Это сообщение отредактировал(а) s1lver - 21.6.2013, 14:49

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

Я собрался жить вечно - пока все идет нормально!

SergV

Дата 22.6.2013, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: 1
Всего: 1

Ну..., а кто мешает сделать в шаблоне свою вёрстку по примеру как я привёл, и в ставить в неё позиции для вывода модулей?
И оно то и понятно что джумла вставляет модули со своей вёрсткой, но это не мешает к примеру в настройках модуля добавить суфикс, и прописать в стилях к примеру для custom-logo свой стиль.

Но да ладно, разжую на пальцах что надо сделать.

Код


#footer {
    background-image: url("../images/fut.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    border: medium none;
    display: block;
    height: 134px;
    margin: 0 auto;
    text-decoration: none;
    width: 960px; // добавляем ширину, как и для остальных блоков
}

.statistic {
    [s]height: 1%;[/s] // удаляем
    [s]margin: 0 auto;[/s] // удаляем
    padding-left: 10px; // отступ слева от края
    padding-top: 80px; // отступ сверху от края
    [s]position: absolute;[/s] // удаляем
    width: 190px; 
}

И всё..., по крайней мере у меня в лисе всё норм, проверил в Firebug.
Но это только решает проблему гуляния статистики. Но что бы правый блок не уходил в низ, нужно сделать дополнительно пару действий. Как понимаю в шаблоне в блок footer просто чисто вставлены позиции, и поэтому для них и выдаёт в исходном коде - moduletable и custom. Что бы не городить огород, нужно просто зайти в нужные модули, и добавить им префиксы для модуля, к примеру -left и -right, что даст на выходе moduletable-left и moduletable-right. И вот для этого в стилях нужно будет задать примерно такое

Код


#footer .moduletable-left {
    width: 200px; // Ширина левого блока с лого и статистикой
    float: left; // позиционирование слева
    ...
}
#footer .moduletable-right {
    width: 600px; // Ширина правого бока с остальным
    float: right; // позиционирование справа
    ...
}

ну и дальше подкорректировать стили для вложенных блоков.

Дальше думаю понятно что к чему...

ПС. Что касается фона, он заливается во #wrapper..., а там задана ширина фиксированная. Что бы фон был на всю ширину экрана, заливку нужно в body перенести. Да и само фоновое изображение, это полный пипец, кто же так делает, в полном размере на всю страницу сайта? Размер хоть и не сильно большой(62кб), но всё равно.
Его нужно уменьшить до ширины скажем в 5-10рх, и по высоте на высоту до чистого серого цвета, то есть только верх. И то что останется, заливать в боди таким образом:

Код


body {
    ...
    background: #ccc url(../images/fon.gif) top left repeat-x; // где #ccc цвет заливки серого, я взял для примера.
    ...
}

Этот ответ добавлен с нового Винграда - http://vingrad.com

s1lver

Дата 24.6.2013, 14:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Спасибо большое!

По вашему рецепту выровнял подвал. Все браузеры включая IE8 обрабатывают нормально стили, но IE10 зачем то сдвигает последнюю строчку контактов вправо smile

По моему подвал теперь не слишком хорошо смотрится с заданной шириной...

Это сообщение отредактировал(а) s1lver - 24.6.2013, 14:49

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

Я собрался жить вечно - пока все идет нормально!

SergV

Дата 26.6.2013, 10:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: 1
Всего: 1

С ослами извечная проблема, там без костылей редкий случай обходится, так что советую поискать тему по css хакам, или создать дополнительный(ые) файлы стилей типа ie10.css и включить их в шаблон таким образом:

Код


<!--[if lt IE 10]><script src="/путь/до/ie10.css"></script><![endif]-->

Соответственно в этом файле внести копию стиля с поправкой. При этом не обязательно полностью, а только нужный параметр, к примеру отступ нужно изменить, и тут хватит к примеру "margin-left: xxx;" вместо полного параметра(ов) что в главном файле стилей.

К сожалению я в 10м осле проверить не могу, у меня винда по какой то причине не хочет устанавливать 10ку, выдаёт ошибку, а разбираться нет желания пока..., так что с 10кой придется лично разбираться. :)

Этот ответ добавлен с нового Винграда - http://vingrad.com

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Joomla \| Следующая тема »