<html>
<style>
div {width: auto !important; width: 100%; margin:0px; padding: 0px;}
#allText {position: relative; left: 202px; top: 18px; width: 70% !important; z-index: 10; background: #FFFFFF;}
.menu {background-position: left center; background-repeat: no-repeat; display: block; color: #C8CDD7; padding: 6px 5px 6px 32px;font-family: Tahoma; font-size: 11px;}
.menu:hover {border-bottom: #6980B5 1px solid; border-top: #6980B5 1px solid; display: block; text-decoration: none; padding: 5px 5px 5px 32px; background-color: #302D53;}
.copy {color: #000; font-size :10px; position: relative; left:-200px; z-index: 3; padding: 30px 0 20px 50px;}
table.bg_top{border:solid 1px red;position:absolute;}
</style>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<!--никогда не ставь height:100%, для чего бы ни было, т.к. осел применит размер родительского объекта а мозилла размер окна браузера, и поставь bg_top: position:absolute -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="bg_top">
<tr valign="top">
<td style="border: #F00 1px solid;">ШАПКАШАПКАШАПКА</td>
</tr>
<tr valign="top">
<td>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menum<br>enumenu</a>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menumenumenu</a>
<a class="menu menu1" href="">MENUME<br>NUMENU</a>
</td>
</tr>
</table>
<div id="allText"><!--объедини center-block и copy внутри одного блока и преминяй к position:relative;-->
<div class="center-block" style="border: #0f0 1px solid;">
текст, много текста, очень очень много текста.текст, много текста, очень очень много текста.текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
v
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
текст, много текста, очень очень много текста.
</div>
<div class="copy" style="border: #00f 1px solid">ООО Панорама-Юг. 2006<br>Все права защищены.<br>тел. 266-66-66, 255-55-55</div>
</div>
</body>
</html>
траблы с футером
Ситуация в следующем.
Ввиду особенностей дизайна, блок контента пришлось разместить в диве с абсолютным позиционированием и с z-index: 10. Сам контент бывает и коротким (пикселей на 200) и довольно длинным (более 1000px).
Кроме контента есть боковое меню и шапка с нормальным позиционированием.
Дело в том что если контент больше длины экрана, то он уже получается как бы вне страницы и из-за этого футер с абсолютным позиционированием и параметром bottom: 0 зависает внизу видимой области экрана, как будто страница состоит только из шапки и левого меню... То есть контент с абсолютным позиционированием в данном случае в рассчет не берется...
причем во всех браузерах.
Вопрос состоит в том, как можно описать футер (подвал), чтоб он был всегда снизу, независимо от длины контента?
Спасибо!
Ввиду особенностей дизайна, блок контента пришлось разместить в диве с абсолютным позиционированием и с z-index: 10. Сам контент бывает и коротким (пикселей на 200) и довольно длинным (более 1000px).
Кроме контента есть боковое меню и шапка с нормальным позиционированием.
Дело в том что если контент больше длины экрана, то он уже получается как бы вне страницы и из-за этого футер с абсолютным позиционированием и параметром bottom: 0 зависает внизу видимой области экрана, как будто страница состоит только из шапки и левого меню... То есть контент с абсолютным позиционированием в данном случае в рассчет не берется...
причем во всех браузерах.
Вопрос состоит в том, как можно описать футер (подвал), чтоб он был всегда снизу, независимо от длины контента?
Спасибо!
Таблицы попробуй на всякий случай...
Вообще, следует гибридизировать вёрстку: разумное сочетание таблиц и слоёв с использованием CSS.
Вообще, следует гибридизировать вёрстку: разумное сочетание таблиц и слоёв с использованием CSS.
а это и так таблично-блочная верстка
все дело в том, что нужно, чтоб контент был поверх всего остального
а страницу длина контента не интересует...
и здесь ни блоки ни таблицы не помогают... :(
может скриптом нужно?
все дело в том, что нужно, чтоб контент был поверх всего остального
а страницу длина контента не интересует...
и здесь ни блоки ни таблицы не помогают... :(
может скриптом нужно?
[QUOTE=Artin]а это и так таблично-блочная верстка
все дело в том, что нужно, чтоб контент был поверх всего остального
а страницу длина контента не интересует...
и здесь ни блоки ни таблицы не помогают... :(
может скриптом нужно?[/QUOTE]
покажи html код и css, той части какую хочешь править, с примечаниями.
все дело в том, что нужно, чтоб контент был поверх всего остального
а страницу длина контента не интересует...
и здесь ни блоки ни таблицы не помогают... :(
может скриптом нужно?[/QUOTE]
покажи html код и css, той части какую хочешь править, с примечаниями.
вот такая конструкция
<html>
<style>
div {width: auto !important; width: 100%; margin:0px; padding: 0px;}
.center-block {position: absolute; left: 202px; top: 58px; width: 70% !important; z-index: 10; background: #FFFFFF;}
.footer {position: absolute; bottom: 0; z-index: 3;}
.menu {background-position: left center; background-repeat: no-repeat; display: block; color: #C8CDD7; padding: 6px 5px 6px 32px;font-family: Tahoma; font-size: 11px;}
.menu:hover {border-bottom: #6980B5 1px solid; border-top: #6980B5 1px solid; display: block; text-decoration: none; padding: 5px 5px 5px 32px; background-color: #302D53;}
.copy {color: #000; font-size :10px; position: absolute; bottom: 0; z-index: 3; padding: 30px 0 20px 50px;}
</style>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="bg_top">
<tr valign="top">
<td style="border: #F00 1px solid;">ШАПКАШАПКАШАПКА</td>
</tr>
<tr valign="top">
<td>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menum<br>enumenu</a>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menumenumenu</a>
<a class="menu menu1" href="">MENUME<br>NUMENU</a>
</td>
</tr>
</table>
<div class="center-block" style="border: #0f0 1px solid;">
текст, много текста, очень очень много текста.
</div>
<div class="copy" style="border: #00f 1px solid">ООО Панорама-Юг. 2006<br>Все права защищены.<br>тел. 266-66-66, 255-55-55</div>
</body>
</html>
только слова "текст, много текста, очень очень много текста." нужно заменить на реально большое количество текста чтоб контент получился по высоте более высоты экрана, тогда будет наглядно
<html>
<style>
div {width: auto !important; width: 100%; margin:0px; padding: 0px;}
.center-block {position: absolute; left: 202px; top: 58px; width: 70% !important; z-index: 10; background: #FFFFFF;}
.footer {position: absolute; bottom: 0; z-index: 3;}
.menu {background-position: left center; background-repeat: no-repeat; display: block; color: #C8CDD7; padding: 6px 5px 6px 32px;font-family: Tahoma; font-size: 11px;}
.menu:hover {border-bottom: #6980B5 1px solid; border-top: #6980B5 1px solid; display: block; text-decoration: none; padding: 5px 5px 5px 32px; background-color: #302D53;}
.copy {color: #000; font-size :10px; position: absolute; bottom: 0; z-index: 3; padding: 30px 0 20px 50px;}
</style>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="bg_top">
<tr valign="top">
<td style="border: #F00 1px solid;">ШАПКАШАПКАШАПКА</td>
</tr>
<tr valign="top">
<td>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menum<br>enumenu</a>
<a class="menu menu1" href="">MENUMENUMENU</a>
<a class="menu menu1" href="">menumenumenu</a>
<a class="menu menu1" href="">MENUME<br>NUMENU</a>
</td>
</tr>
</table>
<div class="center-block" style="border: #0f0 1px solid;">
текст, много текста, очень очень много текста.
</div>
<div class="copy" style="border: #00f 1px solid">ООО Панорама-Юг. 2006<br>Все права защищены.<br>тел. 266-66-66, 255-55-55</div>
</body>
</html>
только слова "текст, много текста, очень очень много текста." нужно заменить на реально большое количество текста чтоб контент получился по высоте более высоты экрана, тогда будет наглядно
т.е. ты хочешь, что б логоти был всегда ниже контента, а не с боку?
Тогда ставь всем элиментам position:relative;
Тогда ставь всем элиментам position:relative;
вся страница по координате z должна быть ниже контента, так оно сейчас и есть...
но футер (copy) должен быть всегда прибит к низу страницы (а не к низу видимой части загруженной страницы!)
но сейчас это не получается...
у Вас аська есть? можете мне в онлайн режиме помочь? 284719415
но футер (copy) должен быть всегда прибит к низу страницы (а не к низу видимой части загруженной страницы!)
но сейчас это не получается...
у Вас аська есть? можете мне в онлайн режиме помочь? 284719415
Если я правильно понял твою задачу, то получи:
Я решал ее 5 минут :), вообще не стоит мешать мух и котлеты, т.е. мух в лице таблиц и котлеты в лице блоков.
Код:
Я решал ее 5 минут :), вообще не стоит мешать мух и котлеты, т.е. мух в лице таблиц и котлеты в лице блоков.
прошу прошения за аську, никак не могу законнектиться...
за height: 100% - спасибо
но вобщем этот вариант я продумывал.
он не подходит по двум причинам:
Во-первых, футер (copy) имеет бекграунд на всю ширину страницы
в данном случае вся ширина не получится из-за релетивного параметра и различных по единицам отсупов по бокам
и во-вторых, контент может быть очень коротким, но при этом футер должен быть все равно прибит к низу, что в данном случае не выполняется :(
за height: 100% - спасибо
но вобщем этот вариант я продумывал.
он не подходит по двум причинам:
Во-первых, футер (copy) имеет бекграунд на всю ширину страницы
в данном случае вся ширина не получится из-за релетивного параметра и различных по единицам отсупов по бокам
и во-вторых, контент может быть очень коротким, но при этом футер должен быть все равно прибит к низу, что в данном случае не выполняется :(
сделай для #all width:100%, а для текстового блока отступ слева и справа (margin, padding) слева 30%, ну, а футер будет занимать размер 100%. Такая идея, попробуй.
Если надо, что б размер был всегда 100%, то предется хитрить для осла и мозиллы, разные описания, и скрывать одно от другого.
Если надо, что б размер был всегда 100%, то предется хитрить для осла и мозиллы, разные описания, и скрывать одно от другого.
Спасибо! Но решил по-своему...
Меня наконец-то осенило! Могу показать, если у вас есть желание посмотреть.
Меня наконец-то осенило! Могу показать, если у вас есть желание посмотреть.
покажи, посмотрю.