Joomla 1.6 Блоки в шаблоне, проблема с css

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

  1. Offline

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

    Регистрация:
    27.04.2011
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Доброго времени суток, уважаемые форумчане!
    Помогите пожалуйста чайнику в реализации идеи!
    Задумал перевести сайт на джумлу 1.6. соответственно шаблон пытаюсь нарисовать сам с нуля.
    Макет шаблона во вложении.
    Основной блок (page) шириной 1024px, высотой по размеру экрана.
    Логотип располагается вверху, ширина 1024px, высота 185px.
    Далее под логотипом слева идет левый блок (left), он должен "растягиваться" от логотипа, до нижнего блока.
    Правее два блока навигация и поиск.
    Под ними контент со статьями, с полосой прокрутки.
    В самом низу нижний блок (bottom), шириной основного блока (1024), высотой 25 пикселей, он должен быть "привязан" к нижнему краю браузера постояннно.
    Никак не получается стилями задать позиции блоков (модулей), то контент съедет под левый блок, то нижний блок оказывается сверху контента.
    Вот кусок кода из index.php
    Код (PHP):
    1. <body>
    2. <div id="page">
    3.   <div id="logo"><jdoc:include type="modules" name="logo" style="xhtml" /></div>
    4.   <div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
    5.   <div id="breadcrumbs"><jdoc:include type="modules" name="breadcrumbs" style="xhtml" /></div>
    6.   <div id="search"><jdoc:include type="modules" name="search" style="xhtml" /></div>
    7.   <div id="content"><jdoc:include type="component" style="xhtml" /></div>
    8.   <div id="bottom"><jdoc:include type="modules" name="bottom" style="xhtml" /></div>
    9. </div>
    10. </body>

    Как я понимаю, здесь все должно быть правильно. :)
    А вот со стилем какая то беда:
    Код (PHP):
    1. * {
    2. margin:0;
    3. padding:0;
    4. }
    5. body {
    6. background-color: #eeeeee;
    7.  margin:0 auto;
    8.   padding:0;
    9.   text-align:center;
    10.   font-size:14px;
    11.   font-family:Arial, Helvetica, sans-serif ;
    12.   line-height:1.3;
    13.   color:#000;
    14. }
    15.  
    16. #page {
    17. width:1024px;
    18. height:100%;
    19. margin:auto;
    20. background-color:#eee;
    21. border:none;
    22. }
    23.  
    24. #logo {
    25. overflow:hidden;
    26. height:185px;
    27. background:url('../images/logo.jpg') no-repeat;
    28. border:none;
    29. }
    30.  
    31. #left {
    32. float:left;
    33. background-color: #eee;
    34. width:235px;
    35. }
    36.  
    37. #breadcrumbs {
    38. float:left;
    39. height:30px;
    40. background-color: #fff;
    41. }
    42. .moduletablenav {
    43. font:12px Arial, Helvetica, sans-serif ;
    44. color:#363636;
    45. padding-left:10px;
    46. }
    47.  
    48. #search {
    49. float:left;
    50. background-color: #fff;
    51. height:30px;
    52. }
    53.  
    54. #content {
    55. float:left;
    56. width:789px;
    57. height:600px;
    58. background-color:#fff
    59. overflow:auto;
    60.  
    61. .component {
    62. background-color:#fff;
    63. }
    64.  
    65. #bottom {
    66. position:absolute;
    67. bottom:0px;
    68. overflow:hidden;
    69. width:1024px;
    70. background-color:#eee;
    71. }


    Никак не могу понять свою ошибку, где неправильно написал или не написал нужное.
    Да, и почему-то контент, поиск и навигация выводит не на белом фоне (как в стиле прописано), а берет основной цвет фона (серый)
    Помогите плз, очень уж хочется побыстрей запустить проект.
     

    Вложения:

    • 1.gif
      1.gif
      Размер файла:
      73.7 КБ
      Просмотров:
      3
  2.  

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

Загрузка...