14 апреля 2009 в 14:45
Насколько реально сделать тему (или может есть готовая?) у которой всего 4 региона (Заголовок, левая колонка, подвал и контент) таким образом, чтобы первые три всегда были на экране неподвижно, а только контент имел скроллинг? Сам я вижу варианты, что это можно раелизовать на ява-скрипте с перерисовкой статичных элементов после окончания скроллинга, но это некрасиво "прыгает". Второй вариант - использовать фрейм - вроде все хорошо, но их почему то не любят (кстати, почему их не любят я нигде внятного ответа не нашел - может проясните?). Есть какой нибудь третий вариант?
Заранее спасибо за ответы!
Комментарии
Фреймы поисковики не любят.
--
Очень грубо говоря, но смысл думаю будет понятен. - Через CSS.
.main-content-clip - то что вам нужно, останется темизировать скроллы.
посмотрите как работает данный html.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Scroll</title>
<style type="text/css">
<!--
.main-content-clip {
overflow: scroll;
position: relative;
z-index: auto;
height: 400px;
width: 600px;
float: left;
background-color: #FFFF99;
}
#main-container {
width: 800px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#main-content {
width: 600px;
float: left;
clear: none;
background-color: #FF6600;
}
.main-content-style {
padding: 10px;
}
#header {
height: 100px;
width: 100%;
background-color: #00CC33;
}
#footer {
height: 60px;
float: left;
text-align: center;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#left-sidebar {
float: left;
width: 200px;
background-color: #FFFFCC;
}
-->
</style>
</head>
<body>
<div id="main-container">
<div id="header">
<div align="center"><strong>header</strong></div>
</div>
<div id="left-sidebar">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</div>
<div id="main-content">
<div class="main-content-clip">
<div class="main-content-style">
Nunc suscipit, turpis quis aliquam adipiscing, lectus sem laoreet dui, et fringilla lectus neque non velit. Pellentesque sem arcu, pulvinar quis, malesuada id; congue at, risus. Nam viverra lobortis neque. Curabitur a dolor. Quisque vel nisi. Mauris porttitor. Sed consectetur condimentum neque. Morbi quis ipsum! Nam auctor libero sed diam. Mauris eget nulla. Aenean sit amet nisi. Duis sed arcu. Mauris suscipit justo vitae massa. Morbi placerat orci a eros.
Mauris fermentum, turpis vitae pharetra rutrum; metus nisl porttitor augue, ut eleifend lorem nisi congue purus. Nunc lobortis feugiat tellus. Praesent lobortis. Nam elementum. Nulla facilisi. Donec sapien. Suspendisse sit amet elit fermentum mauris gravida luctus. Duis blandit. Proin quis nisl sit amet ipsum vulputate egestas. Aenean quis eros. Nullam aliquet nisi vel mi. Donec rhoncus, risus id malesuada tempor, tellus diam dapibus neque, tristique ornare libero magna sed velit. Ut id arcu ut nulla congue tincidunt. Curabitur at purus. Duis eleifend risus volutpat tellus. Nunc at justo ac nisl pellentesque facilisis. Donec faucibus feugiat elit. Donec lorem. Etiam ut lorem posuere sem fringilla semper. Morbi vitae orci?
Fusce ut purus. Nullam velit quam, convallis et, gravida a, laoreet volutpat, turpis. Suspendisse sed ante. Aenean aliquet. Pellentesque nibh velit, pellentesque quis, volutpat et, faucibus eu, dolor. Quisque turpis nunc, accumsan eget, laoreet sed, commodo id, turpis. Pellentesque tortor turpis, vulputate ut, aliquet nec, consequat quis, lorem. Ut nec nisi sed magna ornare venenatis. Proin mollis? Quisque in lacus et mauris porttitor porta.
Sed adipiscing nulla nec erat. Cras tellus mi, accumsan non, sodales ut, eleifend cursus, nisl. Donec imperdiet ipsum quis mi bibendum porttitor. Nunc id felis. Donec et odio. Nunc odio magna, vulputate ut, placerat nec, varius vitae, neque. Donec congue. Ut bibendum; ante a fringilla posuere, risus nibh tempus massa, ut ultricies nisl nisl vitae eros. Pellentesque ligula. Duis laoreet enim vitae massa! Nam adipiscing orci. Nullam non erat? Sed dolor erat, gravida sed, eleifend sodales, lobortis eleifend; nulla. In hac habitasse platea dictumst. Duis luctus. Maecenas purus lectus; elementum nec; tempor id, viverra at, nunc. Nunc ultrices.
Donec accumsan; est et lacinia lacinia, tortor urna dictum velit, eget aliquam nisl turpis at nibh. Donec aliquet aliquet nibh. Proin sit amet nisi. Integer nec massa id sapien lacinia rutrum? Maecenas iaculis. Proin fringilla erat sed lacus. Donec egestas tempor nibh. Nam pretium arcu. Curabitur lobortis vestibulum erat. Curabitur cursus. Sed congue feugiat eros. Aliquam non felis. Curabitur iaculis venenatis dui? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam iaculis, augue et porta tempus, orci elit commodo magna, nec vehicula nulla metus id odio. In lorem nulla, faucibus nec, tincidunt sed, pellentesque vel, dui. Pellentesque dignissim mollis massa. Vivamus et libero.
Aliquam porta dui at turpis gravida tristique? Fusce dapibus pulvinar lacus. Vestibulum vulputate nunc at nibh. Cras quis justo eget quam consequat accumsan. Nullam dui dui, consequat ac, feugiat at, ornare non, nisi. Nam fermentum, odio quis iaculis interdum, est nibh ultricies est, quis auctor massa mi vitae risus. Pellentesque et velit. Quisque vel orci. Donec placerat, dolor in interdum ultrices, dolor urna lobortis urna, eleifend blandit est lectus vitae enim. Morbi nunc. Mauris convallis nibh a massa. Fusce odio ante, bibendum at; ullamcorper eget, consectetur quis, nibh. Phasellus dui diam, malesuada sit amet; lobortis eget, tristique nec, eros. Sed mi. Phasellus sed ipsum quis orci elementum posuere.
</div>
</div>
</div>
<div id="footer"><a href="#">footer link 1</a> | <a href="#">footer link 1</a> | <a href="#">footer link 1</a> | <a href="#">footer link 1</a></div>
</div>
</body>
</html>
Огромное СПАСИБО!!!
Направление мысли вроде понял. Пошел разбираться как это к Друпалу прикручивать...
Это сработает и в IE и в firefox, opera, G-chrome.
--
Вставляешь регионы прописанные в themename.info
--
regions[header]= Header
regions[leftsidebar]= Left Sidebar
regions[maincontent]= Main Content
regions[footer]= Footer
А в page.tpl.php (на основе exsample.html) добавляем эти регионы.
<?php
<!-- /start region name -->
<?php if (!empty($имя_региона)): ?>
<div id="ваш стиль">
<?php print $имя_региона; ?>
</div> <!-- /end region name -->
<?php endif; ?>
Жаль, что "overflow-y" поддерживается только в IE... А как в других браузерах горизонтальный скролл можно прибить оставив только вертикальный?Сорри, поверил документации на http://www.htmlbook.ru/css/overflow.html Сейчас проверил в Firefox - тоже работает... А как в других браузерах?
Вот..
overflow-x: hidden;
overflow-y: auto;
Огромное СПАСИБО!!!