Возникла небольшая проблема со вставкой картинки внизу страницы над футером.
Была идея сделать шаблон примерно такого вида (v1.7):
То есть, чтобы прям над футером была картинка травы (background), на которую бы сверху накладывались основные модули.
Прописывала внизу body: (background:url(../images/bg.jpg) no-repeat center bottom #ffffff;)
пыталась вставить в wrapper — результат один и тот же — на длинных статьях картинка располагается по центру, то есть там где wrapper и body заканчиваются.
Если же создавать еще один блок над футером, то картинка привязана к низу, но на него не находят модули.
Может кто сталкивался с похожим дизайном, подскажите решение, если оно, конечно, возможно.
Спасибо.
#1
6 декабря 2010 в 19:57
#2
6 декабря 2010 в 20:13
решение:
<body>
<div id="cat_body_wrapper">
код твоего шаблона
</div>
<div>
тут футер
</div>
ну и картинку добавить в стили
#cat_body_wrapper {
width: 100%;
background-image: url(../images/body_bottom.png);
background-repeat: repeat-x;
background-position: center bottom;
}
<body>
<div id="cat_body_wrapper">
код твоего шаблона
</div>
<div>
тут футер
</div>
ну и картинку добавить в стили
#cat_body_wrapper {
width: 100%;
background-image: url(../images/body_bottom.png);
background-repeat: repeat-x;
background-position: center bottom;
}
#3
6 декабря 2010 в 20:14
Спасибо, но не совсем, я бы хотела, чтобы она прокручивалась вместе со всем сайтом, то есть без position:fixed.
Сегодня в 14:42
#4
6 декабря 2010 в 20:23
Используйте отрицательное значение margin (если я вас првильно понял)
#5
6 декабря 2010 в 20:26
как здесь — www.mfbcapital.ru ?
фон остается на месте, а контент пролистывается?
фон остается на месте, а контент пролистывается?
#7
6 декабря 2010 в 20:46
LonelyCat, да именно так хочется.
Но вставила все, как написал, вот такая фигня получается:
www.detskiypark.ru/
Но вставила все, как написал, вот такая фигня получается:
www.detskiypark.ru/
#8
6 декабря 2010 в 21:18
кинь шаб на почту, поправлю
#9
6 декабря 2010 в 21:25
Какие именно файлы кинуть?
У меня чистая тестовая версия 1.7. Кроме цвета в css и позиции в template, как ты сказал, ничего не меняла.
У меня чистая тестовая версия 1.7. Кроме цвета в css и позиции в template, как ты сказал, ничего не меняла.
#10
7 декабря 2010 в 05:39
яс. сегодня посмотрю
#11
7 декабря 2010 в 06:00
ну очень просто, как я и писал выше.
1. после <body> вставь <div id="cat_body_wrapper">
2. перед
</div>
<div id="footer">
вставь
<div class="clear"></div>
</div>
3. в файл стилей добавь
#cat_body_wrapper {
width: 100%;
background-image: url(../images/body_bottom.png);
background-repeat: repeat-x;
background-position: center bottom;
}
1. после <body> вставь <div id="cat_body_wrapper">
2. перед
</div>
<div id="footer">
вставь
<div class="clear"></div>
</div>
3. в файл стилей добавь
#cat_body_wrapper {
width: 100%;
background-image: url(../images/body_bottom.png);
background-repeat: repeat-x;
background-position: center bottom;
}
#12
7 декабря 2010 в 08:58
О! Спасибо большое!
Все заработало!
Только потребовалось еще в CSS вставить min-height, чтобы на коротких статьях травка вверх не ползла. Жаль только, что в Explorer6 мои "100%" по барабану.
#cat_body_wrapper {
width: 100%;
background-image: url(../images/bg1.jpg);
background-repeat: repeat-x;
background-position: center bottom;
min-height: 100%;
}
div class="clear" я заменила на <br clear="all"/ > — так корректнее работает, футер не сползает за границы экрана.
Все заработало!
Только потребовалось еще в CSS вставить min-height, чтобы на коротких статьях травка вверх не ползла. Жаль только, что в Explorer6 мои "100%" по барабану.
#cat_body_wrapper {
width: 100%;
background-image: url(../images/bg1.jpg);
background-repeat: repeat-x;
background-position: center bottom;
min-height: 100%;
}
div class="clear" я заменила на <br clear="all"/ > — так корректнее работает, футер не сползает за границы экрана.
#13
7 декабря 2010 в 09:13
О! Спасибо большое!
обращайся
