Прикрепить footer к низу, и не только...

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Прикрепить footer к низу, и не только...

« : 29.06.2011, 15:55:12 »

Всем привет. Я в вопросе сайтостроения еще новичок, поэтому мне нужна ваша помощь.
Сделал шаблон для Joomla, установил. Выявились две проблемы:
1) Footer не хочет прибиваться к низу сайта.
2) Есть промежутки между частями картинок.
Сайт можно посмотреть здесь: poshivodejdy.ru

При необходимости могу выложить коды: CSS и php...
Помогите, пожалуйста!

Записан

Taatshi

Гуру
5258
481 / 2
Верстаем и кодим. Обращайтесь ;)

Re: Прикрепить footer к низу, и не только...

« Ответ #1 : 29.06.2011, 21:41:13 »

Прикрепить футер, я делала так: (ширина моего шаблона 1200px)

Вынести его за общий контейнер, у меня див main, которому дать высоту 100%

#main{
   margin:auto;
   padding:0px;
   background: url('../images/back.jpg') repeat-y;
   width:1200px;
   min-height:100%;
}

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

<div id="clear"></div>

css для него:

#clear{
   height:0px;
   clear:both;
}

css для футера у меня такой:

#footer{
   margin:auto;
   padding:0px;
   height:100px;
   width:1200px;
   position:relative;
   text-align: center;
   font-size: 12px;
   background:url('../images/footer.jpg') no-repeat center bottom;
}

А промежутки между картинками - тут копать шаблон, и php и CSS

Записан

ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ | ОТЗЫВЫ
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #2 : 30.06.2011, 10:07:21 »

Огромное спасибо за ответ, сейчас попробую!

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #3 : 30.06.2011, 10:25:51 »

А. Стоп. У меня же табличная верстка, без дивов. Как при ней это сделать?

Записан

Taatshi

Гуру
5258
481 / 2
Верстаем и кодим. Обращайтесь ;)

Re: Прикрепить footer к низу, и не только...

« Ответ #4 : 30.06.2011, 10:34:36 »

Цитата: Frostmourn от 30.06.2011, 10:25:51

А. Стоп. У меня же табличная верстка, без дивов. Как при ней это сделать?

Тогда по идее вообще просто должно быть. Строкам таблицы задать высоту в процентах что ли.. Или позицию задать bottom.

Но нужно смотреть дизайн, может получиться кошмар)) Подробнее посмотрю и отвечу позже, я, честно говоря, табличной версткой занималась года два назад, уже нифига не помню))

Да, если у вас табличная верстка - смотрите, для всех ячеек бордер нон должен быть указан явно - тогда и промежутков не будет

Записан

ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ | ОТЗЫВЫ
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #5 : 30.06.2011, 10:40:06 »

Цитата: Taatshi от 30.06.2011, 10:34:36

Тогда по идее вообще просто должно быть. Строкам таблицы задать высоту в процентах что ли.. Или позицию задать bottom.

Так задавал, и ничего не произошло. Сам не понимаю, почему так... руки кривые...
С футером разобрался немного глуповато - увеличил шрифт, экран сам растянулся и футер постоянно внизу.

Цитата: Taatshi от 30.06.2011, 10:34:36

Да, если у вас табличная верстка - смотрите, для всех ячеек бордер нон должен быть указан явно - тогда и промежутков не будет

Спасибо огромное, сейчас попробую.

Как тут репутация повышается?

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #6 : 30.06.2011, 10:41:16 »

О, нашел повышалку, наверное появилась как только я 10 сообщений набрал

Записан

Taatshi

Гуру
5258
481 / 2
Верстаем и кодим. Обращайтесь ;)

Re: Прикрепить footer к низу, и не только...

« Ответ #7 : 30.06.2011, 10:46:19 »

Цитата: Frostmourn от 30.06.2011, 10:40:06

С футером разобрался немного глуповато - увеличил шрифт, экран сам растянулся и футер постоянно внизу.

Нет, не разобрались. Это для Вашего разрешения монитора! А на другом опять будет фигня! Мне сегодня есть мал-мал некогда, если не разберетесь до завтра, с утра напомните в личку, я посмотрю с футером.

Записан

ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ | ОТЗЫВЫ
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #8 : 30.06.2011, 10:52:30 »

Хорошо, еще раз спасибо

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #9 : 30.06.2011, 12:04:30 »

Аааа... это хрень какая-то...

Код: html4strict

<table border="1" cellspacing="0" cellpadding="0" class="main" style="border:0px;">
<tbody>
<tr>
<td class="top1" colspan="2" ><img class="top1" width="300" height="200" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/logo1.gif" alt="" /></td>
<td class="top2" ><img width="163" height="163" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/oblako_1.gif" alt="" /></td>
<td class="top" ><img width="163" height="163" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/oblako_2.gif" alt="" /></td>
</tr>
<tr>
<td class="left"><img width="39" height="110" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/logo22.gif" alt="" /></td>
<td class="menu"><p align="center"><jdoc:include type="module" name="mod_mainmenu" /></td>
<td class="text" > <?php echo mosMainBody();?></td>
<td class="right"><img width="164" height="22" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/oblako_3.gif" alt="" /></td>
</tr>
    
<tr>
<td class="image1" colspan="3" ><img width="225" height="181" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/image1.gif" alt="" /></td>
<td class="image" ><img width="146" height="181" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/image2.gif" alt="" /></td>
</tr>
<tr>
<td class="footer" colspan="2" ><img width="301" height="104" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/label.gif" alt="" /> </td>
<td class="footer1"  ><img width="225" height="32" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/image3.gif" alt="" /></td>
 <td class="footer2"  ><img width="146" height="32" border="0" src="<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/image4.gif" alt="" /></td>
