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

Question

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

И в частности, это: link text

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

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

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

Answer 1

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

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

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

.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 пикселей.