100% ширина заголовка и нижнего колонтитула

Я новичок в CSS и я проектирую свой первый сайт с нуля с помощью CSS (недавно я окончил для любви к Богу, прекратив использовать html для стилизации ваших сайтов образ жизни).100% ширина заголовка и нижнего колонтитула

Я хочу создать страницу, где верхний и нижний колонтитулы простираются за пределы ширины копии тела и заканчиваются слева направо. Я начал код, но я застрял. Заголовок будет иметь логотип и навигацию (я еще не закодировал навигацию, но это не так сложно), а нижний колонтитул будет иметь только одну строку содержимого.

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

Любые предложения о том, как это сделать, будем очень благодарны! Извините, если это глупый вопрос. Благодарю.

HTML

<body> 

<!-- begin wrapper --> 
<div id="wrapper"> 

<!-- begin header --> 
    <div id="header"> 
    <p>Content</p> 
    </div> 

<!-- begin navigation --> 
    <div id="navigation"> 
    <ol> 
    <li>Home</li> 
    <li>Page 1</li> 
    <li>Page 2</li> 
    <li>Page 3</li> 
    <li>Contact</li> 
    </ol> 
    </div> 

<!-- begin content --> 
    <div id="content"> 
    <h1>Heading</h1> 
    <p>Content</p> 
    </div> 

<!-- begin footer --> 
    <div id="footer"> 
    <p>Content</p> 
    </div> 

</div> 

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); 

#header { 
    background: #636769; 
} 

#navigation { 
} 

body { 
    font-family: 'PT Sans Narrow', sans-serif; 
    font-size: 16pt; 
    background: url(../images/texture.png); 
} 

#wrapper { 
    width: 938px; 
    margin: 0 auto; 
    padding: 20px 20px; 
    background: white; 
} 

#footer { 
    background: #636769; 
}

источник

2012-05-30 stephenie

Если вы хотите #header и #footer, чтобы охватить всю страницу, вы также должны переместить их из #wrapper. Вы можете также указать высоту, например. height: 40px.

Хотите, чтобы верхний и нижний колонтитулы оставались на месте во время прокрутки? Если это так, используйте position: fixed; на обоих. Затем, на #header положить top: 0px; left: 0px; right: 0px;; и на #footer положить bottom: 0px; left: 0px; right: 0px;.

Что-нибудь еще, что вы хотите сделать, сообщите мне. Я был бы рад помочь.

источник

2012-05-30 03:20:17 woz

Это сработало - спасибо! – stephenie

Кажется, что я должен в основном настроить divs для любых разделов, которые я хочу, правильно? Итак, если я хочу иметь три столбца в разделе основного тела страницы, все это должны быть отдельные divs? – stephenie

Да, это правда. – woz

Поскольку ваш класс #wrapper охватывает всю страницу, все последующие теги наследуют одно и то же значение. Если вы хотите, чтобы #header или #footer игнорировали это, вам нужно указать другое значение для этих классов. Попробуйте изменить эти классы, чтобы указать их собственные значения ширины (т. Е. width: 938px;) и посмотреть, что произойдет.

источник

2012-05-30 03:23:18 McArthey

Спасибо! Я переместил

после заголовка, перед содержимым и перед нижним колонтитулом. – stephenie

Отлично! Рад, что это сработало для вас. – McArthey

Потяните header и footer divs за пределами wrapper, чтобы они соответствовали ширине страницы.

<body> 

<!-- begin header --> 
    <div id="header"> 
    <p>Content</p> 
    </div> 

<!-- begin wrapper --> 
<div id="wrapper"> 

<!-- begin navigation --> 
    <div id="navigation"> 
    <ol> 
    <li>Home</li> 
    <li>Page 1</li> 
    <li>Page 2</li> 
    <li>Page 3</li> 
    <li>Contact</li> 
    </ol> 
    </div> 

<!-- begin content --> 
    <div id="content"> 
    <h1>Heading</h1> 
    <p>Content</p> 
    </div> 

</div> 

<!-- begin footer --> 
    <div id="footer"> 
    <p>Content</p> 
    </div> 

</body>

источник

2012-05-30 03:25:30 saluce

Спасибо! Это не пришло мне в голову. – stephenie

100% ширина заголовка и нижнего колонтитула

ответ

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