Как сделать основной контент перед фоном в середине?

Я хотел бы знать, как сделать основное содержимое перед фоном в середине страницы ниже верхнего колонтитула. Например, на этом сайте. http://cdn.webfactore.co.uk/web_design_example_551_large.jpg Я не уверен, что это касается высоты и ширины или чего-то еще. Помоги мне, пожалуйста. Как сделать основной контент перед фоном в середине?Как сделать основной контент перед фоном в середине?

источник

2013-09-15 JonMo

Вы имеете в виду собаку изображение, которое выходит из сноски? –

Нет, я имею в виду всю среднюю секцию от нижнего колонтитула до нижнего колонтитула перед фоном. – JonMo

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

Вот быстрый HTML5 скелет

<!doctype html> 

<html> 

<head> 

</head> 

<body> 

    <header> 

    <div id="header-wrapper"> 


    </div> 

    </header> 


    <div id="content"> 



    </div> 


    <footer> 

    <div id="footer-wrapper"> 


    </div> 

    </footer> 


</body> 

</html> 


html, 
body { 
    background: #ccc; 
    font: 62.5% Arial, Helvetica, sans-serif; /* --- Setting body font at 62.5% makes 1.2em equal to 12px --- */ 
    line-height: 1.7em; 
    letter-spacing: 1px; 
    color: #222; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
} 
header { 
    background: #555; 
    position: relative; 
    width: 100%; 
    height: 60px; 
    margin: 0; 
    padding: 0; 
} 
#header-wrapper { 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 
} 
#content { 
    background: #fff; 
    position: relative; 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
    padding: 0; 
} 
footer { 
    background: #555; 
    position: absolute; 
    width: 100%; 
    height: 200px; 
    bottom: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
} 
#footer-wrapper { 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 
}

источник

2013-09-15 04:29:44 mdesdev

Не могли бы вы объяснить мне, пожалуйста? – JonMo

Я изменил свой ответ и сделал базовый пример скелета HTML5 и объяснил ..., чтобы сделать этот короткий ... контент всегда на вершине тела/фона и центрировать контент, который вы просто дали ему в некоторой ширине в CSS например 'width: 960px;' чем установить 'margin: 0 auto; ', что означает, что margin left/right автоматически, что помещает контент в центр, а верхнее/нижнее - 0px. – mdesdev

Хорошо. Спасибо. Теперь есть способ сохранить вход в контент, и поле содержимого автоматически падает/тянется вниз? – JonMo

Как сделать основной контент перед фоном в середине?

ответ

Смежные вопросы