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

Discussion in 'Создание шаблона' started by SkyLine, Apr 27, 2011.

  1. Offline

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

    Joined:
    Apr 27, 2011
    Messages:
    1
    Likes Received:
    0
    Gender:
    Male
    Доброго времени суток, уважаемые форумчане!
    Помогите пожалуйста чайнику в реализации идеи!
    Задумал перевести сайт на джумлу 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. }


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

    Attached Files:

    • 1.gif
      1.gif
      File size:
      73.7 KB
      Views:
      3
  2.  

Share This Page

Loading...