Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

0 Пользователей и 1 Гость просматривают эту тему.
  • 11 Ответов
  • 2912 Просмотров
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
Позиционирование блокв
« : 21.11.2011, 21:26:33 »
Имею код:
Код
		<div id="header">

<!--Размер шрифта - управление-->
<?php if (($this->params->get('showFontsize'))!=0) : ?>
<div id="user-tools">
<a class="jfontsize-button" id="jfontsize-m" title="Уменьшить шрифт" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/user-decrease.png" alt="A-" width="16" height="16" /></a>
<a class="jfontsize-button" id="jfontsize-d" title="Восстановить шрифт" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/user-reset.png" alt="A-" width="16" height="16" /></a>
<a class="jfontsize-button" id="jfontsize-p" title="Увеличить шрифт" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/user-increase.png" alt="A-" width="16" height="16" /></a>
</div>
<?php endif; ?>
<!--Размер шрифта - управление-->

<?php if ($this->countModules('top')) : ?>
<div id="top">
<jdoc:include type="modules"  name="top" style="xhtml" />
</div>
<?php endif; ?>
<a href="<?php echo $this->baseurl ?>" id="logo"></a>

<jdoc:include type="modules"  name="nav" style="none" />
</div>

и к нему стили
Код
/* Header */
#logo  {width: 100%; height: 155px; position: relative; display: block; margin: 0;}
#header {height: 212px; background: url("../images/header-bg.jpg") no-repeat;}
#top {background: #fff; height: 128px; max-width:220px; position: relative; float: right; top: 10px; right: 10px; overflow:hidden;}
#user-tools {float: right; position: relative; width: 62px; height: 16px; padding: 5px; top: 78px; right: 35px; z-index: 1; text-align: center;}

/* Nav */
#header ul.menu {bottom: 0;clear: both;left: 40px;position: relative;}

В позиции nav публикую меню, проблема в том, что стиль bottom:0; по моему представлению должен позиционировать меню в нижней части блока header. Но этого не происходит, он прилипает к logo. Пробовал меню обернуть в див и наоборот, но один фиг как будто нет стиля bottom:0;.
Где я накосячил  ^-^?
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Re: Позиционирование блокв
« Ответ #1 : 21.11.2011, 21:34:12 »
bottom: 0 прижимает блоковый элемент книзу, если position absolute или fixed.
Вы у каждого блока на момент тестирования пропишите background: red; (green, blue, yellow, black) - и смотрите где что не так.

Я ваш код посмотрел - но не вчитывался ... ща скажу как сделать снизу:
<div class="header"> - высота хедера (155)
<div class="nav"> - высота нава (пусть 20)
Значит:
.nav {margin-top: 135px;} (от верха хедера отступили 155 -20)

Код: css
#header ul.menu {margin-top: 135px;left: 40px;position: relative;height: 20px;}
- вот так попробуйте
« Последнее редактирование: 21.11.2011, 21:37:46 от Pazys »
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Позиционирование блокв
« Ответ #2 : 21.11.2011, 21:38:04 »
Добавьте
Код
#header {position: relative;}
#header ul.menu {position: absolute;}
Немного по-другому это работает. При position: relative элемент позиционируется относительно себя, любимого. При position: absolute - относителя родителя ТОЛЬКО если он (родитель) не статичен. В противном случае будет позиционироваться от начала самого первого родителя, т.е. тэга HTML.
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
Re: Позиционирование блокв
« Ответ #3 : 21.11.2011, 21:40:45 »
bottom: 0 прижимает блоковый элемент книзу, если position absolute или fixed.
Учусь по http://htmlbook.ru/css/position получается дизинформация или я не врубаюсь?
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
Re: Позиционирование блокв
« Ответ #4 : 21.11.2011, 21:43:13 »
Добавьте
Код
#header {position: relative;}
#header ul.menu {position: absolute;}
Немного по-другому это работает. При position: relative элемент позиционируется относительно себя, любимого. При position: absolute - относителя родителя ТОЛЬКО если он (родитель) не статичен. В противном случае будет позиционироваться от начала самого первого родителя, т.е. тэга HTML.
Такс, запускаю XAMMP
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Позиционирование блокв
« Ответ #5 : 21.11.2011, 21:43:51 »
Где дезинформация? Далее цитата с вашей ссылки:
Код
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Код
absolute
 Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Тот же хер, только в профиль. Тоже самое, что я сказал, только более развёрнуто ^_^
------добавлено-------
упс, не меня выше цетировали  ^-^
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Позиционирование блокв
« Ответ #7 : 21.11.2011, 21:51:45 »
Пожалуйста.
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Re: Позиционирование блокв
« Ответ #9 : 21.11.2011, 22:11:39 »
А проверьте что я написал, если несложно.

Охота самому узнать - что я вам там нарекомендовал .....
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Позиционирование блокв
« Ответ #10 : 21.11.2011, 22:16:34 »
Будет работать. Так то при вашем раскладе должно считать не от начала хедера, а от кончала user-tools. Но user-tools вырван из потока посредством float:right, а все остальные элементы в потоке, следовательно высота user-tools игнорируется.
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
Re: Позиционирование блокв
« Ответ #11 : 21.11.2011, 22:28:24 »
А проверьте что я написал, если несложно.

Охота самому узнать - что я вам там нарекомендовал .....
В вашем случае толкается от logo
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не работает transition для определенных элементов

Автор Bozhkov2

Ответов: 5
Просмотров: 4155
Последний ответ 12.10.2016, 17:07:41
от Bozhkov2
Как сделать такой заголовок модуля?

Автор Ilhom666

Ответов: 9
Просмотров: 1835
Последний ответ 22.03.2016, 11:55:33
от darkghost
Выставить относительно фона пункты меню ?

Автор warlocksp

Ответов: 6
Просмотров: 1500
Последний ответ 01.02.2016, 10:58:26
от warlocksp
Вставка шрифта?

Автор warlocksp

Ответов: 16
Просмотров: 1672
Последний ответ 18.01.2016, 19:04:11
от warlocksp
Удалить маркеры?

Автор warlocksp

Ответов: 4
Просмотров: 2245
Последний ответ 09.01.2016, 17:07:35
от warlocksp