Joomla 1.6 Не могу разобраться с CSS шаблона

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by DenisV, Nov 16, 2011.

  1. Offline

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

    Joined:
    Nov 16, 2011
    Messages:
    1
    Likes Received:
    0
    Gender:
    Male
    Добрый день.

    Хотел бы спросить знающих как сделать чтобы получить такую структуру дивов.

    Нужно чтобы info-head был в самом верху. Элементы внутри этого дива позиционированы относительно.
    На info-head нужно наложить со смещением вверх main body.
    Фон main-body должен растягиваться по высоте относительно дочерних элементов.
    А сразу после Main-body должен идти footer
    Должно выглядеть вот так:
    [​IMG]

    Вот код index.php с дивами:
    Код (CODE):
    1. <?php
    2.   /**
    3. * @copyrightCopyright (C) 2011
    4. * @licenseGPL
    5. */
    6. defined('_JEXEC') or die;
    7. $app = JFactory::getApplication();
    8. $logo = $this->params->get('logo');
    9. ?>
    10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    11. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    12. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    13. <head>
    14. <jdoc:include type="head" />
    15. <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
    16. <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
    17. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    18.  
    19. <?php
    20.   if($this->countModules('content') == 0) $contentwidth = "100";
    21.   ?>
    22. </head>
    23. <body>
    24.   <div class="all">
    25.     <div class="info-head">
    26.       <div class="sport"><jdoc:include type="modules"  name="sport" /></div>
    27.       <div class="history"><jdoc:include type="modules"  name="history" /></div>
    28.       <div class="fly"><jdoc:include type="modules"  name="fly" /></div>
    29.       <div class="art"><jdoc:include type="modules"  name="art" /></div>
    30.       <div class="darts"><jdoc:include type="modules"  name="darts" /></div>
    31.     </div>
    32.     <div class="main-body">
    33.       <div class="menu">
    34.             <div class="menu11"><jdoc:include type="modules"  name="menu11" /></div>
    35.             <div class="menu12"><jdoc:include type="modules"  name="menu12" /></div>
    36.             <div class="logo"></div>
    37.       </div>
    38.       
    39.       <div class="main-back">
    40.            <div class="left"><jdoc:include type="modules"  name="left" /></div>
    41.            <div class="right">
    42.                    <div class="spor"><jdoc:include type="modules"  name="spor" /></div>
    43.                    <div class="cont">
    44.                    <div class="content<?php echo $contentwidth; ?>">
    45.                       <jdoc:include type="modules"  name="content" />
    46.                       <jdoc:include type="component" />
    47.                     </div>
    48.                     <div class="banner"><jdoc:include type="modules"  name="banner" /></div>
    49.                     </div>
    50.   
    51.            </div>
    52.                       <?php if($this->countModules('caps')) : ?>
    53.                       <div class="caps"><jdoc:include type="modules"  name="caps" /></div><?php endif; ?>
    54.       </div>
    55.     
    56.     </div>
    57.               <div class="footer">
    58.                     <div class="menu21"><jdoc:include type="modules"  name="menu21" /></div>
    59.                     <div class="menu22"><jdoc:include type="modules"  name="menu22" /></div>
    60.                     <div class="info"><jdoc:include type="modules"  name="info" /></div>
    61.               </div>    
    62.   
    63.     </div>
    64.  
    65. </body>



    и css:
    Код (CODE):
    1. * {
    2.   margin: 0;
    3.   paddng: 0;
    4.  
    5.  
    6. }
    7. .all{
    8. width:1010px;
    9. margin: 0 auto;
    10. background-color:#000;
    11.  
    12. }
    13. .info-head{
    14. width:1010px;
    15. height:450px;
    16. background: url(images/info-head.jpg)
    17. }
    18. .sport{
    19. position:relative;
    20. width:134px;
    21. height:170px;
    22. top:127px;
    23. float:left;
    24. background: url(images/box.jpg);
    25. }
    26. .history{
    27. position:relative;
    28. width:115px;
    29. height:125px;
    30. top:43px;
    31. left: -4px;
    32. float:left;
    33. background:url(images/history.jpg);
    34.  
    35. }
    36. .fly{
    37. position:relative;
    38. float:left;
    39. top:43px;
    40. width:195px;
    41. height:125px;
    42. background:url(images/fly.jpg);
    43. }
    44. .art{
    45. z-index:1;
    46. float:left;
    47. position: relative;
    48. top:42px;
    49. left:151px;
    50. width:255px;
    51. height:125px;
    52. background:url(images/art.jpg);
    53. }
    54. .darts{
    55. float:right;
    56. position:relative;
    57. top:122px;
    58. left:-7px;
    59. width:220px;
    60. height:222px;
    61. background:url(images/darts.jpg);
    62. }
    63. .main-body{
    64. z-index:3;
    65. position:absolute;
    66. width:735px;
    67. height:100%;
    68. top:;
    69. margin:-277px 120px;
    70.  
    71.  
    72. }
    73. .menu{
    74. width:735px;
    75. height:40px;
    76. background:url(images/menu.jpg) no-repeat;}
    77. .menu11{
    78.   font: 12px Helvetica, sans-serif;
    79.   height:40px;
    80.   line-height:40px;
    81.   width:100%;
    82.   overflow:hidden;
    83.   margin:0px;
    84.   padding:0px;
    85.   }
    86.   .menu11 li {
    87.   list-style-type:none;
    88.   float:left;
    89.   padding-left:5px;
    90.   }
    91.   .menu11 a {
    92.   height:40px;
    93.   display:block;
    94.   padding-right: 15px;
    95.   text-decoration: none;
    96.   color:black;
    97.   }
    98. .menu11 a:hover{color: white;
    99.   }
    100.  
    101. .menu12{
    102. }
    103. .logo{
    104. position:absolute;
    105. width:237px;
    106. height:130px;
    107.  
    108. left:234px;
    109. background:url(images/logo.png);
    110.  
    111. }
    112. .main-back{
    113. position:relative;
    114. overflow:hidden; height:1000px;
    115. margin-top: 5px;
    116. width:735px;
    117. background:url(images/mainback.jpg)  no-repeat;
    118.  
    119. }
    120. .left{
    121. font-size:12px;line-height:18px;
    122. color:white;
    123. font:10px;
    124. position:relative;
    125. left:20px;
    126. right:10px;
    127. top:100px;
    128. padding:5px;
    129. float:left;
    130. width:200px;
    131.  
    132. background:rgba(0,0,0,0.6);
    133. -moz-border-radius: 5px; /* Для Firefox 3 */
    134.     -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    135.     border-radius: 5px; /* Для современных браузеров */
    136. }
    137. .right{
    138. float:left;
    139. width:520px;
    140. }
    141. .spor{
    142. font-size:12px;line-height:18px;
    143. color:white;
    144. font:10px;
    145. position:relative;
    146. top:30px;
    147. right:20px;
    148. float:right;
    149. width:300px;
    150. background:rgba(0,0,0,0.6);
    151. -moz-border-radius: 5px; /* Для Firefox 3 */
    152.     -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    153.     border-radius: 5px; /* Для современных браузеров */
    154. }
    155. .custom a:link {color:white; text-decoration:none;}
    156. .spor a:hover {color:red; text-decoration:none;}
    157. .spot a:visited{color:white;}
    158. .cont{
    159. float:left;
    160.  
    161. }
    162. .content{
    163. font-size:12px;line-height:18px;
    164. color:white;
    165. font:10px;
    166. position:relative;
    167. top: 40px;
    168. left:30px;
    169. float:left;
    170. width:355px;
    171. padding: 10px;
    172. background:rgba(0,0,0,0.6);
    173. -moz-border-radius: 5px; /* Для Firefox 3 */
    174.     -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    175.     border-radius: 5px; /* Для современных браузеров */
    176. }
    177. .content100{
    178. font-size:12px;line-height:18px;
    179. color:white;
    180. font:10px;
    181. position:relative;
    182. top: 40px;
    183. left:30px;
    184. float:left;
    185. width:460px;
    186. padding: 10px;
    187. background:rgba(0,0,0,0.6);
    188. -moz-border-radius: 5px; /* Для Firefox 3 */
    189.     -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    190.     border-radius: 5px; /* Для современных браузеров */
    191. }
    192. .banner{
    193. width:370px;
    194. }
    195. .caps{
    196. position:relative;
    197. padding-top: 70px;
    198. padding-left:50px;
    199. top:30px;
    200. left:20px;
    201. float:left;
    202. width:700px;
    203. background:url(images/beermenu.png) 0 0 no-repeat;}
    204. .caps a:hover{
    205. opacity: 0.8;}
    206.  
    207. }
    208. .footer{
    209.  
    210. width:1010px;
    211. height:167px;
    212. background:url(images/footer.png);
    213. }
    214. .menu21{
    215. width:140px;
    216. }
    217. .menu22{
    218. width:140px;
    219. }
    220. .info{
    221. position:relative;
    222. left:320px;
    223. width:450px;
    224. padding: 10px;
    225. font-size:12px;line-height:15px;
    226. color:white;
    227. font:10px;
     
    DenisV, Nov 16, 2011
    #1

  2. Ads Master

     
< Вставить эмблему и слайдшоу в шапку. | как правильно подключить css? >

Share This Page

Loading...