Преобразование таблиц в слои CSS - PullRequest
Новая
       4

Преобразование таблиц в слои CSS

4 голосов
/ 05 августа 2011

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

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

Ответы [ 4 ]

3 голосов
/ 05 августа 2011

http://jsfiddle.net/qJBpk/10/

Проверьте предварительный просмотр здесь .

Это базовая настройка, у вас есть div-обертка, которая содержит всю вашу структуру: заголовок, три столбца и нижний колонтитул.

Оболочка div имеет поле, установленное на auto, это позволит ему горизонтально располагаться по центру (вместе со всем его содержимым) в окне браузера.

Для трех столбцов свойство float установлено влево, поэтому каждый из них размещается рядом с другим.

Нижний колонтитул имеет свойство clear, установленное на оба, что позволит размещать его после самого высокого плавающего столбца, чтобы избежать сбоя макета.

Элементы Div являются элементами уровня блока. Это означает, что, помимо прочего, они занимают все доступное пространство ширины, поэтому нет необходимости устанавливать ширину для разделов #header и #footer.

EDIT

Чтобы избежать кросс-браузерной несовместимости и проблем, лучше выполнить сброс CSS (набор правил CSS, который сделает все элементы максимально похожими во всех браузерах), например YUI, Разместите его первым перед любым другим кодом CSS.

2 голосов
/ 05 августа 2011

просто еще один!; -)

full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers

надеюсь, это поможет!

2 голосов
/ 05 августа 2011

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

Вместо: 

<div id="menu-header">
    <h1>HEADER</h1>
</div>
<div id="menu-body">
    <p>MENU BODY</p>
</div>

Попробуйте что-то вроде: 

<div id="menu">
    <div id="menu-header">
        <h1>HEADER</h1>
    </div>
    <div id="menu-body">
        <p>MENU BODY</p>
    </div>
</div>

Таким образом, если вы хотите переместить меню и все в нем, вы можете написать правило CSSкак это: 

#menu {float:left;margin:15px 0 0 25px;}
1 голос
/ 05 августа 2011

Похоже на простую 3-х элементную схему.Вам нужно создать 3 div.Один для левого, среднего и правого содержимого.Эти три div'а будут помещены в div-оболочку.

Итак, возьмите свои div-элементы left_menu, content и right_menu, задайте им ширину и установите для них float: left;поэтому они все будут помещены рядом друг с другом.Поместите их в div обертки, который больше, чем все три.Вы сделали!

...