Хочу вставить в шапку сайта картинку - не получается

Discussion in 'Изменение шаблона (кастомизация)' started by TIMON_1, Dec 7, 2011.

  1. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Хочу вставить в шапку сайта картинку
    Удалил в HTML-коде все что под <!-- HEADER -->
    и вставил туда <div id="header">

    в CSS-код вставил

    #header {
    background: #616161 url(images/header/proba.png) no-repeat center;
    height: 120px;

    В шапку встал только фон #616161, графики нет, если проверить по ссылке mysite/images/header/proba.png графика открывается

    1 - Здесь откуда-то белое пространство появилось после удаления старой шапки, она была размером в 60px похоже это ее след, но в коде я не нашел ни чего..
    2 - Здесь должна быть графика.......

    Помогите пожалуйста
     
    Last edited by a moderator: Mar 24, 2014
    TIMON_1, Dec 7, 2011
    #1

  2. Ads Master

     
  3. Offline

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

    Joined:
    Mar 13, 2010
    Messages:
    452
    Likes Received:
    18
    Gender:
    Female
    Re: Помогите с шапкой сайта

    Картинка вставляется при помощи:
    background-image: url('../images/header/proba.png');
     
    Airis, Dec 7, 2011
    #2
  4. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Re: Помогите с шапкой сайта

    Вставил в CSS

    #header {
    background-image: ur(images/header/proba.png) no-repeat center;
    height: 120px;
    }

    ничего не изменилось, кроме цвета фона
     
    TIMON_1, Dec 7, 2011
    #3
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Re: Помогите с шапкой сайта

    Пропиши прямо в блоке в шаблоне img,и посмотри результат.
     
    OlegK, Dec 7, 2011
    #4
  6. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Re: Помогите с шапкой сайта

    Напиши как правильно написать код, а то я в HTML и CSS не совсем хорошо соображаю как кажется )
    Сплошная абра кадабра выходит от моих опытов над шаблоном %)
     
    TIMON_1, Dec 8, 2011
    #5
  7. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Неужели все так сложно, что мне ни кто помочь не может..

    пробовал писать в HTML коде, но все так криво встало - картинка на половину перекрылась белым фоном и совсем не по центру
     
    TIMON_1, Dec 8, 2011
    #6
  8. Asylum
    Offline

    Asylum Местный => Cпециалист <=

    Joined:
    Feb 9, 2007
    Messages:
    2,744
    Likes Received:
    160
    Gender:
    Male
    Не видя шаблона тяжело сказать
     
    Asylum, Dec 8, 2011
    #7
  9. Offline

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

    Joined:
    Mar 13, 2010
    Messages:
    452
    Likes Received:
    18
    Gender:
    Female
    Так, как мы не видим не шаблона, ни его кода и вы по вашим словам "HTML и CSS не совсем хорошо соображаю" - лучшим решением для вас будет вернуть ваш шаблон в первоначальное состояние и просто заменить картинку шапки, которая изначально была в шаблоне на вашу.
     
    Airis, Dec 8, 2011
    #8
  10. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    <div id="header"><img src="images/header/proba.png" width="100%" alt="описание картинки"></div>
    Это при условии нахождения картинки в папке шаблона,в каталоге images в папке header
     
    OlegK, Dec 8, 2011
    #9
  11. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    СПАСИБО! картинка встала без косяков :)
    Остался еще один маленький вопросик, тег width="100% вставляет графику в ее 100% ширину
    но я делал ее специально размерами 1920х160, чтобы шапка корректно смотрелась в браузерах на разных расширениях мониторов, тег height: 120px делает ее нужной ширины, но тогда она не по центру
    Как отцентрировать? Советы из этой статьи http://www.umade.ru/log/2009/06/css-image-align-center/не помогли, может я не правильно в CSS что то делаю


    Выделил красным изменения
    Код (CODE):
    1. <?php
    2. /**
    3.  * @copyright   Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
    4.  * @license     GNU/GPL, see LICENSE.php
    5.  * Joomla! is free software. This version may have been modified pursuant
    6.  * to the GNU General Public License, and as distributed it includes or
    7.  * is derivative of works licensed under the GNU General Public License or
    8.  * other free or open source software licenses.
    9.  * See COPYRIGHT.php for copyright notices and details.
    10.  */
    11.  
    12. // no direct access
    13. defined( '_JEXEC' ) or die( 'Restricted access' );
    14.  
    15. include_once (dirname(__FILE__).DS.'/ja_vars.php');
    16.  
    17. ?>
    18.  
    19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    20.  
    21. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
    22.  
    23. <head>
    24. <jdoc:include type="head" />
    25. <?php JHTML::_('behavior.mootools'); ?>
    26.  
    27. <link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
    28. <link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
    29. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
    30.  
    31. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
    32.  
    33. <?php if ($tmpTools->getParam('rightCollapsible')): ?>
    34. <script language="javascript" type="text/javascript">
    35. var rightCollapseDefault='<?php echo $tmpTools->getParam('rightCollapseDefault'); ?>';
    36. var excludeModules='<?php echo $tmpTools->getParam('excludeModules'); ?>';
    37. </script>
    38. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.rightcol.js"></script>
    39. <?php endif; ?>
    40.  
    41. <?php  if($this->direction == 'rtl') : ?>
    42. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template_rtl.css" type="text/css" />
    43. <?php else : ?>
    44. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/menu.css" type="text/css" />
    45. <?php endif; ?>
    46.  
    47. <?php if ($this->countModules('hornav')): ?>
    48. <?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
    49. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    50. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
    51. <?php else: ?>
    52. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    53. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
    54. <?php endif; ?>
    55. <?php endif; ?>
    56.  
    57. <?php if ($tmpTools->getParam('theme_header') && $tmpTools->getParam('theme_header')!='-1') : ?>
    58. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/header/<?php echo $tmpTools->getParam('theme_header'); ?>/style.css" type="text/css" />
    59. <?php endif; ?>
    60. <?php if ($tmpTools->getParam('theme_background') && $tmpTools->getParam('theme_background')!='-1') : ?>
    61. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/background/<?php echo $tmpTools->getParam('theme_background'); ?>/style.css" type="text/css" />
    62. <?php endif; ?>
    63. <?php if ($tmpTools->getParam('theme_elements') && $tmpTools->getParam('theme_elements')!='-1') : ?>
    64. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/elements/<?php echo $tmpTools->getParam('theme_elements'); ?>/style.css" type="text/css" />
    65. <?php endif; ?>
    66.  
    67.  
    68. <!-- Пытаюсь установить соц закладки -->
    69. <script type="text/javascript" src="http://livehdd.ru/share42/share42.js"></script>
    70. <script type="text/javascript">share42('http://livehdd.ru/share42/','<?php function getLink() { return $this->link; } ?>','<?php function getTitle() { return $this->title; } ?>',350,200)</script>
    71.  
    72.  
    73. <!--[if IE 7.0]>
    74. <style type="text/css">
    75. .clearfix {display: inline-block;}
    76. </style>
    77. <![endif]-->
    78. <?php if ($tmpTools->isIE6()): ?>
    79. <!--[if lte IE 6]>
    80. <script type="text/javascript">
    81. var siteurl = '<?php echo $tmpTools->baseurl();?>';
    82.  
    83. window.addEvent ('load', makeTransBG);
    84. function makeTransBG() {
    85.     fixIEPNG($E('.ja-headermask'), '', '', 1);
    86.     fixIEPNG($E('h1.logo a'));
    87.     fixIEPNG($$('img'));
    88.     fixIEPNG ($$('#ja-mainnav ul.menu li ul'), '', 'scale', 0, 2);
    89. }
    90. </script>
    91. <style type="text/css">
    92. .ja-headermask, h1.logo a, #ja-cssmenu li ul { background-position: -1000px; }
    93. #ja-cssmenu li ul li, #ja-cssmenu li a { background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;}
    94. .clearfix {height: 1%;}
    95. </style>
    96. <![endif]-->
    97. <?php endif; ?>
    98.  
    99. <style type="text/css">
    100. #ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
    101. #ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
    102. </style>
    103. </head>
    104.  
    105. <script type="text/javascript" charset="utf-8">
    106. var proto = (document.location.protocol=='https:')?'https:':'http:';
    107. var host = proto+'//widget.copiny.com';
    108. document.write(unescape("%3Cscript src='" + '//livehdd.ru' + "/copi/static/js/widget.js' type='text/javascript'%3E%3C/script%3E"));
    109. </script>
    110.  
    111.  
    112. <body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
    113. <a name="Top" id="Top"></a>
    114. <ul class="accessibility">
    115.     <li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
    116.     <li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
    117.     <li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
    118.     <li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
    119. </ul>
    120.  
    121. <div id="ja-wrapper">
    122.  
    123. <!-- BEGIN: HEADER -->
    124. [B][COLOR="Red"]<div id="header">
    125. <div class="imgCenter">
    126. <<img src="images/header/proba.png" height: 120px" alt="Ремонт компьютеров ноутбуков моряковка">
    127. </div>
    128. </div>[/COLOR][/B]
    129. <!-- END: HEADER -->
    130.  
    131.  
    132.  
    133. <!-- Copini Отзывы -->
    134. <script type="text/javascript" charset="utf-8">
    135.         var copinyWidgetOptions = {
    136.     position: 'right',
    137.         hostcommunity:'http://livehdd.copiny.com',
    138.         newwindow: '0',
    139.         type: 'idea',
    140.     color:    '#ff8400',
    141.         border:   '#ffffff',
    142.     round:    '1',
    143.     title:    "\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0432\u043e\u0439 \u043e\u0442\u0437\u044b\u0432",
    144.         cache:   "49d00752531cbb639fe2e88e46e42ef9\/49d00752531cbb639fe2e88e46e42ef9\/ejOwVXUxULV0VXUxVLUwBJNGIBEnAzBpBBZxRhI31YYphUgDSVcwaakN48DVmoPZThClAA--",
    145.         community:3261
    146. };
    147. initCopinyWidget(copinyWidgetOptions);
    148. CopinyWidget.showTab();
    149. </script>
    150.  
    151.  
    152.  
    153.  
    154.  
    155. <!-- BEGIN: MAIN NAVIGATION -->
    156. <?php if ($this->countModules('hornav')): ?>
    157. <div id="ja-mainnavwrap">
    158.     <div id="ja-mainnav" class="clearfix">
    159.     <jdoc:include type="modules" name="hornav" />
    160.     </div>
    161. </div>
    162. <?php endif; ?>
    163. <!-- END: MAIN NAVIGATION -->
    164.  
    165. <div id="ja-containerwrap<?php echo $divid; ?>">
    166. <div id="ja-containerwrap2">
    167.     <div id="ja-container">
    168.     <div id="ja-container2" class="clearfix">
    169.  
    170.         <div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">
    171.  
    172.         <!-- BEGIN: CONTENT -->
    173.         <div id="ja-contentwrap">
    174.         <div id="ja-content">
    175.  
    176.             <jdoc:include type="message" />
    177.  
    178.             <?php if(!$tmpTools->isFrontPage()) : ?>
    179.             <div id="ja-pathway">
    180.                 <jdoc:include type="module" name="breadcrumbs" />
    181.             </div>
    182.             <?php endif ; ?>
    183.  
    184.             <jdoc:include type="component" />
    185.  
    186.             <?php if($this->countModules('banner')) : ?>
    187.             <div id="ja-banner">
    188.                 <jdoc:include type="modules" name="banner" />
    189.             </div>
    190.             <?php endif; ?>
    191.  
    192.         </div>
    193.         </div>
    194.         <!-- END: CONTENT -->
    195.  
    196.         <?php if ($this->countModules('left')): ?>
    197.         <!-- BEGIN: LEFT COLUMN -->
    198.         <div id="ja-col1">
    199.             <jdoc:include type="modules" name="left" style="xhtml" />
    200.         </div><br />
    201.         <!-- END: LEFT COLUMN -->
    202.         <?php endif; ?>
    203.  
    204.         </div>
    205.  
    206.         <?php if ($this->countModules('right')): ?>
    207.         <!-- BEGIN: RIGHT COLUMN -->
    208.         <div id="ja-col2">
    209.             <jdoc:include type="modules" name="right" style="jarounded" />
    210.         </div><br />
    211.         <!-- END: RIGHT COLUMN -->
    212.         <?php endif; ?>
    213.  
    214.     </div>
    215.     </div>
    216. </div>
    217. </div>
    218.  
    219. <?php
    220. $spotlight = array ('user1','user2','top','user5');
    221. $botsl = $tmpTools->calSpotlight ($spotlight,99,22);
    222. if( $botsl ) :
    223. ?>
    224. <!-- BEGIN: BOTTOM SPOTLIGHT -->
    225. <div id="ja-botslwrap">
    226.     <div id="ja-botsl" class="clearfix">
    227.  
    228.       <?php if( $this->countModules('user1') ): ?>
    229.       <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
    230.             <jdoc:include type="modules" name="user1" style="xhtml" />
    231.       </div>
    232.       <?php endif; ?>
    233.  
    234.       <?php if( $this->countModules('user2') ): ?>
    235.       <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
    236.             <jdoc:include type="modules" name="user2" style="xhtml" />
    237.       </div>
    238.       <?php endif; ?>
    239.  
    240.       <?php if( $this->countModules('top') ): ?>
    241.       <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
    242.             <jdoc:include type="modules" name="top" style="xhtml" />
    243.       </div>
    244.       <?php endif; ?>
    245.  
    246.       <?php if( $this->countModules('user5') ): ?>
    247.       <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
    248.             <jdoc:include type="modules" name="user5" style="xhtml" />
    249.       </div>
    250.       <?php endif; ?>
    251.  
    252.     </div>
    253. </div>
    254. <!-- END: BOTTOM SPOTLIGHT -->
    255. <?php endif; ?>
    256.  
    257. <!-- BEGIN: FOOTER -->
    258. <div id="ja-footerwrap">
    259. <div id="ja-footer" class="clearfix">
    260.  
    261.     <div id="ja-footnav">
    262.         <jdoc:include type="modules" name="user3" />
    263.     </div>
    264.  
    265.     <div class="copyright">
    266.         <jdoc:include type="modules" name="footer" />
    267.     </div>
    268.  
    269.     <div class="ja-cert">
    270.         <jdoc:include type="modules" name="syndicate" />
    271.     <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
    272.         <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
    273.         </a>
    274.         <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
    275.         <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
    276.         </a>
    277.     </div>
    278.  
    279.     <br />
    280. </div>
    281. </div>
    282. <!-- END: FOOTER -->
    283.  
    284. </div>
    285.  
    286. <jdoc:include type="modules" name="debug" />
    287.  
    288. </body>
    289.  
    290. </html>



    Код (CODE):
    1. /* HEADER
    2. --------------------------------------------------------- */
    3. [B][COLOR="Red"].imgCenter {text-align:center;}[/COLOR][/B]
    4.  
    5.  
    6. #ja-headerwrap {
    7.     background: #171717;
    8.     color: #CCCCCC;
    9.     line-height: normal;
    10.     height: 160px;
    11. }
    12.  
    13.  
    14. #ja-header {
    15.     position: relative;
    16.     height: 160px;
    17. }
    18.  
    19.  
    20.  
    21. h1.logo, h1.logo-text {
    22.     margin: 0 0 0 5px;
    23.     padding: 0;
    24.     font-size: 180%;
    25.     text-transform: uppercase;
    26. }
    27.  
    28.  
    29.  
    30.  
    31.  
    32.  
    33. h1.logo a span {
    34.     position: absolute;
    35.     top: -1000px;
    36. }
    37.  
    38. h1.logo-text a {
    39.     color: #CCCCCC !important;
    40.     text-decoration: none;
    41.     outline: none;
    42.     position: absolute;
    43.     bottom: 40px;
    44.     left: 5px;
    45. }
    46.  
    47. p.site-slogan {
    48.     margin: 0;
    49.     padding: 0;
    50.     padding: 2px 5px;
    51.     color: #FFFFFF;
    52.     background: #444444;
    53.     font-size: 92%;
    54.     position: absolute;
    55.     bottom: 20px;
    56.     left: 0;
    57. }
    58.  
    59. /* Search */
    60. #ja-search {
    61.     padding-left: 20px;
    62.     background: url(../images/icon-search.gif) no-repeat center left;
    63.     position: absolute;
    64.     bottom: 15px;
    65.     right: 0;
    66. }
    67.  
    68. #ja-search .inputbox {
    69.     width: 120px;
    70.     border: 1px solid #333333;
    71.     padding: 3px 5px;
    72.     color: #999999;
    73.     background: #444444;
    74.     font-size: 92%;
    75. }



    Первоначально в шаблоне была сложная шапка, которую я и хотел заменить на графику
    Код (CODE):
    1. <!-- BEGIN: HEADER -->
    2. <div id="ja-headerwrap">
    3.     <div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">
    4.  
    5.     <div class="ja-headermask">&nbsp;</div>
    6.  
    7.     <?php
    8.         $siteName = $tmpTools->sitename();
    9.         if ($tmpTools->getParam('logoType')=='image'): ?>
    10.         <h1 class="logo">
    11.             <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    12.         </h1>
    13.     <?php else:
    14.         $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    15.         $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');  ?>
    16.         <h1 class="logo-text">
    17.             <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    18.         </h1>
    19.         <p class="site-slogan"><?php echo $sloganText;?></p>
    20.     <?php endif; ?>
    21.  
    22.     <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
    23.  
    24.     <?php if($this->countModules('user4')) : ?>
    25.         <div id="ja-search">
    26.             <jdoc:include type="modules" name="user4" />
    27.         </div>
    28.     <?php endif; ?>
    29.  
    30.     </div>
    31. </div>
    32. <!-- END: HEADER -->
     
    Last edited: Dec 9, 2011
    TIMON_1, Dec 9, 2011
    #10
  12. Offline

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

    Joined:
    Mar 13, 2010
    Messages:
    452
    Likes Received:
    18
    Gender:
    Female
    Пропишите строчку:
    margin: 0 auto;
    перед:
    position: relative;
     
    Airis, Dec 9, 2011
    #11
  13. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Airis, не изменилось
    При прокрутке вправо все выглядит так
    скрин
     
    TIMON_1, Dec 9, 2011
    #12
  14. Offline

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

    Joined:
    Mar 13, 2010
    Messages:
    452
    Likes Received:
    18
    Gender:
    Female
    Тогда более сложный вариант. В css:
    Код (css):
    1. div.header
    2. {
    3.   margin: 0 auto;
    4.   position: relative;
    5.   width: 100%;
    6.   height: высота шапки px;  - px пишите слито с цифрой
    7.   overflow: hidden;
    8. }
    9. div.header-center
    10. {
    11.     position: relative;
    12.     width: ширина вашей шапки px;
    13.     left:50%;
    14. }
    15.  
    16. div.header-jpeg
    17. {
    18.   position: absolute;
    19.   top: 0;
    20.   left:-50%;
    21.   width: 972px;
    22.   height: 50px;
    23.   background-image: url('../images/header.jpg');
    24.   background-repeat: no-repeat;
    25.   background-position: center center;
    26. }



    В index.php:

    Код (html):
    1. <div class="header">
    2.     <div class="header-center">
    3.      <div class="my-header-jpeg"></div>
    4.         </div>
    5. </div>
     
    Last edited by a moderator: Dec 11, 2014
    Airis, Dec 9, 2011
    #13
  15. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Так и регулировать шириной блока <div id="header">
     
    OlegK, Dec 9, 2011
    #14
  16. Offline

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

    Joined:
    Nov 15, 2011
    Messages:
    11
    Likes Received:
    0
    Gender:
    Male
    Тогда изображение не по центру..


    Airis,

    Код (CODE):
    1. /* HEADER
    2. --------------------------------------------------------- */
    3.  
    4. div.header
    5. {
    6. margin: 0 auto;
    7. position: relative;
    8. width: 100%;
    9. height: 160px;
    10. overflow: hidden;
    11. }
    12. div.header-center
    13. {
    14. position: relative;
    15. width: 600px;
    16. left:50%;
    17. }
    18.  
    19. div.header-jpeg
    20. {
    21. position: absolute;
    22. top: 0;
    23. left:-50%;
    24. width: 600px;
    25. height: 160px;
    26. background-image: url('images/header/proba.jpeg');
    27. background-repeat: no-repeat;
    28. background-position: center;
    29. }


    Код (CODE):
    1. <!-- BEGIN: HEADER -->
    2. <div class="header">
    3. <div class="header-center">
    4. <div class="my-header-jpeg">
    5. </div>
    6. </div>
    7. </div>
    8. <!-- END: HEADER -->


    Теперь пустое пространство вверху в 120px...
    По ссылке mysite/images/header/proba.jpeg изображение доступно (Я конвертировал из .png в .jpg)
     
    Last edited: Dec 14, 2011
    TIMON_1, Dec 14, 2011
    #15
  17. Offline

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

    Joined:
    Mar 13, 2010
    Messages:
    452
    Likes Received:
    18
    Gender:
    Female
    Ну тогда вместо строчки: <div class="my-header-jpeg">
    пропишите путь к изображению, как делали раньше.
     
    Last edited: Dec 14, 2011
    Airis, Dec 14, 2011
    #16
< Полноценная установка шаблона от YOOtheme на 1.7.х | шаблон jv news как убрать буквы на слайдере >

Share This Page

Loading...