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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by John1992on, Jun 29, 2010.

Page 1 of 2
  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 смотри ссилку вверху..
     
    John1992on, Jun 29, 2010
    #1

  2. Ads Master

     
  3. Kadavr
    Offline

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

    Joined:
    Oct 18, 2007
    Messages:
    557
    Likes Received:
    39
    Gender:
    Male
    О какой резине может идти речь, если в стилях дива хедера у вас четко прописано: width: 1280px; height: 250px;
    Ставьте ширину не в пикселях, а в процентах.
     
    Kadavr, Jun 29, 2010
    #2
  4. Offline

    John1992on Гость

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

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

    Joined:
    Oct 18, 2007
    Messages:
    557
    Likes Received:
    39
    Gender:
    Male
    Не понял.. У вас что, 2 шапки в сайте?
     
    Kadavr, Jun 30, 2010
    #4
  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; , но оно по прежнему не растягивалось на всю ширину.., вот в том то и проблема....
     
    John1992on, Jun 30, 2010
    #5
  7. Offline

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

    Joined:
    Feb 15, 2009
    Messages:
    461
    Likes Received:
    49
    Gender:
    Male
    Верстальщики говорят, что редактирование шаблона от Artisteer по трудозатратам сопоставимо с версткой нового по тому же макету.
     
    botanist, Jun 30, 2010
    #6
  8. Offline

    John1992on Гость

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

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

    Joined:
    Aug 16, 2008
    Messages:
    1,627
    Likes Received:
    219
    Gender:
    Male
    Оффтопик (не в тему) - жми сюда!


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

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

    John1992on Гость

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

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

    Joined:
    Aug 16, 2008
    Messages:
    1,627
    Likes Received:
    219
    Gender:
    Male
    Да на форуме полно людей знающих CSS. Просто невозможно объяснить принцип действий человеку, который совершенно не разбирается в теме вопроса.

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

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

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    botanist, +100
    Artisteer - г.

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

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

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

    Joined:
    Oct 18, 2007
    Messages:
    557
    Likes Received:
    39
    Gender:
    Male
    John1992on, на самом деле, геморройно разбираться в коде от Артистера. Вот тебе ссылка на видеошколу по CSS/HTML - http://depositfiles.com/files/q7rxhcxg0 , пока сам не разберешься, толку не будет. Одно дело - дать совет, другое - перелопачивать весь код чужого сайта, таких любителей мало.
     
    Kadavr, Jun 30, 2010
    #12
    1 person likes this.
  14. Asylum
    Offline

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

    Joined:
    Feb 9, 2007
    Messages:
    2,744
    Likes Received:
    160
    Gender:
    Male
    Может проще заплатить за верстку шаблона по макету? В артистерских шаблонах раньше не были видны комментарии и прочие грабли там наверняка разбросаны
     
    Asylum, Jun 30, 2010
    #13
  15. Offline

    ValeryB Активист

    Joined:
    Oct 7, 2009
    Messages:
    384
    Likes Received:
    26
    Gender:
    Male
    John1992on
    Резиновую шапку делают не путем деформации и размазывания по ширине изображения фиксированного размера. Обычно изображение переходит с одного или двух краев незаметно в какой-то фон. Иногда 2 изображения по краям и фон посредине. Изображения остаются постоянного размера, а пустое место в шапке заполняется фоном.
    Потому простая замена фиксированной ширины на проценты не используется. Надо кардинально изменить исполнение шаблона.
     
    ValeryB, Jun 30, 2010
    #14
  16. Offline

    John1992on Гость

    Не думал, что так много прошу..., хотя твой совет видался мне очень полезным:)
    ValeryB,а вот эсли нужно\хочется
    что тогда(кажется web-мастер может єто сделать..)?
    Asylum - да лано тебе...я же не прошу меня переубедить-отказатся от Artisteer(может он и далеко не совершенный, но для начала, и он неплохо катит-хоть я и не могу сказать что хорошо разбераюсь в кодирвке, но по мне тот, код что он генерирует, довольно хорош--да нем тяжелее разобратся, так как эво(кода) немного большо..., не это совсем другая тема..,), а все грабли это сугубо мои проблемы, обещаю, эсли таковы возникнут(кроме проблемы которуюю, я решаю в даной теме)...
    Kadavr - ну вот челоек как может помогает, ему за ето респект!, хотя я не прошу:
    , а прсто помочь с определенным елементом шаблона сайта...
    А в прочем я понял, одно все вроде всё знают, но говорят
    , ето всем понятно, что кагда я изучу сделаю - сам..., разве очень тяжело написать 20 строк текста, которые все решат?
    И просто интресно(раз уж вам так тяжело помочь челевеку), скоко времени примерно для вас всесильных кодировщиков, заняло решение подобной ситуации(и токо не надо писать что битрее, можно новый сделать:))?
     
    Last edited by a moderator: Apr 5, 2014
    John1992on, Jun 30, 2010
    #15
  17. Kadavr
    Offline

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

    Joined:
    Oct 18, 2007
    Messages:
    557
    Likes Received:
    39
    Gender:
    Male
    Для этого сначала надо разобраться в коде шаблона, в коде таблиц CSS, проследить всю логику построения хедера, а потом написать код. С перекурами и чаепитиями как раз половина рабочего дня и уйдет. А тут еще сосед зашел, что-то у него сайт не вырисовывается, нужна помощь. Да на другом форуме хороший человек попросил глянуть его код. В итоге - день прошел, работа стояла и стоит, как член в период полового созревания, зато всем вокруг помог....
     
    Kadavr, Jun 30, 2010
    #16
  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, за что ему огромное спасибо и "+"....
     
    John1992on, Jul 1, 2010
    #17
  19. woojin
    Offline

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

    Joined:
    May 31, 2009
    Messages:
    3,204
    Likes Received:
    334
    Gender:
    Male
    ну ребята Вы даёте!!!!!!

    в шаблонах АРТИСТЕРА есть такая штука как 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
     
    woojin, Jul 1, 2010
    #18
    1 person likes this.
  20. Offline

    ValeryB Активист

    Joined:
    Oct 7, 2009
    Messages:
    384
    Likes Received:
    26
    Gender:
    Male
    Это почему?
     
    ValeryB, Jul 1, 2010
    #19
  21. Offline

    John1992on Гость

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

    ValeryB, ето размеры картинки, которую я установил..
     
    John1992on, Jul 1, 2010
    #20
Page 1 of 2
< Вертикально прокручивающийся сайт по одной фоновой картинке | mod_random_image (Произвольное изображение) Как сделать картинку без рамки? >

Share This Page

Loading...