Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....

 

Растянуть меню по ширине

Автор hellomoto, 26-11-2012, 22:12:18

« назад - далее »

hellomoto

Здравствуйте! Растягивая свой сайт в ширину, столкнулся с одной проблемой, не могу растянуть меню по ширине шаблона, помогите советом. http://винил161.рф

Что нужно изменить?

Цитировать/* Top Navigation
*****************************************/
ul#mainmenu-nav {
   position: absolute;
   left: 10%;
   bottom: 0;
   margin: 0;
   border: 0 none;
   padding: 0;
   list-style: none;
}
ul#mainmenu-nav li {
   margin: 0;
   border: 0 none;
   padding: 0;
   float: left;
   /*For Gecko*/
   display: inline;
   list-style: none;
   position: relative;
   background: none;

}

или я вообще не тот кусок css кода правлю?
  •  


Clever

#1
ul#mainmenu-nav           -    уберите position:absolute;

ul#mainmenu-nav a             min-width: 75px; ( или 76 , примерно)

в html файле где находится меню последнему пункту li дайте команду style="border-right:0":

<li style="border-right:0">
  <a  href=&quot;#">Контакты</a>
</li>

В итоге у меня меню на всю ширину , а у вас ? ;)

Скрин прилаживаю


hellomoto

Спасибо!!)) Все получилось.. почти, не пойму куда тулить:

<li style="border-right:0">
  <a  href=&quot;#">Контакты</a>
</li>

Меню я могу только через css файл редактировать. там искать?)
  •  

Гарик+

#3
вы правильно заметили, что для растяжения меню по ширине сайта вам нужно изменить код CSS. Для этого вам нужно удалить свойство "position: absolute;" из стиля "ul#mainmenu-nav" и заменить его на "display: flex;", чтобы меню растянулось по всей ширине шаблона. Вот как это может выглядеть:

/* Top Navigation *****************************************/
ul#mainmenu-nav {
   display: flex;
   justify-content: space-around;  /* или другое значение в зависимости от ваших предпочтений */
   margin: 0;
   padding: 0;
   list-style: none;
}
ul#mainmenu-nav li {
   margin: 0;
   padding: 0;
   list-style: none;
   background: none;
}


После этого меню должно растянуться по ширине шаблона. Не забудьте проверить, что изменения корректно отображаются на разных устройствах и разрешениях экрана.

hellomoto

#4
Если просматривать код страницы из браузера. я то нашел... а вот через jommlu  как мне это сделать.. там всего 1 файл с html кодом менять можно...

Цитировать<div class="help-contents">
            <ul>
               <li class="help-blue">Blue Theme</li>
               <li class="help-red">Red Theme</li>
               <li class="help-green">Green Theme</li>
               <li class="help-pink">Pink Theme</li>
               <li class="help-yellow">Orange Theme</li>
            </ul>
            <ul>
               <li class="help-narrow">800px Width</li>
               <li class="help-wide">1000px Width</li>
               <li class="help-sidebar">Sidebar Position</li>
               <li class="help-text">Adjust Text Size</li>
            </ul>
            <h3>Display Options Help</h3>
         </div>
      </div>
   <?php endif; ?>
   </div>
   
   <div id="nav">
     <?php if ($menu_type == "suckerfish") mosShowSuckerFishMenu($menu_name);   ?>
   </div>
   <div id="sitePath">
    <jdoc:include type="modules" name="breadcrumb" style="raw"/>
    <div id="searchBox-js">   
      <jdoc:include type="modules" name="user4" style="raw"/>
    </div>   
   </div>
   
   <div id="main">
      <div id="content">
         <div class="padding">
        <?php if($this->countModules('top')) : ?>
        <div id="inset">
          <jdoc:include type="modules" name="top" style="xhtml"/>
        </div>
        <?php endif; ?>

вот все что я нашел. относящиеся к меню и "li"...
  •  


Гарик+

очевидно страница с меню вставлена инклюдом и её надо искать среди других файлов движка..

Clever

#6
Цитата: hellomoto от 26-11-2012, 23:43:55
Спасибо!!)) Все получилось.. почти, не пойму куда тулить:

<li style="border-right:0">
  <a  href=&quot;#">Контакты</a>
</li>

Меню я могу только через css файл редактировать. там искать?)

Теперь еще добавьте в :
ul#mainmenu-nav a                  такое свойство:              text-align:center;

Это равномерно выровняет пункты меню по ширине



Добавлено: 27-11-2012, 11:15:59


Цитировать<div id="nav">
     <?php if ($menu_type == "suckerfish") mosShowSuckerFishMenu($menu_name);   ?>
   </div>
   <div id="sitePath">
    <jdoc:include type="modules" name="breadcrumb" style="raw"/>
    <div id="searchBox-js">   
      <jdoc:include type="modules" name="user4" style="raw"/>
    </div>   
   </div>

Вот я выделил красным как вызывается ваше меню , ищите в файлах
Я с джумлой не дружу , специализируюсь на ДЛЕ

Добавлено: 27-11-2012, 11:21:07


Цитата: --- от 27-11-2012, 11:13:43
Меню я могу только через css файл редактировать. там искать?)

Нет , через css правятся только стили

hellomoto

Спасибо! Все получилось! Только не пойму, зачем мне вообще куда-то вставлять этот код, если все и так выглядит как я хотел)
Цитировать<li style="border-right:0">
  <a  href=&quot;#">Контакты</a>
</li>
  •  


Clever

Цитата: hellomoto от 27-11-2012, 22:37:16
Спасибо! Все получилось! Только не пойму, зачем мне вообще куда-то вставлять этот код, если все и так выглядит как я хотел)
<li style="border-right:0">
  <a  href=&quot;#">Контакты</a>
</li>

Этот код - для идеального отображения меню.  У вас правый пункт , Контакты имеет бордер справа , если вы добавите этот код , то бордер исчезнет , благодаря чему последний пункт всегда будет какбы впритык , не будет видимого кусочка справа в десяток пикселей



Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....