Резиновый шаблон из 3-ёх div - ов

Тема в разделе "Создание шаблона", создана пользователем volchara, 10.06.2008.

  1. Offline

    volchara Недавно здесь

    Регистрация:
    04.06.2008
    Сообщения:
    39
    Симпатии:
    1
    Пол:
    Мужской
    Кто нить знает как можно разместить на HTML странице всего три DIV-а ... один слева, другой сверху, трейтий что-б занимал оставшееся место по центру, и все они втроём занимали одну страницу браузера

    т.е. у левого:
    width: 200px;
    height: 100%;
    у верхнего:
    width:100%; (минус 200рх от левого конечно)
    height:200px;
    у центрального:
    width:100%; (минус 200рх от левого)
    height: 100%; (минус 200рх от верхнего)

    сростается всё только с левым DIV - ом, остальные размещаются как угодно но только не согластно здравому смыслу !!
     
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Резиновый шаблон из 3-ёх div - ов

    Значит у вас не здравый смысл, здравый вот:
    PHP:
    Код (CODE):
    1. <div id="left">1<div id="top">2<div id="right">3</div></div></div>

    CSS:
    Код (CODE):
    1. #top{
    2. left:200px;
    3. right:0px;
    4. height:200px;
    5. background:#000000;
    6. }
    7. #left{
    8. width:200px;
    9. height:300px; /* высоту можно выставлять только в пикселях, а не процентах, либо вообще не выставлять и колонка вынятется под длину контента автоматически*/
    10. }
    11. #right{
    12. position:absolute;
    13. top:200px;
    14. }
     
  4. Offline

    volchara Недавно здесь

    Регистрация:
    04.06.2008
    Сообщения:
    39
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Резиновый шаблон из 3-ёх div - ов

    :)
    Что делать если хочется немного больше чем возможно

    Ну на самом деле высота выставляется и в процентах, и даже в случае одного дива замечательно работает

    На счёт примера, о вложенных друг в дружку тегов DIV мысль в мою голову не приходила, попробую может чего и выгорит.
    А в общем немного не то, мне нужно чтобы содержимое скролировалось внутри центрального DIV - а, а не окна браузера, иначе верхний и левый DIV уедут со страницы, чего в общем то не хотелось - бы
     
  5. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    Ответ: Резиновый шаблон из 3-ёх div - ов

    добавить с CSS для этого дива атрибут overflow:scroll;
     
  6. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Резиновый шаблон из 3-ёх div - ов

    volchara, проценты поймет? Кроссбраузерно?))
    Ну дык надо внятнее объяснять что надобно)
     
  7. Offline

    volchara Недавно здесь

    Регистрация:
    04.06.2008
    Сообщения:
    39
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Резиновый шаблон из 3-ёх div - ов

    Ну IE, Opera, Mozila Firefox понимают, а больше в моём случае и не нужно, с начала только
    для BODY 100% выставить, и не вопрос

    Только всё равно ничего не вытанцовывается, из-за того что неважно куда DIV поместить,
    он берёт 100% не от элемента в котором находится , а окна браузера :( при чём не для самого
    себя, а для области внутри себя за вычетом бордюра и отступа

    Добавлено через 23 часа 49 минут
    Получилось, правда полностью только в IE. В Opera и Mozilla работает только по ширине страницы,
    относительная высота не срабатывает, но в общем не сильно страшно, страница не уродуется ...

    Кому интересно выглядит примерно так:

    Код (html):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Untitled Document</title>
    6.  
    7. <style type="text/css">
    8. <!--
    9. body {
    10.     height: 100%;
    11.     width: 100%;
    12.     margin: 0px;
    13.     padding: 0px;
    14.     border: 0px;
    15. }
    16. #left_frame {
    17.     position:absolute;
    18.     margin: 0px;
    19.     width: 200px;
    20.     height: expression((window.document.body.clientHeight - 4) + "px");
    21.     border: 1px solid #FF00CC;
    22.     overflow: auto;
    23.     top:  0px;
    24.     left: 0px;
    25. }
    26. #top_frame {
    27.     position:absolute;
    28.     margin: 0px;
    29.     width: expression((window.document.body.clientWidth - 204) + "px");
    30.     height:200px;
    31.     border: 1px solid #FF00CC;
    32.     overflow: hidden;
    33.     top:  0px;
    34.     left: 200px;
    35. }
    36. #main_frame {
    37.     position:absolute;
    38.     width: expression((window.document.body.clientWidth - 204) + "px");
    39.     height: expression((window.document.body.clientHeight - 204) + "px");
    40.     border: 1px solid #FF00CC;
    41.     top: 200px;
    42.     left: 200px;
    43.     overflow: auto;
    44. }
    45. -->
    46. </style>
    47.  
    48. </head>
    49.  
    50.  
    51. <body>
    52.   <div id="left_frame">
    53.   </div>
    54.   <div id="top_frame">
    55.   </div>
    56.   <div id="main_frame">
    57.   </div>
    58. </body>
    59. </html>
     
    Последнее редактирование: 12.06.2008
  8. Offline

    griboff Недавно здесь

    Регистрация:
    17.12.2009
    Сообщения:
    6
    Симпатии:
    0
    Пол:
    Мужской
    Подскажите пожалуйста как сделать шаблон резиновым с помощью CSS и контейнеров div, но чтоб фоновый рисунок при растяжении некопировался, а растягивался?
     

Поделиться этой страницей

Загрузка...