Некорректное отображение текста визуально на сайте

[Hottabych]

Ребята, подскажите пожалуйста как правильно сделать. Задача, сделать чтобы визуально текст на сайте test.topglazz.com.ua был в футере, а в коде был в начале.

Я уже частично добился каких-то результатов. Но не получается допилить, текст уезжает то под футер, то заезжает на текст. Скрин - http://www.fex.net/401860006026 Как сделать чтобы текст ни на что не заезжал внезависимости от его размеров. СПАСИБО БОЛЬШОЕ ЗАРАНЕЕ ВСЕМ

 

[Haindell]

А где код? Выложи в песочницу

[Hottabych]

<div class="frame-seotext-news">        <div class="frame-seo-text">            <div class="container">                <div class="text seo-text">                    <p style="color: #ff3333; font-size: large;">Если вы не нашли нужную модель, позвоните нам!</p><h1>Интернет-магазин оригинальных очков Ray-Ban</h1><p><a title="подарочные сертификаты" href="http://topglazz.com.ua/shop/product/podarochnyi-sertifikat"><img title="подарочные сертификаты" dir="/" src="http://test.topglazz.com.ua/uploads/images/gift-cetificate.jpg" alt="подарочные сертификаты" /></a></p>                </div>            </div>        </div>            </div>

.frame-seotext-news{}.frame-seotext-news:before{content: "";position: absolute;left: -5%;top: -6px;width: 110%;-moz-box-shadow: 0 3px 7px rgba(229, 225, 222, 0.79);-webkit-box-shadow: 0 3px 7px rgba(229, 225, 222, 0.79);-moz-box-shadow: 0 3px 7px rgba(229, 225, 222, 0.79);height: 6px;}.seo-text{margin-bottom: -50px; }.seo-text table, .seo-text td, .seo-text th{border-color: #999;}.seo-text *{color: #999;}.seo-text h1{color: #1c1c1c;}.frame-seo-text {	position: absolute;	bottom: 0px;	width: 100%;	z-index: 10;	left: 0px;	overflow: hidden;}

Для лучшей наглядности посмотрите на сайте - test.topglazz.com.ua

[Haindell]

А какой текст хоть?

[Hottabych]

А какой текст хоть?

 

ну так вот в коде картинка и сверху текст, это вообще для теста, текст там будет другой

<p style="color: #ff3333; font-size: large;">Если вы не нашли нужную модель, позвоните нам!</p><h1>Интернет-магазин оригинальных очков Ray-Ban</h1><p><a title="подарочные сертификаты" href="http://topglazz.com.ua/shop/product/podarochnyi-sertifikat"><img title="подарочные сертификаты" dir="/" src="http://test.topglazz.com.ua/uploads/images/gift-cetificate.jpg" alt="подарочные сертификаты" /></a></p>

[Struggle]

Если независимо от размеров то никак не сделать, писать мб код легкий на js — который вычисляет высоту, оно тебе надо ?)

 

в подвал все равно придеться лесть, а так юзай position

Edited April 5, 2014 by Struggle

[Hottabych]

Если независимо от размеров то никак не сделать, писать мб код легкий на js — который вычисляет высоту, оно тебе надо ?)

 

в подвал все равно придеться лесть, а так юзай position

 

У меня сейчас юзается position, но текст все равно залезает на другие элементы

[Q4Dizzy]

.items-h-carousel {margin-bottom: 200px;}

Не уверен, что понял правильно, но попробуй.

 

 

Уточняю, тебе нужно, чтобы этот блок, который перед футером не налазил ни на верхний текст, ни на сам футер, но его высота динамическая и может меняться, так?

Edited April 5, 2014 by Q4Dizzy

[Hottabych]

.items-h-carousel {margin-bottom: 200px;}

Не уверен, что понял правильно, но попробуй.

 

 

Уточняю, тебе нужно, чтобы этот блок, который перед футером не налазил ни на верхний текст, ни на сам футер, но его высота динамическая и может меняться, так?

 

 

Правильно, высота динамическая и может меняться.

 

Только что пробовал, частично помогло, но все равно не весь текст поместился.

.items-h-carousel {

margin-bottom: 200px;

}

[Q4Dizzy]

var footer_height = $('.footer').height();var box_height = $('.box').height();$('.middle').css({    marginBottom: box_height + 20});$('.box').css({    bottom: footer_height + 20});

http://jsfiddle.net/Cg6Ks/1/

 

примерно такой вариант..

 

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

Edited April 5, 2014 by Q4Dizzy

[Hottabych]

var footer_height = $('.footer').height();var box_height = $('.box').height();$('.middle').css({    marginBottom: box_height + 20});$('.box').css({    bottom: footer_height + 20});

http://jsfiddle.net/Cg6Ks/1/

 

примерно такой вариант..

 

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

 

это необходимо прописать для футера или для блока с текстом?

[Q4Dizzy]

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

Edited April 5, 2014 by Q4Dizzy

[Hottabych]

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

 

прописал в head

<script src="http://test.topglazz.com.ua/templates/newLevel/js/jquery.js"></script>

в jquery.js

var footer_height = $('.content-footer').height();var box_height = $('.frame-seotext-news').height();$('.frame-benefits').css({    marginBottom: box_height + 20});$('.frame-seotext-news').css({    bottom: footer_height + 20});

НО не работает!

 

И у меня нет блока .middle, таких блоков много popular_products, action_products...

[Q4Dizzy]

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

[Hottabych]

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

 

Связался через скайп и помог мне Q4Dizzy, ОГРОМНОЕ СПАСИБО

[Q4Dizzy]

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

$(window).load(function(){	var box_height = $('.text.seo-text').height();    $('.items-h-carousel:last').css({     marginBottom: box_height + 30});});

Edited April 5, 2014 by Q4Dizzy