Mister Y
-
Posts
6 -
Joined
-
Last visited
Mister Y's Achievements
Explorer (1/14)
0
Reputation
-
Ещё вариант. Только в IE < 8 неправильно отображается. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="allow-search" content="yes" /> <title>Test</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <style> * { margin: 0; padding:0; } html, body { height: 100%; } body { position: relative; background-color: white; color: black; } .maincenter { margin: 0 auto; width: 200px; position: relative; height: 100%; min-height: 200px; } .td100 { height: 100px; width: 0; } .td200 { height: 200px; width: 200px; background-color: yellow; vertical-align: top; } .td0_1 { height: auto; width: 100px; background-color: pink; vertical-align: top; } .td0_2 { height: auto; width: 100px; background-color: blue; vertical-align: top; } .islogo { height: 100%; width: 200px; background-color: white; } </style> </head> <body> <div class="maincenter"> <table class="islogo" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="td0_1" colspan="2" rowspan="1">Some text</td> </tr> <tr> <td class="td200" colspan="1" rowspan="2">Some Text</td> <td class="td100" colspan="1" rowspan="1"></td> </tr> <tr> <td class="td100" colspan="1" rowspan="1"></td> </tr> <tr> <td class="td0_2" colspan="2" rowspan="1">Some Text</td> </tr> </table> </div> </body> </html>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="allow-search" content="yes" /> <link rel="StyleSheet" type="text/css" href="./styles/style.css" /> <title>ПЫЩ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <style> body, html { background-color: silver; height: 100%; margin: 0; padding: 0; } .maincenter { margin: 0 auto; width: 200px; position: relative; height: 100%; background-color: pink; } .notlogo { top: 50%; margin-top: -100px; height: 200px; width: 200px; position: absolute; background-color: yellow; } .islogo { height: 50%; position: absolute; width: 200px; margin-top: -100px; padding-top: 100px; background-color: white; } </style> </head> <body> <div class="maincenter"> <div class="islogo">Some text</div> <div class="notlogo">Text again</div> </div> </body> </html> Нижний div я описывать не стал. Оказалось, что он мне не нужен. Однако, он получился как бы автоматически... Полный копи-паст позволит запустить страничку. upd. Ой. Недописал чуток. Джаст э минэт. upd. Исправил. upd. С нижним div'ом метод тот же. Если не получается, можно z-index заюзать.
-
Упрощу задачу: футер не нужен. Но высота шапки высчитывается по той же формуле. upd. Таблицу-то можно, конечно. Но проблема та же. Видать придётся яваскрипт писать. Просто я хотел получить ответ на случай отключенного яваскрипта. upd. Всё. Придумал. Всем спасибо за внимание.
-
Надо описать расположение 3х div'ов. Один точно по центру страницы. Два других - над и под ним. Притом тот, что по центру, имеет фиксированную ширину и высоту. А два других - только фиксированную ширину, но высоту такую, чтобы края упирались аккурат под верхнюю и нижнюю границы окна браузера. По-другому объяснить, наверное, не получится... Лично мне наиболее понятно объяснение в виде формулы, что я привёл в первом посте.
-
Я думал, что формулой всё достаточно понятно выразил, но всё же нарисовал. 1. Страничка как она есть. Разрешение окна браузера = 500x500. Видны все три div'а. 2. Уменьшается ширина окна браузера до 100. Высота до сих пор 500. Видны все 3 div'а. Появилась полоса прокрутки в ширину. 3. Разрешение окна браузера меняется до 200x200. Виден только контент. 4. Уменьшается высота окна браузера до 100. Ширина - 500. Виден только контент. Появилась полоса прокрутки в высоту.
-
Всем доброго времени суток! Хочется взять револьвер и вышибить себе мозги. Казалось бы задача простая, но то ли меня клинит, то ли неверно создана иллюзия простоты этой задачи. Условие: Есть 3 div'а. Назовём их условно: шапка, контент, футер (по логике их расположения на странице). Все они имеют фиксированную ширину 200px. Располагаются соприкасаясь друг по другом, позиционируются на странице по центру. Получается эдакий столбик. Контент имеет высоту 200px, располагается в этом столбике точно посередине. А теперь приведу абстрактную формулу, высчитывающую высоты шапки и футера (которые одинаковы) и дающую представление цели задачи. H = (max (100%, 200px) - 200px) / 2 Как реализовать такую схему в CSS? Пожалуйста, помогите.