Как реализовать необычное решение?

[al_hagen]

Здраствуйте уважаемые знатоки!

Самому ни как не додуматься как реализовать.... в низу страницы вставлена карта, вторая её половина находится в футере, как всё это состыковать??????+ еще и шаьлон резиновый :dash:/> :dash:/> :dash:/>

Выручайте!!!!!!

Edited November 19, 2012 by al_hagen

[Molotok2391]

Ваша шапка-картинка: 1400 длина * 257 ширина и сайт играет от этого.

Футер должен быть в сумме 1400 пикселей.

Исходя что у вас есть:

Картинка на 68 пикселей (позже сделаем ей margin:0 так надо будет, об этом позже.)

Первый футер: это фон цвета: #0C4A69 растянутый процентами вправо до 50%,

Второй футер: это картинка 527 на 100 (в стилях прописана ширина 87 и это правильно)

Тогда можно посчитать 1400-527=873-68=805 должна быть середина, так как не два а три блока должно и быть в футере, сейчас все по порядку:

Нужно будет сделать три блока, заключенные в один блок div.

Первый блок с картинкой длина которого 68 пикселей, она заключена в блоке foot, пускай так и останется, float:left, margin:0

Второй блок создадим после него, назовем: footer1 с длиной в 805 пикселей

Третий блок создадим footer2. отмечу: что у вас идет как class, а не id, сделаем его все равно id и он у вас должен быть float: right, теперь о самих стилях css и правилах:

Стили:

#foot {

width:68px;

float:left;

margin:0;

background-image: logo.png; url всё как положено;

height: 87px;

background: #0C4A69;

}

#footer1 {

width:805px;

margin-left:68px;

margin-right:527px;

background: #0C4A69;

}

#footer2 {

width:527px;

margin-left:873;

float:right;

background-image: foot_bg.jpg; url всё как положено;

text-align: right;

}

#footer {

width:1400px; Конечно чуть не забыл У вас резиновый, здесь поставите 100% вместо пикселей.

margin:0;

}

ХТМЛ:

<div id="footer">

<div id="foot"></div> Здесь у вас будет картинка с длиной 68 пикселей logo.png

<div id="footer1"></div> Здесь у вас будет фон background: #0C4A69;

<div id="footer2"></div> Здесь у вас будет картинка с длиной 527 пикселей foot_bg.jpg

</div>

Edited November 13, 2012 by Molotok2391

[rikimaru2013]

Перешёл по ссылке сайта - белый лист - и как тебе помогать?

[al_hagen]

'Molotok2391'

Спасибо за ответ, у меня получилось реализовать вашим способом, правда сделал немного по своему

Использовал в качестве фона градиент, и свойство float:left;

#foot {
width:100px;
float:left;
margin:0;
background: url("/images/general/foot.jpg")repeat-x;
height: 87px;

}

#footer1 {
width:773px;
height: 87px;
float:left;
background: url("/images/general/foot.jpg")repeat-x;
}

#footer2 {
width:527px;
float:left;
background: url("/images/general/foot_map.gif")repeat-x;
text-align: right;
height: 87px;
}

#footer {
width:1400px;
margin:0;
}

НО!!!!!

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

Edited November 13, 2012 by al_hagen

[Molotok2391]

'Molotok2391'

Спасибо за ответ, у меня получилось реализовать вашим способом, правда сделал немного по своему

Использовал в качестве фона градиент, и свойство float:left;

#foot {
width:100px;
float:left;
margin:0;
background: url("/images/general/foot.jpg")repeat-x;
height: 87px;

}

#footer1 {
width:773px;
height: 87px;
float:left;
background: url("/images/general/foot.jpg")repeat-x;
}

#footer2 {
width:527px;
float:left;
background: url("/images/general/foot_map.gif")repeat-x;
text-align: right;
height: 87px;
}

#footer {
width:1400px;
margin:0;
}

НО!!!!!

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

Да Да Я Уже дописал смотрите Выше:

#footer {

width:1400px; Конечно чуть не забыл У вас резиновый, здесь поставите 100% :)/> вместо пикселей.

margin:0;

}

То есть:

#footer {

width:100%;

margin:0;

}

И будет оно

Edited November 13, 2012 by Molotok2391

[Molotok2391]

Да, я зашел к вам на сайт и увидел, то что ожидал, ночью я перепробовал массу способов по решению задачки, и думаю будет само то, потому что у вас сейчас сдвиг в крайнем правом углу, и дизайн съезжает, попробовать стоит и моим способом И надпись вы закрыли которая была справа... В общем тренировка и ещё раз тренировка

