11 мая 2008 в 16:29
Приветствую. Решил начать разбираться в друпале. Итак, распишу по порядку что есть:
1)Чистый друпал
2)Тема http://drupal.org/project/burnt
3)Небольшие знания css и html
Как вы догадались-я новичек. Познания невелики, поэтому кто знает-распишите попонятнее, буду признателен.
Вобщем суть проблемы:
у меня есть шаблон(прикреплен внизу). В нем как я понял, должны существовать блоки:
- Залоговок с лого, названием сайта, слоганом(верх)
- Что-то вроде блока сразу под заголовком(блок с меню темного цвета)
- Как и положено, правая и левая колонка
- Содержимое
- Подвал
Что мы имеем в готовой теме:
- Заголовок без лого
- Левая и правая панели, причем очень странно, отображаются друг под другом в настройках блоков
- Содержимое
- Подвал
Вопросы:
- Попробовал вставить в page.tpl.php лого, все норм поставилось(вырезал строку из другой темы с div конструкциями, но как подвинуть картинку допустим правее и ниже непонимаю
- Как видно на шаблоне, надо сделать сразу под заголовком полоску с меню. Это в моей css div .menu. Есть какие додумки?
- Хочу еще услышать советы по опводу того, как перенести и главное видоизменить меню с регистрацией/входом пользователя, чтобы оно находилось в самом правом углу заголовка.
- Есть еще како-то глюк, поиск не переносится в блок заголовка(в других темах он сразу там был) Думаю, оно куда-то уезжает.
- Допустим, у меня в теме прописана primary link переменная, она отображается сразу под заголовком в виде меню. Но тут опять же непонятно, как поменять допустим цвет бэкграунд этой области и выравнять по средине страницы.
Люди добрые, помогите!!
| Вложение | Размер |
|---|---|
 style.zip | 28.6 КБ |
Комментарии
Попробовал вставить в page.tpl.php лого, все норм поставилось(вырезал строку из другой темы с div конструкциями, но как подвинуть картинку допустим правее и ниже непонимаю
Ответ:
CSS позволяет определить точное положения HTML-элементов.
С помощью CSS программист может размещать содержимое двумя способами:
1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.
2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.
position
Определяет используемый метод позиционирования.
Значение:
* static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).
* relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы.
* absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.
* fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.
* inherit - принимается значение родительского элемента.
p {position: absolute}
top, right, bottom, left
Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого).
Значение:
* auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).
* любая соответствующая стандарту длина - число, представляющее величину смещения от края.
* любое соответствующее стандарту процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).
* inherit - принимается значение родительского элемента.
p {top: 20px; right: 40px}
Примеры: [1][2]
z-index
Определяет порядок расположения элементов в стеке (slacking order).
Значение:
* auto - элемент располагается на том же месте, что и его родительский элемент (по умолчанию).
* любое соответствующее стандарту целое число - порядковый номер элемента в стеке.
* inherit - принимается значение родительского элемента.
img {z-index: 3}
- Учи css! Можеж вот здесь набраться информации: http://www.ruled.ru
Хочу еще услышать советы по опводу того, как перенести и главное видоизменить меню с регистрацией/входом пользователя, чтобы оно находилось в самом правом углу заголовка.
Точно не знаю но думаю вот так
1. Нужно в page.tpl прописать это меню, подобно как здесь с search:
<div id="search-floater" class="noprint">
<?php print $search_box ?>
</div>
<?php endif; ?>
После в style прописать:
margin: 0 auto;
padding: 0 10px;
width: 770px;
И так далее...
}
Есть еще како-то глюк, поиск не переносится в блок заголовка(в других темах он сразу там был) Думаю, оно куда-то уезжает. - Так не понять в чем причина, нужно код смотреть!
Допустим, у меня в теме прописана primary link переменная, она отображается сразу под заголовком в виде меню. Но тут опять же непонятно, как поменять допустим цвет бэкграунд этой области и выравнять по средине страницы. - Ищи в Style её и переделывай как хочеш:
* Твой поиск.
*/
#Твой поиск {
height: Значиние размера px;
position:relative; /*С эти думаю всё понятно*/
background: url(images/header.jpg) no-repeat 0 0; /* Собсно сама текстура - можеш заменить простым фоном "color: #fff;" */
}
"makkon" - Всё понятно? Вопросы есть?
Все понятно. Убежал читать=)Спс
Вот вопросик:
в page.tpl.php вот такое есть:
Примари я задействовал, id menu у меня в css прописано оформление для меню, работает.
Однако, есть у меня еще в css цвет
.orange {
color: #FF9933;
}
В html это записывается как оранжевый знак >>
» Главная
Как мне сделать так, чтобы перед каждым новым элементом меню, выводился оранжевый символ >>
Пример при наведении на элемент меню:
1)Главная -> 2)>>Главная
Естественно, в заголовке (когда элемент меню делаю) его (символ) не указывать.
два разных вопроса - создать символ.. и дать ему цвет
FireBug юзаете? он много что решает
Нет, юзаю простой f3 в улучшенном тотал коммандере для просмотра кода.
Так все-таки какие могут быть пути выхода из данной ситуации? Может что поправить в page.tpl.php?
Вам хороший совет дал Argon, поставьте FireBug, он поможет ответить на многие ваши вопросы.
http://www.getfirebug.com/
Поставил я этот firebug, в принципе на блоки я и без него могу поделить, ведь он page.tpl не открывает на редактирование. КОнечно штука полезная, но проблему не решила.
Сейчас стоят 2 вопроса:
1) Как сделать разделитель в виде | между элементами меню?
2) Как к названию элемента меню впереди приписать символ другого цвета?
Блок с меню у меня выглядит так:
<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')) ?><?php } ?>
Соответствующая css:
#menu {
width: auto;
vertical-align: middle;
font-size:100%;
background-color:#003366;
padding: 1em 1em 1em 1em;
text-align: left;
color:#FFFFFF;
text-indent: 180px;
}
#menu a{
color:#FFFFFF;
}
#menu a:hover{
background-color:#003366;
text-decoration: underline;
}
Хотелось бы услышать более конструктивные решения, не фразы типа "Иголка лежит в том стоге сена". Я ведь тока учусь=)