Резиновый дизайн. Двухколонный макет — не выходит. - Вопросы по CSS

Phoenix168

Осваиваюсь на форуме
36
4 / 0

Резиновый дизайн. Двухколонный макет — не выходит.

« : 11.08.2008, 08:51:31 »

Есть задача сделать двухколоночный 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
Только начал учиться.

Re: Резиновый дизайн. Двухколонный макет — не выходит.

« Ответ #1 : 11.08.2008, 10:29:02 »

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

Записан

Схемы на ноутбуки

Phoenix168

Осваиваюсь на форуме
36
4 / 0

Re: Резиновый дизайн. Двухколонный макет — не

« Ответ #2 : 11.08.2008, 11:28:18 »

Мне больше подходит вариант верстки без применения абсолютного позиционирования. В статье это то что идет после заголовка «Использование плавающих элементов» до заголовка «Применение позиционирования».

Отдельно от шаблона 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 Просмотров: 1988	08.02.2017, 21:23:22 от beliyadm
Список выходит за пределы экрана Автор -sdr-	Ответов: 0 Просмотров: 1515	18.01.2016, 08:17:07 от -sdr-

Резиновый дизайн. Двухколонный макет — не выходит. - Вопросы по CSS

Новости Joomla

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

Swiper.js, документация на русском языке

Модуль материалов Joomla на Vue.js.Модуль выводит материалы с помощью JavaScript фреймворка Vue.js

Phoenix168

Резиновый дизайн. Двухколонный макет — не выходит.

oleggrz

Re: Резиновый дизайн. Двухколонный макет — не выходит.

Phoenix168

Re: Резиновый дизайн. Двухколонный макет — не

Похожие темы