Решено! Резиновая шапка сайта

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем John1992on, 29.06.2010.

  1. Offline

    John1992on Гость

    И так есть сайт(http://www.contra.org.ua), нужно сделать невозможное:) : чтоб шапка изменяла свое расширение, в месте с сайтом(когда например изменяем расширение окна браузера\монитора), чего уже не делал, не могу никак с этим справится(сайт резиновый, а шапка -нет:'()..
    вот собственоо код css:
    Код (CODE):
    1. /* begin Header */
    2. div.art-header
    3. {
    4.   position: relative;
    5.   width: 90%;
    6.   height: 250px;
    7. }
    8.  
    9. .art-header div.art-header-jpeg
    10. {
    11.   position: absolute;
    12.   z-index: 100;
    13.   top: 0;
    14.   left: 0;
    15.   width: 1280px;
    16.   height: 250px;
    17.   background-image: url('../images/header.jpg');
    18.   background-repeat: no-repeat;
    19.   background-position: center center;
    20. }
    21.  
    22. /* end Header */

    вот из index.php:
    Код (CODE):
    1. <?php
    2. defined('_JEXEC') or die('Restricted access'); // no direct access
    3. require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
    4. $document = null;
    5. if (isset($this))
    6.   $document = & $this;
    7. $baseUrl = $this->baseurl;
    8. $templateUrl = $this->baseurl . '/templates/' . $this->template;
    9. artxComponentWrapper($document);
    10. ?>
    11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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.  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    15.  <jdoc:include type="head" />
    16.  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
    17.  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
    18.  <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
    19.  <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
    20.  <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
    21.  <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
    22. </head>
    23. <body>
    24. <div id="art-page-background-simple-gradient">
    25.     <div id="art-page-background-gradient"></div>
    26. </div>
    27. <div id="art-main">
    28. <div class="art-sheet">
    29.     <div class="art-sheet-cc"></div>
    30.     <div class="art-sheet-body">
    31. <div class="art-header">
    32.     <div class="art-header-jpeg"></div>
    33. </div>
    34. <jdoc:include type="modules" name="user3" />
    35. <jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
    36. <?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>
    37. <div class="art-content-layout">
    38.     <div class="art-content-layout-row">
    39. <div class="art-layout-cell art-<?php echo artxCountModules($document, 'right') ? 'content' : 'content-wide'; ?>">
    40.  
    41. <?php
    42.   echo artxModules($document, 'banner2', 'art-nostyle');
    43.   if (artxCountModules($document, 'breadcrumb'))
    44.     echo artxPost(null, artxModules($document, 'breadcrumb'));
    45.   echo artxPositions($document, array('user1', 'user2'), 'art-article');
    46.   echo artxModules($document, 'banner3', 'art-nostyle');
    47. ?>
    48. <?php if (artxHasMessages()) : ?><div class="art-post">
    49.     <div class="art-post-body">
    50. <div class="art-post-inner">
    51. <div class="art-postcontent">
    52.     <!-- article-content -->
    53.  
    54. <jdoc:include type="message" />
    55.  
    56.     <!-- /article-content -->
    57. </div>
    58. <div class="cleared"></div>
    59.  
    60. </div>
    61.  
    62.         <div class="cleared"></div>
    63.     </div>
    64. </div>
    65. <?php endif; ?>
    66. <jdoc:include type="component" />
    67. <?php echo artxModules($document, 'banner4', 'art-nostyle'); ?>
    68. <?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>
    69. <?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>
    70. </div>
    71. <?php if (artxCountModules($document, 'right')) : ?>
    72. <div class="art-layout-cell art-sidebar1"><?php echo artxModules($document, 'right', 'art-block'); ?>
    73. </div>
    74. <?php endif; ?>
    75.  
    76.     </div>
    77. </div>
    78. <div class="cleared"></div>
    79.  
    80. <?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>
    81. <jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />
    82. <div class="art-footer">
    83.  <div class="art-footer-inner">
    84.   <?php echo artxModules($document, 'syndicate'); ?>
    85.   <div class="art-footer-text">
    86.   <?php if (artxCountModules($document, 'copyright') == 0): ?>
    87. <p>Contra Modification &copy; 2010.<br />
    88. All Rights Reserved.</p>
    89.  
    90.   <?php else: ?>
    91.   <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>
    92.   <?php endif; ?>
    93.   </div>
    94.  </div>
    95.  <div class="art-footer-background"></div>
    96. </div>
    97.  
    98.         <div class="cleared"></div>
    99.     </div>
    100. </div>
    101. <div class="cleared"></div>
    102. <p class="art-page-footer"></p>
    103.  
    104. </div>
    105.  
    106. </body>
    107. </html>

    Прошу помочь разобратся, так как етот вопрос ставит меня в ступор(перерил, много форумов, кается делаю все правильно но никак не получается)...., если нужно больше CSS смотри ссилку вверху..
     
  2.  
  3. Kadavr
    Offline

    Kadavr Недавно здесь => Cпециалист <=

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    О какой резине может идти речь, если в стилях дива хедера у вас четко прописано: width: 1280px; height: 250px;
    Ставьте ширину не в пикселях, а в процентах.
     
  4. Offline

    John1992on Гость

    Kadavr, ставил в 2-х - не помогло, но по моему не 2-ух хидерах нужно % ставить?
     
  5. Kadavr
    Offline

    Kadavr Недавно здесь => Cпециалист <=

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    Не понял.. У вас что, 2 шапки в сайте?
     
  6. Offline

    John1992on Гость

    Нет, просто шаблон делался, програмой Artisteer 2.4, с полдующим ручным редактированием, вот в нём и было:
    Код (PHP):
    1. <div class="art-header">
    2.     <div class="art-header-jpeg"></div>
    3. </div>

    я убирал:
    Код (PHP):
    1. <div class="art-header-jpeg"></div>

    после чего в CSS для art-header_а указывал width:100%; height: 250px; , но оно по прежнему не растягивалось на всю ширину.., вот в том то и проблема....
     
  7. Offline

    botanist Активист => Cпециалист <=

    Регистрация:
    15.02.2009
    Сообщения:
    461
    Симпатии:
    49
    Пол:
    Мужской
    Верстальщики говорят, что редактирование шаблона от Artisteer по трудозатратам сопоставимо с версткой нового по тому же макету.
     
  8. Offline

    John1992on Гость

    Где ты выдел такие разгаворы, ссилку давай, или оно тебе лично это говорили? Во первых буть у меня опыт\знания CSS верстки, я б скорее всего и не делал в Artisteer _е, НО и трудозатрат особых я не вижу..., я практически прочитав 1-2 самоучителя\справочника по CSS сделал все что мне было нужно.., и принципиально знаю как решить и ето, но по причинам мне не известным, мой метод не работает.....
    П.С. так что не отвлекаемся от темы, а питаемся найти решение....
     
  9. DKraev
    Offline

    DKraev <i>(aka gft)</i> => Cпециалист <=

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    219
    Пол:
    Мужской
    Оффтопик (не в тему) - жми сюда!


    А если по теме, то нужно сделать так. Тебе нужно задать background в виде картинки для diva шапки. Так чтобы он сливался с краями твоей картинки (которая стоит сейчас). А саму картинку поместить по центру.

    Это если примитивно. А для более качественной реализации без изучения CSS не обойтись. Дерзай!
     
  10. Offline

    John1992on Гость

    Мутно както, дай пример кода что именно ти имееш ввиду?
    в div шапки я конешно могу задать ищо бегграунд, но зачем мне 2 не ррезиновых бегграунда...,
    начинает скалдоватся, впичитление, что нет на форуме хорошо, разберающегося в CSS\PHP человека, а если и есть, то обходит мою тему:[:(
    кстати, когда задаю 100% хидер исчезает вообще..
     
  11. DKraev
    Offline

    DKraev <i>(aka gft)</i> => Cпециалист <=

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    219
    Пол:
    Мужской
    Да на форуме полно людей знающих CSS. Просто невозможно объяснить принцип действий человеку, который совершенно не разбирается в теме вопроса.

    И я не говорил, что задний бекграунд должен быть статичным. Ему нужно задать repeat-x. И это не должна быть твоя шапка, а это должен быть именно фон. Полоска высотой с шапку и шириной в несколько пикселов, которая будет тянуться под твоей шапкой и заполнять пустоту по краям.

    В общем твоих пары учебников недостаточно. Изучай базовые, повторюсь БАЗОВЫЕ возможности CSS
     
  12. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    botanist, +100
    Artisteer - г.

    ага, сейчас сбегутся все доказывать свою квалификацию, жди... :)

    John1992on, приколист, зачем в html у шапки class, а в css - id? И бэкграунд не может быть резиновым.
    Оффтопик (не в тему) - жми сюда!
     
    1 человеку нравится это.
  13. Kadavr
    Offline

    Kadavr Недавно здесь => Cпециалист <=

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    John1992on, на самом деле, геморройно разбираться в коде от Артистера. Вот тебе ссылка на видеошколу по CSS/HTML - http://depositfiles.com/files/q7rxhcxg0 , пока сам не разберешься, толку не будет. Одно дело - дать совет, другое - перелопачивать весь код чужого сайта, таких любителей мало.
     
    1 человеку нравится это.
  14. Asylum
    Offline

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

    Регистрация:
    09.02.2007
    Сообщения:
    2 744
    Симпатии:
    160
    Пол:
    Мужской
    Может проще заплатить за верстку шаблона по макету? В артистерских шаблонах раньше не были видны комментарии и прочие грабли там наверняка разбросаны
     
  15. Offline

    ValeryB Активист

    Регистрация:
    07.10.2009
    Сообщения:
    384
    Симпатии:
    26
    Пол:
    Мужской
    John1992on
    Резиновую шапку делают не путем деформации и размазывания по ширине изображения фиксированного размера. Обычно изображение переходит с одного или двух краев незаметно в какой-то фон. Иногда 2 изображения по краям и фон посредине. Изображения остаются постоянного размера, а пустое место в шапке заполняется фоном.
    Потому простая замена фиксированной ширины на проценты не используется. Надо кардинально изменить исполнение шаблона.
     
  16. Offline

    John1992on Гость

    Не думал, что так много прошу..., хотя твой совет видался мне очень полезным:)
    ValeryB,а вот эсли нужно\хочется
    что тогда(кажется web-мастер может єто сделать..)?
    Asylum - да лано тебе...я же не прошу меня переубедить-отказатся от Artisteer(может он и далеко не совершенный, но для начала, и он неплохо катит-хоть я и не могу сказать что хорошо разбераюсь в кодирвке, но по мне тот, код что он генерирует, довольно хорош--да нем тяжелее разобратся, так как эво(кода) немного большо..., не это совсем другая тема..,), а все грабли это сугубо мои проблемы, обещаю, эсли таковы возникнут(кроме проблемы которуюю, я решаю в даной теме)...
    Kadavr - ну вот челоек как может помогает, ему за ето респект!, хотя я не прошу:
    , а прсто помочь с определенным елементом шаблона сайта...
    А в прочем я понял, одно все вроде всё знают, но говорят
    , ето всем понятно, что кагда я изучу сделаю - сам..., разве очень тяжело написать 20 строк текста, которые все решат?
    И просто интресно(раз уж вам так тяжело помочь челевеку), скоко времени примерно для вас всесильных кодировщиков, заняло решение подобной ситуации(и токо не надо писать что битрее, можно новый сделать:))?
     
    Последнее редактирование модератором: 05.04.2014
  17. Kadavr
    Offline

    Kadavr Недавно здесь => Cпециалист <=

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    Для этого сначала надо разобраться в коде шаблона, в коде таблиц CSS, проследить всю логику построения хедера, а потом написать код. С перекурами и чаепитиями как раз половина рабочего дня и уйдет. А тут еще сосед зашел, что-то у него сайт не вырисовывается, нужна помощь. Да на другом форуме хороший человек попросил глянуть его код. В итоге - день прошел, работа стояла и стоит, как член в период полового созревания, зато всем вокруг помог....
     
  18. Offline

    John1992on Гость

    Все сделал, то что хотел блпгодаря сайту: http://bitby.net/web/masshtabiruemaya-kartinka-na-fone-sajta-ili-rezinovyj-fon/ - мож кому пригодится(аналогов на рус. не выдал)
    изминения кода CSS произшли вот так:
    Код (PHP):
    1. /* begin Header */
    2.  
    3. div.art-header
    4. {
    5.   position: relative;
    6.   width: 100%;
    7.   height: 250px;
    8.   margin 0;
    9.   padding: 0;
    10. }
    11.  
    12. #art-header-jpeg
    13. {
    14. height:100%;
    15. width:100%;
    16. z-index:1;
    17. min-width:1254px;
    18. max-width:245px;
    19. }
    20.  
    21. #art-header-jpeg img{
    22. height:100%;
    23. width:100%;
    24. position:absolute;
    25. }
    26.  
    27. /* end Header */

    а в PHP:
    Код (PHP):
    1. <div class="art-header">
    2.     <div id="art-header-jpeg"><img src="you patch to image" alt="Header" /></div>
    3. </div>

    большое улучшение понемания CSS пришло после просмтора видео-уроков, ссилку на которые предоставил Kadavr, за что ему огромное спасибо и "+"....
     
  19. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 204
    Симпатии:
    334
    Пол:
    Мужской
    ну ребята Вы даёте!!!!!!

    в шаблонах АРТИСТЕРА есть такая штука как ART-SHEET
    она отвечает за размеры страницы, так вот HEADER находится внутри блока ART-SHEET

    для резинения хеадера (я бы для симетрии сделал бы еще и футер) нужно всеголишь перенести вот так DIV'ы
    что было:
    Код (PHP):
    1. <div id="art-main">
    2. <div class="art-sheet">
    3.     <div class="art-sheet-cc"></div>
    4.     <div class="art-sheet-body">
    5. <div class="art-header">
    6.     <div class="art-header-jpeg"></div>
    7. </div>


    Код (PHP):
    1. что требуется:
    2. <div class="art-header">
    3.     <div class="art-header-jpeg"></div>
    4. </div>
    5. <div id="art-main">
    6. <div class="art-sheet">
    7.     <div class="art-sheet-cc"></div>
    8.     <div class="art-sheet-body">


    всего делов!!!!!!!

    John1992on, внимательнее надо читать INDEX.PHP и TEMPLATE.CSS
     
    1 человеку нравится это.
  20. Offline

    ValeryB Активист

    Регистрация:
    07.10.2009
    Сообщения:
    384
    Симпатии:
    26
    Пол:
    Мужской
    Это почему?
     
  21. Offline

    John1992on Гость

    woojin, ну в твоем примере, оно просто не держится края странички(при масштабированные - деконкструктивизация макета), и получается, ничем не лучше моего варианта..

    ValeryB, ето размеры картинки, которую я установил..
     

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

Загрузка...