X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите поправить футер!
амд
амд
Topic Starter сообщение 18.4.2012, 14:40; Ответить: амд
Сообщение #1


Старичок
*****

Группа: Active User
Сообщений: 552
Регистрация: 7.8.2009
Поблагодарили: 114 раз
Репутация:   28  


Блог на Word Press. В футере должно быть 3 колонки - в одной описание сайта, а две другие с виджетами.

Через меню виджетов в подвал вставить их не получается почему-то, поэтому решил сделать вручную. В принципе всё получилось, только вот они не равномерно стоят. То есть, хочется, чтобы они занимали равноценную площадь и полосочки под текстом заголовков были одинаковой длины.

Прилагаю скриншот и код.

Прикрепленное изображение


<!--Подвал начинается здесь -->

</div><!--end wrapper-->
</div><!--end content-background-->

<div id="footer">
<div class="wrapper clear">


<div id="footer-about" class="footer-column">
<h2>О сайте</h2>
<p>Здесь будет находится текст о сайте!</p>
</div>


<div id="footer-posts" class="footer-column">
<ul>
<li class="widget widget_recent_entries">
<h2 class="widgettitle"><?php _e('Recent Articles', 'titan'); ?></h2>
<ul>
<?php $side_posts = get_posts('numberposts=10'); foreach($side_posts as $post) : ?>
<li><a href= "<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</li>
</div>


<div id="footer-archives" class="footer-column">
<ul>
<li class="widget widget_archive">
<h2 class="widgettitle"><?php _e('Archives', 'titan'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

</form>
</div>
<div id="copyright">
<p align="center" class="copyright-notice">&copy; 2012</p>

</div><!--end copyright-->
</div><!--end wrapper-->
</div><!--end footer-->

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3333333-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script></body>
</html>

<!--Подвал кончается здесь -->


Заранее большое спасибо вам за помощь и комментарии!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SergeiVL
SergeiVL
сообщение 18.4.2012, 14:46; Ответить: SergeiVL
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 360
Регистрация: 4.4.2011
Из: Калининград
Поблагодарили: 77 раз
Репутация:   22  


нужно css-файл править:
Скорректировать класс:
.footer-column{
  width: ширина всего футера / 3
}


Сообщение отредактировал SergeiVL - 18.4.2012, 14:48


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
амд
амд
Topic Starter сообщение 18.4.2012, 14:59; Ответить: амд
Сообщение #3


Старичок
*****

Группа: Active User
Сообщений: 552
Регистрация: 7.8.2009
Поблагодарили: 114 раз
Репутация:   28  


Большое спасибо за подсказку! smile.gif

Правда больше попариться пришлось и это добавил еще :Р

}
#footer-about.footer-column { width: 300px;
float: left;
}

#footer-posts.footer-column { width: 300px;
float: center;
}

#footer-archives.footer-column {
margin: 0;
float: right;
width: 300px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 18.4.2012, 15:05; Ответить: rjksdfhe
Сообщение #4


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


float: center;

Такого не бывает.

Бывает float: left | right | none | inherit


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alex_RD
Alex_RD
сообщение 18.4.2012, 16:19; Ответить: Alex_RD
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 299
Регистрация: 25.11.2008
Поблагодарили: 131 раз
Репутация:   34  


(амд @ 18.4.2012, 16:59) *
Большое спасибо за подсказку! smile.gif

Правда больше попариться пришлось и это добавил еще :Р

а можно просто написать:
.footer-column{float:left;width:33.3%}


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Proalligator
Proalligator
сообщение 19.4.2012, 8:17; Ответить: Proalligator
Сообщение #6


Новичок
*

Группа: Viewer
Сообщений: 9
Регистрация: 18.11.2011
Поблагодарили: 1 раз
Репутация:   0  


#footer-about{ float:left; width: 300px;}
#footer-posts{ float:left; width: 300px; margin-left:50px;}
#footer-archives{ float:left; width: 300px; margin-left:50px;}

Это при условии, что у Вас ширина футера 1000px


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Skreep
Skreep
сообщение 19.4.2012, 19:07; Ответить: Skreep
Сообщение #7


Новичок
*

Группа: User
Сообщений: 37
Регистрация: 27.3.2012
Из: Саратов, РФ
Поблагодарили: 14 раз
Репутация:   3  


Можно еще задать футеру position:relative, а блоки выровнить относительно него с помощью position:absolute, left и rigth в процентах, например. В таком случае Вам нет необходимости задавать жесткую ширину блоков и футера, но и можно несколько поиграть с позициями. Впрочем, и предыдущий способ, если использовать не px, а %, справиться с резиновой шириной.
Есть еще один вариант, но он более чем на любителя, к тому же старые броузеры могут с ним капризничать)) Однако знать его все равно стоит, потому как в ряде случаев это единственное решение задать центрирование и равномерное размещение элементов по горизонтали. Проставляете родителю
text-align:center, а детишкам, которых надо "построить" display: inline-block. В Вашем случае, если задать элементам фиксированную ширину и футер не резиновый, желаемый результат будет достигнут. Однако, повторяюсь, это не повсеместное решение.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать ноутбук
Ноутбук для детей
23 kstnews 448 Сегодня, 16:14
автор: kstnews
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1361 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 451 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 708 29.11.2017, 17:27
автор: genjnat
Открытая тема (нет новых ответов) Помогите оценить новотник. Плиз
1 Alex-777 537 29.11.2017, 7:18
автор: grumdas


 



RSS Текстовая версия Сейчас: 18.12.2017, 19:04
Дизайн