Простейший CSS шаблон фиксированной ширины
Сделал я этот шаблон так: взял шаблон данного сайта (переделанный стандартный скин Wordpress), скопировал css файл на локальный диск, и стал мучить, шаг за шагом удаляя все CSS свойства. Как только структура стала ломаться я переставал удалять свойства. В итоге получился не-очень большой CSS файл и просто мизерная HTML страница, к которой этот файл применяется.
Вот так будет выглядеть результат работы приведенных файлов:
Собственно основной файл css_template_center.css:
body {
font-size: 62.5%; /* сбрасывает 1em до 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #eeeeee;
text-align: center; /* выравнивает по центру контейнер #page*/
}#page {
background-color: white;
border: 1px solid #959596;
text-align: left; /* прибивает к левому краю содержимое дива #page*/
margin: 30px auto 30px auto; /* обеспечивает центровку page в ФФ, Опере и Сафари */
width: 900px;
}
#header {
background: green;
height: 152px;
width: 900px;
}
#content {
float: right; /* обтекает соседний элемент, в данном случае #sidebar, перемещаясь в правую сторону */
padding: 0 0 20px 35px;
width: 590px;
}
#sidebar{
padding: 30px 22px 10px 30px;
width: 165px;
background:#eeeeee;
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#footer {
border: none;
margin: 0 auto; /* для выравнивания по центру в нормальных браузерах (все кроме ИЕ) */
width: 900px;
clear: both; /* игнорирует обтекание в предыщущих элементах; в данном случае float: right; в #content */
background:gray;
}
Ну и очень простой HTML-файл index.html:
<html>
<head>
<link media=”screen” type=”text/css” href=”css_template_center.css” rel=”stylesheet”/>
</head>
<body><div id=”page”>
<div id=”header”> Header </div>
<div id=”content”> Content (здесь стоит много <BR>’ов) </div>
<div id=”sidebar”> Sidebar (здесь стоит много <BR>’ов) </div>
<div id=”footer”> FOOTER </div>
</div></body>
</html>
В последнем листинге кавычки и угловые скобки кода преобразованы в сущности чтобы файл CSS не цеплял эти элементы и не применял к ним стилевые свойства. Поэтому чтобы сделать из них нормальные символы вам возможно придется предпринять некие манипуляции. Если без манипуляций - то качайте здесь архив примера. А здесь можно посмотреть работу примера живьем.
Пример не претендует на абсолютность проработки всех мелочей, которые можно было-бы предусмотреть, а делает акцент на принципиально важные вещи, необходимые для создания CSS шаблона фиксированной ширины.