</tr>
  </tbody>
</table>

Код: css

html, body {margin:0px; padding:0px;  background-image: url('/templates/Poshiv/images/background.png'); background-position:top;
background-repeat: repeat-x; }
table.main {width: 100%; height: 100%; border-collapse: collapse; background-image: url(<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/background.png); background-position:top;
background-repeat: repeat-x; }
td.top1 {}
td.top2 {text-align: right; vertical-align: bottom}
td.top { text-align: left; vertical-align: bottom}
td.left {width: 39px;}
td.menu {width: 50px;}
td.text {width: 100%; height: 100% }
td.right {}
td.image1 {width: 100%; height: 181px; text-align: right; vertical-align: bottom}
td.image {  text-align: left;  vertical-align: bottom; padding-right: 200px;}
td.footer { background-image : url(<?php echo $mosConfig_live_site;?>/templates/Poshiv/images/stripe.jpg); }
td.footer1 {width: 100%; text-align: right; vertical-align: top; background-image : url(../images/stripe.gif); }
td.footer2 { background-image: url(../images/stripe.gif); vertical-align: top;}
td {padding: 0px;}
td, input, select, textarea {
	font-family: Tahoma;
	font-size: 13px;
	color: black;
	vertical-align: top;
}

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

Код: css

html, body {margin:0px; padding:0px;

и при этом остаются все проблемы.
Причем промежутки между картинками есть только на горизонтальных стыках.
Помогите... !

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #10 : 30.06.2011, 12:17:10 »

Для футера, в данном случае, надо прописать HTML {height: 100%;}
С остальным какие проблемы?

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #11 : 30.06.2011, 12:32:17 »

Ура, спасибо, футер опустился!
http://www.poshivodejdy.ru/ - здесь есть промежутки между частями картинок, последняя проблема

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #12 : 30.06.2011, 12:40:01 »

Честно говоря, непонятно о чём речь, точнее о каких частях картинок? Как должно быть?

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #13 : 30.06.2011, 12:54:35 »

Ага, заметил.
Попробуйте сделать следующее. Строки вида <td class="footer1"><img width="225" height="32" border="0" src="

" alt=""></td>

написать в коде с переносом окончания (закрывающей скобки) на вторую строку, типа "/></td>"

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #14 : 30.06.2011, 16:33:03 »

Не сработало.

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #15 : 30.06.2011, 16:58:54 »

Странно. Кстати, у вас там слеша не хватает в конце тега img (т.к. доктайп XHTML).
Тогда сдвиньте картинки принудительно:
position: relative;
top: 3px;

- так получится

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #16 : 30.06.2011, 19:18:44 »

Цитировать

у вас там слеша не хватает в конце тега img (т.к. доктайп XHTML).

эээ... можете ткнуть пальцем, где именно?

Цитировать

position: relative;
top: 3px;

куда именно это вставлять?.. я просто совсем новичок...

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #17 : 30.06.2011, 19:27:55 »

Ох, сударь... (((

1) http://htmlbook.ru/html/img - синтаксис XHTML, а не так кау вас сейчас, HTML.
2) В каждый тег картинки, которая смещена (это две верхних) вставляете фрагмент: <img style="position: relative;top: 3px;" остальное-как-и-есть />

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #18 : 30.06.2011, 19:34:05 »

Цитировать

Ох, сударь... (((

Я так понял это мат в вежливой форме

))
Благодарю, сейчас опробую.

Записан

Oxlamon

Давно я тут
746
95 / 4

Re: Прикрепить footer к низу, и не только...

« Ответ #19 : 30.06.2011, 19:39:21 »

Нет, вовсе не мат. Это к определению "совсем новичёк".
Вы просто совсем уж элементарные вещи спрашиваете (буквально, азбуку), притом что уже занимаетесь разработкой шаблона. А это крайне не последовательно.

Записан

Frostmourn

Осваиваюсь на форуме
25
0 / 0

Re: Прикрепить footer к низу, и не только...

« Ответ #20 : 30.06.2011, 19:44:10 »

Ураа, получилось! Только нужно было написать style="position: relative;bottom: 3px;" , а не top.
Огромное спасибо:)

Записан

Как оставить модуль слайдшоу вшитый в шаблон, только на главной странице ? Автор akteon25	Ответов: 4 Просмотров: 4830	13.05.2016, 13:25:23 от akteon25
Как в шаблоне с возможностью переключения цветов оставить только один цвет? Автор MarinaE	Ответов: 2 Просмотров: 2349	07.08.2014, 09:57:24 от MarinaE
{loadposition footer} в шаблоне Автор eragon	Ответов: 14 Просмотров: 4578	30.11.2012, 20:26:08 от fyfcnfcbz1979
Как удалить позицию только на одной странице? Автор Zenfilincky	Ответов: 3 Просмотров: 1749	25.07.2012, 13:40:06 от ELLE
Шаблон Asturias и крутилка только на главной Автор Marakaya	Ответов: 9 Просмотров: 4040	10.07.2012, 21:17:56 от Marakaya

Как триггерить события для плагинов на манер Joomla 5+?В Joomla 6 должны удалить метод...

Joomla признана лучшей CMS 2025 в конкурсе 20i FOSS Awards

Joomla 20 лет. Евгений Сивоконь.

Похожие темы