23 сентября 2010 в 16:05
Имеем: регион футер, 2 (или более) блока, например Форма поиска и Кто на сайте.
Задача: разместить эти блоки в регионе, но так, чтобы они шли не по вертикали, а по горизонтали.
Вопрос: собственно - как это реализовать через css класс региона?
ЗЫ: заранее спасибо )))
| Вложение | Размер |
|---|---|
 footer.png | 26.43 КБ |
Комментарии
#id-block-left {
float:left;
width:50% /*Если надо 2*/
}
#id-block-right {
margin-left:50%
}
id-block-left, id-block-right - id соответствующих блоков.
Спасибо конечно, но это надо вводить в css самих блоков, а мне еще неизвестно, какие блоки будут в футере и их количество...
Можно ли как-нибудь поправить css самого футера, чтобы он располагал в себе блоки горизонтально?
модуль blocktheme или block_class. В первом есть видео. в втором всё и так понятно)) в стиль прописываешь
position:relative;
float:left;
}
Помоему так))
Ну это опять же темизация самих блоков, а не региона.
Все дело в том, что пишу тему и хотелось бы в ней сделать регион, который выводил бы блоки горизонтально, так что доп модули не подходят - надо через css региона.
Я понял.))
В теме добавить/править:
<div id="regin_tot_samy" class="regin_tot_samy">
<?php print $regin_tot_samy; ?>
</div>
<?php }?>
position:relative;
float:left;
}
А так?
Но это плохой пример)) Лучше видел на хабре, как темизовать каждый регион)) очень понравилось темизация.
Попробовал.. не получается... видимо руки совсем не оттуда растут ((
Собственно код:
<?php if (!empty($content_bottom)): ?>
<div class="region region-content-bottom">
<?php print $content_bottom; ?>
</div>
<?php endif; ?>
position:relative;
float:left;
}
Что-то мне подсказывает, что проблема в том, что в РНР у меня нет id и класс называется через пробел.
ЗЫ: это не стопроцентно моя тема - делаю надтему, хотелось бы с минимальным дописыванием сделать.
Так узнайте точно, есть ли у вас нужные классы
Если такой код:
<div class="region region-content-bottom">
<?php print $content_bottom; ?>
</div>
<?php endif; ?>
то такой css:
position:relative;
float:left;
}
Спасибо всем большое! С этим разобрался, но почему-то мой футер не видит дивов, которые в него включены.
Ладно... буду копать... еще раз СПАСИБО ))
Если я правильно понял - он не меняет высоту футера, тогда задай высоту сам или http://habrahabr.ru/blogs/css/48391/
Когда я задаю высоту, тогда все нормально, но я же не могу знать заранее высоту тех блоков, которые будут помещены в футер. В общем не по силам оказалась задача для меня... бросаю... Спасибо за помощь и потраченное время!
Мда дал же ссылку. Плохо гуглишь))
На держи!
Добавить в css:
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-t... */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
Править:
<div class="region region-content-bottom clearfix">
<?php print $content_bottom; ?>
</div>
<?php endif; ?>
Огромнейшее спасибо!!! Честно.. не понял как, но это работает )) Все хорошо, за исключением одной мелочи..
Блоки , которые попадают в футер должны получать какую-то ширину, сейчас они прижимаются к левому краю и занимают процентов 70-80 ширины футера, а хотелось бы распределить их равномерно. Делаю так:
position: relative;
float: left;
clear: none;
width: auto;
}
Но не получается (((
В общем сижу разбираюсь. А код, который Вы прислали просто СУПЕР! Я вообще-то программер со стажем, но пока в css не профи, потому для меня это по большей части МАГИЯ )))
Пробуй так:
position: relative;
float: left;
width: 100%; /*для li помогало - но не уверен*/
}
Или юзай таблицы со 100% шириной, но тогда модуль http://drupal.org/project/blocktheme придётся юзать. чтобы сделать блок в виде столбцов))
100% ширина не подошла...
В общем решил сделать так:
position: relative;
float: left;
clear: none;
margin-left: 2%;
margin-right: 2%
}
Не совсем красиво, но это хоть как-то.
ЗЫ: оказалось, что в теме, которую я взял за основу уже был класс clearfix )) и я просто использовал его )))
За код ОГРОМНОЕ спасибо!!! Пусть даже и не получилось так, как хотелось на 100%, но зато приобретен новый опыт, а он бесценен!
Чтобы не было траблов с высотой и соответственно с работой margin если у вас задан float:left, следует использовать display: inline-block; Но тут проблема с кроссбаузерностью
Нужно хитрить, вот хороший способ
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
_overflow:hidden;
width:200px; /* ваша ширина */
height:200px; /* ваша высота */
background:#fff;
margin:1px;
Это же гениально!!!!!!!
Работает отлично, только я тут немного "похитрил" )) некоторые строки закомментил, и при этом все работает... Вот код:
display:inline-block;
/*zoom:1;
display:inline;*/
overflow:hidden;
width:200px; /* ваша ширина */
height:200px; /* ваша высота */
background:#fff;
margin:1px;
Может в будущем мне это аукнится? Просто сейчас работает отлично в FF и IE. Может расскажите о сакральном смысле строк, которые я исключил? )))
Я там вроде писал выше про кроссбраузерность.
Так в том-то и дело, что я их закоментил и у меня все работает в разных браузерах... может они мне и не нужны вовсе? ))
Тот же вопрос, нужно разместить в регионе content два блока горизонтально.
Рассказали всё подробно, но подскажите пожалуйста еще для особо тупых, в цсс добавил, а вот
это где править нужно? пробовал в page.tpl, там где указан вывод блока content но у меня это приводит к тому что блок просто перестает отображаться. Согласен, руки кривые, потому и прошу рассказать подробней.
апд.
хм, при цитировании почему то у меня не отображаются строки с div, когда открываю редактирование то они есть а в посте не отображаются ) странно как то оно меня фильтрует.