Как организовать макет страницы с помощью div's

Question

У меня вопрос к более опытным программистам.

Как я могу наилучшим образом организовать элементы div так, чтобы они имели левую, среднюю и правую стороны?

Я сейчас работаю над своим веб-сайтом, и я провожу полдня, перемещая div, потому что они не остаются на месте после того, как я добавлю другой, и я хочу работать с относительным вариантом.

Также я занимаю их позицию с большими отрицательными числами. Просто это не кажется правильным способом сделать что-то. Я также получаю полосы прокрутки, когда все умещается на экране. Работа в режиме конструктора в Dreamweaver CS3 невозможна, потому что все рушится.

Я надеюсь получить информацию о том, как сделать это лучше.

спасибо, Ричард

Answer 1

На мой взгляд, вот некоторые основные принципы, которые следует учитывать при структурировании вашего сайта с помощью CSS:

• Позиционирование : Распространенная ошибка, которую допускают визуальные разработчики при создании своего первого чистого макета сайта CSS, заключается в использовании свойств абсолютного / относительного позиционирования. При размещении ваших элементов на странице, это все о блочной модели и о том, как поля, отступы и ширина взаимодействуют друг с другом. Нет необходимости использовать свойство position, пока вы не продвинетесь дальше. Из этого правила есть некоторые исключения, но пока мы будем соблюдать их просто.

• Упаковщики и контейнеры : упомянув вышеприведенную модель коробки, приводит меня к следующему пункту. Вы должны быть в состоянии правильно расположить все свои структурные элементы, используя свойство margin. Иногда разработчики смешивают отступы / отступы, что приводит к «неожиданному» поведению. Допустим, вы хотите создать элементы заголовка, содержимого и боковой панели. Кроме того, вы хотите добавить контент в эти элементы, не связываясь с родительскими элементами. Вам нужно установить конкретную высоту для вашего заголовка (px,% и т. Д.), Вам также нужно будет установить ширину для вашего контента и элементов боковой панели. При работе с контентом внутри этих элементов я обычно использую другой элемент, который действует как «контейнер» для вашего контента. Держитесь подальше от переопределения размера элемента-контейнера, потому что вы уже определили это в родительском элементе. Таким образом, вы можете свободно использовать margin и padding, не затрагивая размер родительского элемента ... если это имело смысл;)

• Очистить ваши поплавки : чтобы расположить содержимое и боковую панель, или другие элементы типа столбца, вам придется использовать свойство float для одного или нескольких ваших элементов. При использовании float важно помнить, что вы должны очистить их после того, как закончили «набор float». Это означает, что если у вас есть 3 столбца, все с установленными свойствами float: left, вы должны очистить их после набора, а НЕ после каждого столбца. Это зависит от компоновки, но обычно таким образом вы будете управлять плавающими объектами и не рискуете неожиданно перемещать другие элементы, которые в этом не нуждаются.

• Если сомневаетесь, сбросьте поля / отступы : Различия в браузерах расстраивают, если не сказать больше. Вы можете помочь в борьбе с этим, уничтожив свойства браузера по умолчанию, если они не определены. Я всегда нахожу, что если сбросить поле / отступ для 0 для сомнительного элемента, я легко могу исправить проблемы с пробелами.

• Используйте каскад, не переопределяйте : помните, что если вы уже определили кучу свойств CSS и работаете с дочерним элементом, вы не нужно переопределить свойства. Дети наследуют свойства своих родителей, поэтому определяют только различия.

Это будет иметь смысл, если вы будете больше с ним работать, но я надеюсь, что это даст вам некоторые моменты, которые следует учитывать при структурировании макета CSS. Выше приведены ссылки, которые также являются отличными ресурсами, но я подумал, что должен поделиться некоторыми вещами, о которых я лично думаю, работая в CSS.

Acorn

Answer 2

Нет необходимости изучать blueprintcss для создания простого макета div.

Чтобы начать работу с макетом div:

1. Положите ширину на div
2. Дайте им всем стиль float .

Пример макета из трех столбцов:

<div id="left_panel"  style="float:left; width:100px;">Left pane (100px)</div>
<div id="contents"    style="float:left; width:400px;">Contents (400px)</div>
<div id="right_panel" style="float:left; width:100px;">Right pane (100px)</div>

Дополнительные эффекты макетов div:

1. Если вы измените размер окна и уменьшите его, div'ы могут перейти на следующую строку.
2. Если содержимое внутри div может быть больше, чем высота / ширина div, используйте стиль «переполнение», чтобы решить, что делать. Вы можете установить его, чтобы скрыть переполненное содержимое, или автоматически добавлять полосы прокрутки к вашим элементам.

Надеюсь, это покажет вам, насколько простыми являются макеты div. Вы можете создать макет с помощью div вместо таблиц, но это не означает, что каждая таблица должна быть преобразована в div, например, фактические табличные данные должны быть в таблицах.

Answer 3

Если вы хотите использовать div слева, в середине и справа от чего-либо, вы ищете свойство float. Сделайте это на вашем левом div, например:

float: left;
position: relative;

, и он переместит div влево от страницы, а заставит другой контент справа от него . Это простой способ, например, создать боковую панель для области страницы. Вы все еще можете установить высоту и ширину для элемента, плавающего таким образом, и так как он все еще может принять позицию: относительный; собственность, в ней легко расположить другие вещи.

Answer 4

Использовать сетку CSS

Чертеж мой любимый: http://www.blueprintcss.org/

Я использую его через Compass / Sass: http://wiki.github.com/chriseppstein/compass

Позиционирование вручную - это путь к катастрофе, если вам не нравится размышлять над поплавками. Грид-системы позволяют вам определять вещи более простым способом. Компас позволяет вам делать это, поддерживая семантическую разметку.

Answer 5

Использование div для создания таблицы обычно не очень хорошая идея. Хотя, конечно, это возможно, лучшее решение почти всегда заключается в создании таблицы. Хорошо продуманное использование таблиц не является проблемой скорости в современных браузерах.

Answer 6

Начните с проверенного макета с сайта, как Позиция это все . Сэкономить вам время, изобретая велосипед. CSS - это то, чему нужно учиться.

Желание «работать с относительной опцией» - не всегда вариант или лучший способ. Это зависит от того, что вы пытаетесь сделать в каждом конкретном случае.

В любом случае, обычная причина того, что вещи движутся, заключается в том, что вы неправильно рассчитали размер вещей. Если ваша компоновка жесткая, достаточно всего лишь 1px, чтобы толкнуть колонку под всем. Попробуйте временно наложить границы на вещи, чтобы лучше визуализировать происходящее.

Answer 7

В поисках Святого Грааля - это отличная статья от ALA, в которой объясняется «лучший» метод настройки 3-колоночной компоновки с текучим центром / фиксированными сторонами и с правильным упорядочением по источнику <div> элементы.

Answer 8

Надеюсь, это не считается аргументация по ссылке:)

Я впервые узнал о многостолбцовой компоновке на основе div около 5 лет назад, и учебник, который помог мне в этом разобраться, был на Maxdesign.com . Это ссылка на учебное пособие, которое шаг за шагом проведет вас через создание базовой схемы из 3 столбцов.

Не думаю, что в эти дни я бы полностью следовал этому методу (например, такие методы, как искусственные столбцы появились с тех пор, как было написано это руководство), но это был хороший ледокол в способ мышления, который требует макет на основе CSS.

Answer 9

Вы, похоже, описываете макет из 3 столбцов.

Проверьте эту страницу на предмет индекса примеров .