Нужна помощь в понимании существующего макета CSS

Question

Я нашел этот замечательный сайт с различными примерами макетов на http://matthewjamestaylor.com

И, в частности, этот: текст ссылки

(просмотреть исходный код для полной CSS и разметки)

Я только изучаю css и не могу найти, где я могу изменить, изменить ширину полей (левого и среднего столбцов)

Каждое значение в этом макете связано с другим, поэтому, если я изменяю в одном месте, оно меняет другие места.

Answer 1

Первый шаг: установка Firebug для Firefox.

Существует три связанных значения, которые необходимо изменить: width и right боковой панели (.col2) и значение left среднего столбца (.colright).

Например, попробуйте следующие изменения:

.colright { left: 300px; }

.col2 { right: 250px; }

Это изменяет ширину боковой панели, но не ее ширину текста (таким образом, текст, кажется, имеет большее поле).

Answer 2

Слева управляется:

.leftmenu .col2 {
    float:left;
    width:170px;
    position:relative;
    right:185px;
}

Примечание: значение right больше ширины, что и определяет левый интервал этого столбца. Вам также необходимо изменить последнее значение маржи.

.leftmenu .col1 {
    margin:0 15px 0 215px;
    overflow:hidden;
    position:relative;
    right:100%;
}

и 200px left рисунок здесь:

.leftmenu .colright {
    background:#FFFFFF none repeat scroll 0 0;
    float:left;
    left:200px;
    position:relative;
    width:200%;
}

Обратите внимание на шаблон? 15 пикселей слева, затем 170 пикселей контента = 170 и 185. Добавьте 15 пикселей справа, перейдите к следующему столбцу и затем добавьте еще 15 пикселей, и вы получите 215 пикселей.