Новости Joomla

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

Phoenix168

  • Осваиваюсь на форуме
  • 36
  • 4 / 0
Есть задача сделать двухколоночный div-ный макет с фиксированной по ширине колонкой меню.
В качестве теоретического прототипа взял _ttp://htmlbook.ru/content/?id=102.

Код
<body>
<div id="top"><?php mosLoadModules ( 'user3', -2 ); ?></div>
<div id="wrapper">
<div id="main">
<div id="header">
<div id="headerleft">
<div id="headerright">
<div id="headerback">
<div id="logo"></div>
<div id="buildings"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div id="user1"><?php mosLoadModules ( 'user1', -2 ); ?></div>
<?php mosMainBody(); ?>
</div>
<!-- end content -->
<div id="leftnav"><?php mosLoadModules ( 'left', -2 ); ?></div>
<div class="clear"></div>
<!-- end navigation -->
</div><!-- end main -->
</div><!-- end wrapper -->
<div id="footer"><?php include_once('includes/footer.php'); ?></div>
</body>
</html>

Вот эти <div id="content"> и <div id="leftnav">  ведут себя совсем не так как должны судя по статье, а именно несмотря на значительный margin-left у <div id="content">, <div id="leftnav"> все равно не встает слева от него, а находится слева но под <div id="content">.

В CSS нет почти ничего кроме
Код
#leftnav {
float: left;
width: 200px;
}
#content {
margin-left: 210px;
}
*

oleggrz

  • Захожу иногда
  • 435
  • 76 / 3
  • Только начал учиться.
Фрагменты из статьи на основе которой вы все это делали:
При формировании двухколонного макета левая или правая колонка устанавливается в заданное место через абсолютное позиционирование, а соседняя колонка освобождает для нее место за счет применения отступов. Для лучшего понимания рассмотрим пример, когда левая колонка имеет заданную ширину 200 пикселов, а ее положение определяется от левого верхнего угла окна браузера. Стиль для таких колонок приведен в примере 3.
...Значение absolute свойства position позволяет задавать положение слоя относительно края окна браузера независимо от наличия и местоположения других слоев. Сами координаты устанавливаются с помощью параметров left, top, right и bottom, которые соответственно определяют расстояние от левого, верхнего, правого и нижнего края окна. Чтобы левая и правая колонка не накладывались друг на друга, следует добавить отступ слева (margin-left) для слоя rightcol, как показано в данном примере. Значение этого отступа включает расстояние от левого края (параметр left) и ширину левой колонки (width) плюс дистанция между колонками.
*

Phoenix168

  • Осваиваюсь на форуме
  • 36
  • 4 / 0
Мне больше подходит вариант верстки без применения абсолютного позиционирования. В статье это то что идет после заголовка «Использование плавающих элементов» до заголовка «Применение позиционирования».  ^-^

Отдельно от шаблона J! — пример №1 из статьи работает.
P.S. появилась идея поменять дивы местами.. будем пробовать...

Update:
Вобщем все выходит просто внимательнее смотреть надо и знать мат.часть в области того как браузеры html-код верстки обрабатывают:
Достаточно поменять местами дивы <div id="content"> и <div id="leftnav"> — и все работает ::).
Всем спасибо за внимание.

« Последнее редактирование: 13.08.2008, 12:54:43 от Phoenix168 »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как поправить макет блога?

Автор wishlight

Ответов: 4
Просмотров: 1037
Последний ответ 26.04.2019, 10:35:57
от wishlight
Элемент flexbox выходит за края родителя [РЕШЕНО]

Автор dm-krv

Ответов: 3
Просмотров: 10248
Последний ответ 05.04.2019, 16:07:44
от dm-krv
Резиновый слайдер в jm-services

Автор k790

Ответов: 0
Просмотров: 950
Последний ответ 07.12.2017, 16:40:28
от k790
css: Резиновый модуль поиска

Автор slepoy

Ответов: 1
Просмотров: 1987
Последний ответ 08.02.2017, 21:23:22
от beliyadm
Список выходит за пределы экрана

Автор -sdr-

Ответов: 0
Просмотров: 1514
Последний ответ 18.01.2016, 08:17:07
от -sdr-