Не получается расположить Skype, телефон и емейл на одной строке

Discussion in 'Изменение шаблона (кастомизация)' started by Пушистейший, Mar 6, 2013.

  1. Offline

    Пушистейший Недавно здесь

    Joined:
    Mar 6, 2013
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Есть шаблон для Joomla 2.5 http://files.mail.ru/6E24058BF43D4991B25961686F05790D
    Никак не могу понять как мне расположить в шапке в одну строчку телефон и емейл, добавив к ним слева следующий код звонка через Скайп:
    Код (CODE):
    1. <script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>
    2. <div id="genSkypeCall_01">
    3.     <script type="text/javascript">
    4.         Skype.ui({
    5.             name: "call",
    6.             element: "genSkypeCall_01",
    7.             participants: ["echo123"],
    8.             imageSize: 32,
    9.             imageColor: "skype"
    10.         });
    11.     </script>


    Уже всё перепробовал:
    - и в сам шаблон код вставлял (файл index.php, перед или после строк 102-103),
    - и в виде отдельного модуля Joomla создавал..
    - и располагал во вроде бы описанной позиции шаблона position-1, position-29 (схема шаблона в файле /images/pozycje.jpg)

    Итог один: картинка со значком Skype переносит текст после неё или перед ней на следующую строчку. И ничего сделать с этим не получается.

    А надо, чтобы на том месте где сейчас выводится телефон и емейл (друг под другом) было так:

    Логотип Skype+слово "Call" Телефон: 123-45678 Емейл: aaa@bbb.ru

    Помогите друже идиоту.. )

    Вот на всякий случай код шаблона (строки 102-103):
    Код (CODE):
    1. <?php
    2. defined('_JEXEC') or die;
    3. /**
    4.  *-------------------------------------------
    5.  * Szablon został wypalony w  Diablodesign.
    6.  * www.diablodesign.eu
    7.  * biuro@diablodesign.eu
    8.  * tel.666-977-944
    9.  *-------------------------------------------
    10.  */
    11.  
    12. require_once dirname(__FILE__). DIRECTORY_SEPARATOR . 'functions.php';
    13. $document = $this;
    14. $templateUrl = $document->baseurl . '/templates/' . $document->template;
    15. Artx::load("Artx_Page");
    16. $view = $this->artx = new ArtxPage($this);
    17. $view->componentWrapper();
    18.  
    19. JHtml::_('behavior.framework', true);
    20. $app = JFactory::getApplication();
    21. $tplparams  = $app->getTemplate(true)->params;
    22. $delte = htmlspecialchars($tplparams->get('delte'));
    23. $left = htmlspecialchars($tplparams->get('left'));
    24. $dtab1 = htmlspecialchars($tplparams->get('dtab1'));
    25. $dtab2 = htmlspecialchars($tplparams->get('dtab2'));
    26. $dtab3 = htmlspecialchars($tplparams->get('dtab3'));
    27. $dtab4 = htmlspecialchars($tplparams->get('dtab4'));
    28. $dtab5 = htmlspecialchars($tplparams->get('dtab5'));
    29. $dtab6 = htmlspecialchars($tplparams->get('dtab6'));
    30. $dtab7 = htmlspecialchars($tplparams->get('dtab7'));
    31. $dtaball = htmlspecialchars($tplparams->get('dtaball'));
    32. ?>
    33. <!DOCTYPE html>
    34. <html dir="ltr" lang="<?php echo $document->language; ?>">
    35. <head>
    36.     <jdoc:include type="head" />
    37.     <jdoc:include type="head" />
    38.     <!--scroling head-->
    39. <script src="<?php echo $templateUrl; ?>/js/scroling.js"></script>
    40. <script type="text/javascript">
    41. $(function() {
    42.     $(window).scroll(function() {
    43.         if($(this).scrollTop()!= 0) {
    44.             $('#toTop').fadeIn();  
    45.         } else {
    46.             $('#toTop').fadeOut();
    47.         }
    48.     });
    49.  
    50.     $('#toTop').click(function() {
    51.         $('body,html').animate({scrollTop:0},800);
    52.     });
    53. });
    54. </script>
    55. <!--scroling koniec head-->
    56.     <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
    57.     <link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />
    58.  
    59.  
    60.    
    61.    
    62.     <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    63.  
    64.     <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    65.     <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen">
    66.     <!--[if lte IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" /><![endif]-->
    67.     <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.responsive.css" media="all">
    68.  
    69. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    70.     <script>if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>
    71.     <script src="<?php echo $templateUrl; ?>/jquery.js"></script>
    72.     <script>jQuery.noConflict();</script>
    73.  
    74.     <script src="<?php echo $templateUrl; ?>/script.js"></script>
    75.     <?php $view->includeInlineScripts()?>
    76.     <script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
    77.     <script src="<?php echo $templateUrl; ?>/script.responsive.js"></script>
    78.        <!--tabs css-->
    79.        <link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/tabs.css" type="text/css" media="all" />
    80.        <!--end tabs css-->
    81.        <!-- slideshow -->
    82.     <link rel="stylesheet" href="<?php echo $templateUrl; ?>/js/flex-slider/flexslider.css" type="text/css" media="all" />
    83.     <script src="<?php echo $templateUrl; ?>/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
    84.     <script src="<?php echo $templateUrl; ?>/js/flex-slider/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
    85.     <script src="<?php echo $templateUrl; ?>/js/DD_belatedPNG-min.js" type="text/javascript" charset="utf-8"></script>
    86.     <script src="<?php echo $templateUrl; ?>/js/functions.js" type="text/javascript" charset="utf-8"></script>
    87.     <!-- end slideshow -->
    88. </head>
    89. <body>
    90. <!--scroling-->
    91. <div id="toTop">^<?php echo $this->params->get('scroll'); ?></div>
    92. <!--koniec scroling-->
    93. <div id="dd-main">
    94. <header class="dd-header clearfix"><?php echo $view->position('position-30', 'dd-nostyle'); ?>
    95.  
    96.  
    97.     <div class="dd-shapes">
    98.      <!--logo -->
    99.  <div class="logo"><a href="index.php"><img src="<?php echo $this->params->get('logo'); ?>"></a></div>
    100. <!--logo -->
    101. <!--contact-->
    102. <div class="contact">
    103. <div class="email"><?php echo $this->params->get('telefon'); ?></div><br><div class="email"><?php echo $this->params->get('email'); ?></div></div>
    104. <!--end contact-->
    105. <div class="dd-object964560789" data-left="0%"></div>
    106.  
    107. <div class="dd-object1431017770" data-left="100%"></div>
    108. <div class="animacja"><!--slideshow-->
    109.  <!-- Begin Slider -->
    110.  
    111.         <div id="slider">
    112.             <div class="shell">
    113.                 <div class="flexslider">
    114.                     <ul class="slides">
    115.                         <li>
    116.                             <img src="<?php echo $this->params->get('foto1'); ?>" />
    117.                             <div class="slide-entry">
    118.                                
    119.                                 <h2><a href="<?php echo $this->params->get('lh1'); ?>"><?php echo $this->params->get('header1'); ?></a></h2>
    120.                                 <p><?php echo $this->params->get('info_txt1'); ?> </p>
    121.                                
    122.                             </div>
    123.                         </li>
    124.                         <li>
    125.                             <img src="<?php echo $this->params->get('foto2'); ?>" />
    126.                             <div class="slide-entry">
    127.                            
    128.                                 <h3><a href="<?php echo $this->params->get('lh2'); ?>"><?php echo $this->params->get('header2'); ?></a></h23>
    129.                                
    130.                             <p><?php echo $this->params->get('info_txt2'); ?>.</p>
    131.                                
    132.                            
    133.                             </div>
    134.                         </li>
    135.                         <li>
    136.                             <img src="<?php echo $this->params->get('foto3'); ?>" />
    137.                             <div class="slide-entry">
    138.                                
    139.                                 <h2><a href="<?php echo $this->params->get('lh3'); ?>" ><?php echo $this->params->get('header3'); ?></a></h2>
    140.                                 <p><?php echo $this->params->get('info_txt3'); ?></p>
    141.                                
    142.                             </div>
    143.                         </li>
    144.                     </ul>
    145.                 </div>
    146.             </div>
    147.         </div>
    148.         <!-- End Slider --><!--hot info-->
    149.  
    150. <div class="dd-positioncontrol dd-positioncontrol-29720441" id="hotnews" data-left="93.79%"><div class="hotinfo"><marquee direction="left" scrollamount="2" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()"><?php echo $view->position('hotinfo', 'dd-nostyle'); ?><a href="<?php echo $this->params->get('hl'); ?>"><?php echo $this->params->get('hotinfo'); ?></a>
    151. </marquee></div>
    152. </div>
    153. <!--end hotinfo--></div>
    154.             </div>
    155.            
    156. <h2 class="dd-slogan" data-left="2.93%"><?php echo $this->params->get('siteSlogan'); ?></h2>
    157.  
    158. <div class="dd-positioncontrol dd-positioncontrol-1091969238" id="MENU" data-left="46.3%">
    159. <?php echo $view->position('position-31', 'dd-nostyle'); ?></div>
    160.  
    161. <div class="dd-textblock dd-object360920424" data-left="99.87%">
    162.     <form class="dd-search" name="Search" action="<?php echo $document->baseurl; ?>/index.php" method="post">
    163.     <input type="text" value="" name="searchword">
    164.             <input type="hidden" name="task" value="search">
    165. <input type="hidden" name="option" value="com_search">
    166. <input type="submit" value="Search" name="search" class="dd-search-button">
    167.     </form>
    168. </div>
    169.  
    170. <?php if ($view->containsModules('position-1', 'position-28', 'position-29')) : ?>
    171. <nav class="dd-nav clearfix">
    172.    
    173. <?php if ($view->containsModules('position-28')) : ?>
    174. <div class="dd-hmenu-extra1"><?php echo $view->position('position-28'); ?></div>
    175. <?php endif; ?>
    176. <?php if ($view->containsModules('position-29')) : ?>
    177. <div class="dd-hmenu-extra2"><?php echo $view->position('position-29'); ?></div>
    178. <?php endif; ?>
    179. <?php echo $view->position('position-1'); ?>
    180.  
    181.     </nav>
    182. <?php endif; ?>
    183.  
    184.                    
    185. </header>
    186. <div class="dd-sheet clearfix">
    187.             <?php echo $view->position('position-15', 'dd-nostyle'); ?>
    188. <?php echo $view->positions(array('position-16' => 33, 'position-17' => 33, 'position-18' => 34), 'dd-block'); ?>
    189. <div class="dd-layout-wrapper clearfix">
    190.                 <div class="dd-content-layout">
    191.                     <div class="dd-content-layout-row">
    192.                         <?php if ($view->containsModules('position-7', 'position-4', 'position-5')) : ?>
    193. <?php if ($left == 1) { ?><div class="dd-layout-cell dd-sidebar1 clearfix">
    194. <?php echo $view->position('position-7', 'dd-block'); ?>
    195. <?php echo $view->position('position-4', 'dd-block'); ?>
    196. <?php echo $view->position('position-5', 'dd-block'); ?>
    197.  
    198.  
    199.  
    200.  
    201.                         </div><?php } ?>
    202. <?php endif; ?>
    203.  
    204.                         <div class="dd-layout-cell dd-content clearfix">
    205.                        <?php if ($dtaball == 1) { ?> <div class="partner"><ul id="tabs">
    206.    <?php if ($dtab1 == 1) { ?> <li><a href="#" title="tab1"><?php echo $this->params->get('ttab1'); ?></a></li><?php } ?>
    207.     <?php if ($dtab2 == 1) { ?> <li><a href="#" title="tab2"><?php echo $this->params->get('ttab2'); ?></a></li><?php } ?>
    208.     <?php if ($dtab3 == 1) { ?> <li><a href="#" title="tab3"><?php echo $this->params->get('ttab3'); ?></a></li><?php } ?>
    209.     <?php if ($dtab4 == 1) { ?> <li><a href="#" title="tab4"><?php echo $this->params->get('ttab4'); ?></a></li><?php } ?>
    210.     <?php if ($dtab5 == 1) { ?> <li><a href="#" title="tab5"><?php echo $this->params->get('ttab5'); ?></a></li><?php } ?>
    211.     <?php if ($dtab6 == 1) { ?> <li><a href="#" title="tab6"><?php echo $this->params->get('ttab6'); ?></a></li><?php } ?>
    212.     <?php if ($dtab7 == 1) { ?> <li><a href="#" title="tab7"><?php echo $this->params->get('ttab7'); ?></a></li><?php } ?>      
    213. </ul>
    214.  
    215. <div id="content">
    216.     <div id="tab1">
    217.  <img src="<?php echo $this->params->get('f1'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab1'); ?>
    218.     </div>
    219.     <div id="tab2">
    220.        <img src="<?php echo $this->params->get('f2'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab2'); ?>
    221.  </div>
    222.     <div id="tab3">
    223.        <img src="<?php echo $this->params->get('f3'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab3'); ?>
    224.     </div>
    225.     <div id="tab4">
    226. <img src="<?php echo $this->params->get('f4'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab4'); ?>
    227.  
    228.     </div>
    229.         <div id="tab5">
    230. <img src="<?php echo $this->params->get('f5'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab5'); ?>
    231.  
    232.     </div>
    233.         <div id="tab6">
    234. <img src="<?php echo $this->params->get('f6'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab6'); ?>
    235.  
    236.     </div>
    237.         <div id="tab7">
    238. <img src="<?php echo $this->params->get('f7'); ?>" style="margin-right: 10px; float: left;" width="230" height="150" ><?php echo $this->params->get('itab7'); ?>
    239.  
    240.     </div>
    241.  
    242. </div></div><?php } ?>
    243. <?php
    244.   echo $view->position('position-19', 'dd-nostyle');
    245.   if ($view->containsModules('position-2'))
    246.     echo artxPost($view->position('position-2'));
    247.   echo $view->positions(array('position-20' => 50, 'position-21' => 50), 'dd-article');
    248.   echo $view->position('position-12', 'dd-nostyle');
    249.   echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' dd-messages'));
    250.   echo '<jdoc:include type="component" />';
    251.   echo $view->position('position-22', 'dd-nostyle');
    252.   echo $view->positions(array('position-23' => 50, 'position-24' => 50), 'dd-article');
    253.   echo $view->position('position-25', 'dd-nostyle');
    254. ?>
    255.  
    256.  
    257.  
    258.                         </div>
    259.                     </div>
    260.                 </div>
    261.             </div>
    262. <?php echo $view->positions(array('position-9' => 33, 'position-10' => 33, 'position-11' => 34), 'dd-block'); ?>
    263. <?php echo $view->position('position-26', 'dd-nostyle'); ?>
    264.  
    265. <footer class="dd-footer clearfix">
    266. <?php if ($view->containsModules('position-27')) : ?>
    267.     <?php echo $view->position('position-27', 'dd-nostyle'); ?>
    268. <?php else: ?>
    269. <div style="position:relative;padding-left:0px;padding-right:0px"><a title="RSS" class="dd-rss-tag-icon" style="position: absolute; bottom: 0px; right: 6px; line-height: 28px;" href="#"></a>Copyright © 2013. <?php echo $this->params->get('stopka'); ?> &nbsp;Rights Reserved.</div>
    270. <?php endif; ?>
    271. </footer>
    272.  
    273.     </div>
    274.     <p class="dd-page-footer">
    275.        <span id="dd-footnote-links">Designed by:<a href="http://www.diablodesign.eu" target="_blank">www.diablodesign.eu</a>.</span>
    276.     </p>
    277. </div>
    278.  
    279.  
    280.  
    281. <?php echo $view->position('debug'); ?>
    282.  
    283.  
    284. <script>
    285. $(document).ready(function() {
    286.     $("#content div").hide(); // Initially hide all content
    287.     $("#tabs li:first").attr("id","current"); // Activate first tab
    288.     $("#content div:first").fadeIn(); // Show first tab content
    289.    
    290.     $('#tabs a').click(function(e) {
    291.         e.preventDefault();        
    292.         $("#content div").hide(); //Hide all content
    293.         $("#tabs li").attr("id",""); //Reset id's
    294.         $(this).parent().attr("id","current"); // Activate this
    295.         $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    296.     });
    297. })();
    298. </script>
    299. </body>
    300. </html>
     
    Пушистейший, Mar 6, 2013
    #1

  2. Ads Master

     
  3. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Чтобы расположить несколько элементов "в одну строчку" нужно:

    Вариант 1:
    HTML-файл
    Код (html):
    1. <div class="mother">
    2.     <div class="child-1">
    3.     Скайп: ...
    4.     </div>
    5.     <div class="child-2">
    6.     Телефон: ...
    7.     </div>
    8.     <div class="child-3">
    9.     Мыло: ...
    10.     </div>
    11.     <div class="clear"></div>
    12. </div>

    CSS-файл
    Код (html):
    1. .child-1, .child-2, child-3 {
    2.     float: left;
    3. }
    4. .clear {
    5.     clear: both;
    6. }


    Вариант 2:
    HTML-файл
    Код (html):
    1. <div class="mother">
    2.     <div class="child-1">
    3.     Скайп: ...
    4.     </div>
    5.     <div class="child-2">
    6.     Телефон: ...
    7.     </div>
    8.     <div class="child-3">
    9.     Мыло: ...
    10.     </div>
    11. </div>

    CSS-файл
    Код (html):
    1. .child-1, .child-2, child-3 {
    2.     display: inline-block;
    3. }


    Второй способ требует использования фиксов (хаков...) для любимого всеми нами браузера Internet Explorer, так как он не понимает по-хорошему значение атрибута display: inline-block;
     
    AKopytenko, Mar 6, 2013
    #2
  4. Offline

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

    Joined:
    Mar 1, 2011
    Messages:
    501
    Likes Received:
    34
    Gender:
    Male
    либо div заменить на span
     
    TroL, Mar 7, 2013
    #3
  5. Offline

    Пушистейший Недавно здесь

    Joined:
    Mar 6, 2013
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Не получается. Всё равно переносит.. Исправил index.php в шаблоне (приведённый выше) вот так (вариант 1):
    Код (CODE):
    1. <!--contact-->
    2. <div class="contact">
    3. <div class="email">
    4. <script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>
    5. <div id="genSkypeCall_01">
    6.     <script type="text/javascript">
    7.         Skype.ui({
    8.             name: "call",
    9.             element: "genSkypeCall_01",
    10.             participants: ["echo123"],
    11.             imageSize: 32,
    12.             imageColor: "skype"
    13.         });
    14.     </script>
    15. </div>
    16. </div>
    17. <div class="email">
    18.     <?php echo $this->params->get('telefon'); ?>
    19. </div>
    20. <div class="email">
    21.     <?php echo $this->params->get('email'); ?>
    22. </div>
    23. </div>
    24. <!--end contact-->


    а потом вот так (вариант 2):
    Код (CODE):
    1. <!--contact-->
    2. <div class="mother">
    3. <span class="child-1">
    4. <script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>
    5. <span id="genSkypeCall_01">
    6.     <script type="text/javascript">
    7.         Skype.ui({
    8.             name: "call",
    9.             element: "genSkypeCall_01",
    10.             participants: ["vad_zaborski"],
    11.             imageSize: 32,
    12.             imageColor: "skype"
    13.         });
    14.     </script>
    15. </span>
    16. </span>
    17. <span class="child-2">
    18.     <?php echo $this->params->get('telefon'); ?>
    19. </span>
    20. <span class="child-1">
    21.     <?php echo $this->params->get('email'); ?>
    22. </span>
    23. <span class="clear"></span>
    24. </div>
    25. <!--end contact-->


    Итог один. Либо всё выглядит вот так (первый вариант):
    Skype
    Телефон
    Email

    либо так (второй вариант):
    Skype
    Телефон Email
    Причём второй вариант делает строку со Skype ближе к строке с телефоном и емейлом, чем первый вариант, но всё равно не на одной строке:
     
    Last edited by a moderator: Dec 4, 2014
    Пушистейший, Mar 7, 2013
    #4
  6. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    смотреть надо...
    поэкспериментируйте в CSS со свойством vertical-align для блоков DIV:
    • top !important;
    • baselinep !important;
    • bottomp !important;
    Возможно, у всех элементов разная высота контейнеров и установлено vertical-align: top, например...
     
    AKopytenko, Mar 7, 2013
    #5
  7. Offline

    Пушистейший Недавно здесь

    Joined:
    Mar 6, 2013
    Messages:
    3
    Likes Received:
    0
    Gender:
    Male
    Я кажется нашёл класс, который управляет выводом текста на экран:

    Код (CODE):
    1. .contact
    2. {
    3.   display: block;
    4.   left: 0%;
    5.   margin-left: 540px;
    6.   margin-top: 30px;
    7.   position: absolute;
    8.   top: 0px;
    9.   width: 350px;
    10.   height: 126px;
    11.   color:#CCC;
    12.   font-size:14px;
    13.  
    14.   z-index: 5;


    В свою очередь .contact находится внутри другого класса .dd-shapes:

    Код (CODE):
    1. .dd-shapes
    2. {
    3.   position: absolute;
    4.   top: 0;
    5.   right: 0;
    6.   bottom: 0;
    7.   left: 0;
    8.   overflow: hidden;
    9.   z-index: 0;
    10. }


    Если использовать Contact вместо Mother, который рекомендовался в примере выше, и изменять margin-left, margin-top, то текст начинает перемещаться. Но что нужно в нём изменить, чтобы перед и после логотипа Скайпа не было переноса строки - по-прежнему загадка.

    Теперь это выглядит вот так:

    .div я не нашёл в таблице стилей.. :(
     
    Last edited by a moderator: Dec 4, 2014
    Пушистейший, Mar 7, 2013
    #6
< Блок в шаблоне | Размер окошка ввода >

Share This Page

Loading...