[al_hagen]

Да, я зашел к вам на сайт и увидел, то что ожидал, ночью я перепробовал массу способов по решению задачки, и думаю будет само то, потому что у вас сейчас сдвиг в крайнем правом углу, и дизайн съезжает, попробовать стоит и моим способом :)/> И надпись вы закрыли которая была справа... В общем тренировка и ещё раз тренировка :)/>

Надписи я пока временно удалил, что бы не мешались))

С резиновостью вроде разобрался а вот в один ряд никак мне дивы не выстроить......

Загляните на сайт, сделал по вашему рецепту....не работает...моэ где ошибся???

[Molotok2391]

Да в корне ошибки, много их, то есть идут повторы: несколько футеров:

<div id="footer">

<div class="moduletablefoot">

<div class="customfoot">

<div id="footer">

<div id="foot">

<div id="footer1"> </div>

<div id="footer2"> </div>

Дальше не буду перечислять, нужно удалить лишние дивы - они не нужны точно!!!

Оставить только необходимое для футера!

Это:

<div id="footer">

<div id="foot"> </div>

<div id="footer1"> </div>

<div id="footer2"> </div>

</div>

Я зашел к вам на сайт - видимых ошибок по моему коду нет, блок не может встать на свое место по тому что он дублирован и не один раз, видно не вооруженным глазом - удалять лишнее. Что ниже <div id="wrapper"> просмотрите качественно! Никаких повторов не должно быть!

1. После <div id="wrapper"> должно идти:

<div id="footer">

<div id="foot"></div>

<div id="footer1"> </div>

<div id="footer2"> </div>

</div>

Edited November 13, 2012 by Molotok2391

[al_hagen]

<div class="moduletablefoot">

<div class="customfoot">

Эти два дива создаёт CMS у меня не получается их удалить......

а дублированый footer удалил пока без изменений

[Molotok2391]

<div class="moduletablefoot">

<div class="customfoot">

Эти два дива создаёт CMS у меня не получается их удалить......

а дублированый footer удалил пока без изменений

Эти блоки и мешают встать на место, если они не удаляются, есть вариант, поместить выше их код с футера или ниже, лучше выше, сразу после <div id="wrapper">

moduletablefoot и customfoot не нужны, они только мешают, тем более в середине. Сделай так, чтобы они были внизу. или вверху, но ни как не в середине футера...

<div id="wrapper"></div>

<div id="footer">

<div id="foot"></div>

<div id="footer1"> </div>

<div id="footer2"> </div>

</div>

<div class="moduletablefoot">

<div class="customfoot">

Edited November 14, 2012 by Molotok2391

[al_hagen]

Вы уж извините меня чайника, если глупости говорю....

Но эти блоки создаются автоматически при создании блока футер....и особо с ними ни чего не сделаешь.....

Может конечно я чего то не понимаю, если не прав, поправьте, CMS Joomla

[Molotok2391]

Вы уж извините меня чайника, если глупости говорю....

Но эти блоки создаются автоматически при создании блока футер....и особо с ними ни чего не сделаешь.....

Может конечно я чего то не понимаю, если не прав, поправьте, CMS Joomla

CSS:

#footer {

width:100%;

margin:0 auto;

background: url("../images/general/foot.jpg")repeat-x;

height:87px;

}

#foot {

height:87px;

width:68px;

float:left;

background: url("../images/general/foot.jpg")repeat-x;

}

#footer1 {

height:87px;

width:527px;

float:right;

background: url("../images/general/foot_map.gif");

}

#footer2 {

height:87px;

margin: 0 527px 0 68px;

width:69%;

background: url("../images/general/foot.jpg")repeat-x;

}

HTML:

<div id="footer">

<div id="foot"></div>

<div id="footer1"></div>

<div id="footer2"></div>

</div>

Думаю - это то что надо. Жду от Вас ответа!

Edited November 15, 2012 by Molotok2391

[al_hagen]

Этим способом я пробовал, у меня так реализована серединка сайта. Вот только один нюанс почему то уезжает в право картинка, а так всё отлично, всё становится и тянется.....

Edited November 15, 2012 by al_hagen

[Molotok2391]

Этим способом я пробовал, у меня так реализована серединка сайта. Вот только один нюанс почему то уезжает в право картинка, а так всё отлично, всё становится и тянется.....

Какая именно картинка?