Фиксированный 3-х колоночный сайт - PullRequest
3 голосов
/ 11 января 2010

Я знаю, что об этом уже спрашивали, но мне любопытно посмотреть, изменились ли вещи.

Я ищу фиксированный макет html / css с 3 столбцами, в котором основная (средняя) область содержимого расположена первой (из 3 столбцов) в DOM - для SEO.

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 11 января 2010

Требуется немного дополнительной разметки, но чтобы получить контент первым, вы можете попробовать что-то вроде этого:

<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">I'm first</div>
        <div id="side_a">I'm second</div>
    </div>
    <div id="side_b">I'm third</div>
</div>

И в CSS:

#wrapper {
    width: 800px; /* Total width of all columns */
    margin: 0 auto;
}

#content-wrapper {
    float: left;
}

#content {
    width: 400px;
    float: right;
}

#side_a {
    width: 200px;
    float: left;
}

#side_b {
    float: left;
    width: 200px;
}

#wrapper ограничивает столбцы шириной 800 пикселей и делает страницу центрированной. Столбцы #content и #side_a располагаются внутри #content_wrapper в обратном порядке с использованием различных чисел с плавающей точкой. #side_b затем плавает рядом с #content_wrapper.

Рабочий пример можно найти здесь:

http://www.ulmanen.fi/stuff/columns.php

0 голосов
/ 02 апреля 2013

Это тот же подход, который использовался Тату, но с:

  • заголовок
  • нижний колонтитул
  • ширина жидкости вместо фиксированных размеров
  • столбцы с полноцветными фоновыми цветами
  • дополнительные элементы div для заполнения содержимого в столбцах

Вы можете проверить это на jsfiddle: http://jsfiddle.net/BzaSL/

HTML:

<div id="header">First: Header</div>
<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">
            <div id="contentpad">
                <h2>Second: Content</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
            </div>
        </div>
        <div id="leftcol">
          <div id="leftcolpad">
              Third: Left column
            </div>
        </div>
    </div>
    <div id="rightcol">
          <div id="rightcolpad">
              Fourth: Right column
          </div>
    </div>
</div>
<div id="footer">Fifth: Footer</div>

CSS:

/* wrapper has all three columns, it is 100% of page width.
 * background applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* clear floating elements before footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* content-wrapper is left two columns; 80% of wrapper width.
 * background applies to left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* content is 75% of the content-wrapper width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* leftcol is the other 25% of the content-wrapper width */
#leftcol { width: 25%; float: left; }
/* rightcol is 20% of thet wrapper width */
#rightcol { float: left; width: 20%; }
/* Adding padding or margin directly to the columns messes up the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }
...