На форуме меня спросили как сделать вёрстку на div-ах в 3 колонки так чтобы при отсутствии модулей в правой, левой или сразу обеих колонках центральная колонка растягивалась на всю ширину. Накидал каркас для шаблона из div-ов, решил выложить тут, вдруг кому тоже понадобится
Итак код template.php:
И код css:
Итак код template.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- HEAD !--> <?php cmsPrintHead(); ?> <link rel="stylesheet" href="/templates/3div/css/style.css" type="text/css" media="screen" /> <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' /> <!--[if lt IE 7]> <link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' /> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/> <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script> <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script> <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script> </head> <body> <div id="wrapper"> <div id="header">header</div> <div class="content-tab"> <div class="content-tab-row"> <?php if (cmsCountModules("left")) { ?> <div class="tab-cell left"><?php cmsModule("left"); ?></div> <?php } ?> <div class="tab-cell content"> <div><?php cmsModule("top"); ?></div> <div><?php cmsBody(); ?></div> <div><?php cmsModule("bottom"); ?></div> </div> <?php if (cmsCountModules("right")) { ?> <div class="tab-cell right"><?php cmsModule("right"); ?></div> <?php } ?> </div> </div> <div class="clear"></div> <div id="footer">footer</div> </div> </body> </html>
* { margin: 0; padding: 0; } #wrapper { width: 1000px; margin: 0 auto; } #header { height: 100px; background-color:#333; } .content-tab { display: table; width: 1000px; } div.content-tab div.tab-cell { display: table-cell; } div.tab-cell { display: block; } div.content-tab-row { display: table-row; } .content-tab .left { width: 200px; background-color: #CCC; vertical-align:top; } .content-tab .content { text-align:justify; vertical-align:top; } .content-tab .right { width: 200px; background-color: #CCC; vertical-align:top; } .clear { float: none; clear: both; margin: 0; padding: 0; } #footer { height: 50px; background-color:#666; }
Реклама #
lezginka.ru 14 лет назад #
-=NEXT=- 14 лет назад #
[ECHO]ALiDozer 14 лет назад #
-=NEXT=- 14 лет назад #
lezginka.ru 14 лет назад #
Можно переписать код так, чтобы шапка сайта создавалась из одной цельной картинки.
wmaximum 14 лет назад #
lezginka.ru 14 лет назад #
-=NEXT=- 14 лет назад #
вот этой строке сделай в css бэкграунд и всё
lezginka.ru 14 лет назад #
-=NEXT=- 14 лет назад #
В стилях пропиши бэкграунд и все дела т.е. тут:
#header {
height: 100px;
background-color:#333;
}
Ссылка на архив каркаса, поставь как шаблон увидишь в работе:
тут
lezginka.ru 14 лет назад #
твои файлы поставить вместо дефолтовских ?
или код добавить в дефолтовский и вместо каких строк ?
Alphaweb 14 лет назад #
Наверное, придётся шаблон мастерить...
-=NEXT=- 14 лет назад #
lezginka.ru 14 лет назад #
-------------
сможешь код дать,который можно добавить в дефотовский шаб, чтобы наверху (шапка сайта) была как ты и предлагаешь ?
просто поменять код, так можно ?
-=NEXT=- 14 лет назад #
lezginka.ru 14 лет назад #
lezginka.ru 14 лет назад #
lezginka.ru 14 лет назад #
может заодно и мне ответишь(вопрос выше) ?
13 лет назад #
-=NEXT=- 13 лет назад #
Dost 11 лет назад #
Rossoman 11 лет назад #
Мне честно, просто интересно)