Всем добрый день. В процессе создания сайта на Joomla, возникла проблема. Заказчик требует вклеить в лого картинку, которая больше окошка вывода... логотип и меню спаяны в один блок через <div>. Пытался разделить их в php файле тимплейта(с ссответственным дублированием CSS кода), ничего не вышло... картинка ставиться отлично, но вместе с этим растягивается и меню.
Далее опишу проблему подробнее.
так это выглядит изначально при установке шаблона:
php код выглядит следующим образом:
<div id="gk-nav" class="clearfix<?php if( !(GK_LOGIN || GK_REGISTER || GK_TOOLS || $this->countModules('search'))) : ?> top_offset<?php endif; ?>">
<?php if ($this->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $this->sitename(); ?>"><span><?php echo $this->sitename(); ?></span></a>
</h1>
<?php else : ?>
<div class="logo-text">
<h1><a href="index.php" title="<?php echo $this->sitename(); ?>"><span><?php echo GK_LOGO; ?></span></a></h1>
<p class="site-slogan"><?php echo GK_SLOGAN;?></p>
</div>
<?php endif; ?>
<div id="gk-mainnav" class="clearfix">
<?php if (($gkmenu = $this->loadMenu())) $gkmenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
<?php if ($this->hasSubmenu() && ($gkmenu = $this->loadMenu())) : ?>
<div id="gk-subnav" class="clearfix">
<?php $gkmenu->genMenu(1); ?>
</div>
<?php endif;?>
</div>
</div>
<ul class="no-display">
<li><a href="<?php echo $this->getCurrentURL();?>#gk-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>
а это CSS код:
/* logo styling */
h1.logo,
div.logo-text { float:left; padding:0 10px 0 0; background:#f4f2ef; }
h1.logo { width:389px; height:40px; background:#f4f2ef url('../images/logo.png') no-repeat 0 0; padding:0 10px 0 0; }
h1.logo>a { text-indent:-999em; display:block; }
div.logo-text h1 { font-size:18px; line-height:26px; height:16px; color:#6b6459; text-transform:uppercase; }
div.logo-text h1 a { color:#6b6459; }
div.logo-text h1 a:hover { text-decoration:none; }
div.logo-text p { font-size:11px; line-height:14px; height:14px; color:#6b6459; text-transform:uppercase; letter-spacing:0.65px; }
В итоге должно получиться примерно следующее:
как видите размер логотипа увеличен, а меню осталось не тронутым
Что я сделал. Я разделил их в php файле(кстати так и не разобрался до конца с <div>) следующим образом
<h12 id="gk-nav" class="clearfix<?php if( !(GK_LOGIN || GK_REGISTER || GK_TOOLS || $this->countModules('search'))) : ?> top_offset<?php endif; ?>">
<?php if ($this->getParam('logoType')=='image'): ?>
<h1 class="logo1">
<a href="index.php" title="<?php echo $this->sitename(); ?>"><span><?php echo $this->sitename(); ?></span></a>
</h1>
<?php else : ?>
<div class="logo1-text">
<h1><a href="index.php" title="<?php echo $this->sitename(); ?>"><span><?php echo GK_LOGO; ?></span></a></h1>
<p class="site-slogan"><?php echo GK_SLOGAN;?></p>
</div>
<?php endif; ?>
<div id="gk-mainnav" class="clearfix">
<?php if (($gkmenu = $this->loadMenu())) $gkmenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
<?php if ($this->hasSubmenu() && ($gkmenu = $this->loadMenu())) : ?>
<div id="gk-subnav" class="clearfix">
<?php $gkmenu->genMenu(1); ?>
</div>
<?php endif;?>
</div>
</h12>
<ul class="no-display">
<li><a href="<?php echo $this->getCurrentURL();?>#gk-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>
вместо первого и последнего <div> поставил <h12>, в первой части заменил "logo" на "logo1"
сделал дубликат CSS кода:
/* logo styling */
h1.logo1,
div.logo1-text { float:left; padding:0 10px 0 0; background:#f4f2ef; }
h1.logo1 { width:389px; height:133px; margin:-20px; background:#f4f2ef url('../images/logo.png') no-repeat 0 0; padding:0 10px 0 0; }
h1.logo1>a { text-indent:-999em; display:block; }
div.logo1-text h1 { font-size:18px; line-height:26px; height:16px; color:#6b6459; text-transform:uppercase; }
div.logo1-text h1 a { color:#6b6459; }
div.logo1-text h1 a:hover { text-decoration:none; }
div.logo1-text p { font-size:11px; line-height:14px; height:14px; color:#6b6459; text-transform:uppercase; letter-spacing:0.65px; }
h1.logo,
div.logo-text { float:left; padding:0 10px 0 0; background:#f4f2ef; }
h1.logo { width:389px; height:40px; background:#f4f2ef url('../images/logo.png') no-repeat 0 0; padding:0 10px 0 0; }
h1.logo>a { text-indent:-999em; display:block; }
div.logo-text h1 { font-size:18px; line-height:26px; height:16px; color:#6b6459; text-transform:uppercase; }
div.logo-text h1 a { color:#6b6459; }
div.logo-text h1 a:hover { text-decoration:none; }
div.logo-text p { font-size:11px; line-height:14px; height:14px; color:#6b6459; text-transform:uppercase; letter-spacing:0.65px; }
верхняя половина отвечает за лого, нижняя за меню. там поменял высоту лого(133px), высоту меню оставил прежней (40px)
Но вместо того что должно было получиться я увидел следующее:
лого увеличилось, но при этом меню тоже, кнопки съехали влево с фона меню и вообще задумка с отдельными настройками для меню и лого не удалась.
Прошу помочь с решением данной проблемы.
