Перейти к содержимому

Фотография
- - - - -

Как увеличить ширину выпадающего меню?


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 JoCKeR123

JoCKeR123

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 15 Февраль 2015 в 13:03

Я не могу увеличить ширину выпадающегося меню. Ширину сайта изменил через #outer-wrapper.

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

Вот адресс сайта http://uznews24.blogspot.com   это черновой сайт


А сам код этого выпадаюшегося меню выглядит так 

<b:includable id='main'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>


  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
<div style='clear:both;'/>


    </div>
<div style='clear:both;'/>


<div class='span-24'>
<div class='menu-secondary-container'>


<ul class='menus menu-secondary'>


<li><a expr:href='data:blog.homepageUrl'>Главная</a></li>


<li><a href='#'>Технологии</a>
<ul class='children'>
<li><a href='#'>Компании</a>
<ul class='children'>
<li><a href='http://uz-tech.blogspot.com/search/label/Apple'>Apple</a></li>
<li><a href='http://uz-tech.blogspot.com/search/label/GALAXY'>Samsung</a></li>
<li><a href='#'>Nokia</a></li>
</ul>
</li>
<li><a href='#'>Новинки и цены</a></li>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D1%8B'>Компьютеры</a></li>
<li><a href='#'>Ноутбуки</a></li>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%9F%D0%BB%D0%B0%D0%BD%D1%88%D0%B5%D1%82%D0%BD%D0%B8%D0%BA%D0%B8'>Планшетники</a></li>
</ul>
</li>


<li><a href='#'>Полезно знать</a>
<ul class='children'>
<li><a href='#'>Web ресурсы</a>
<ul class='children'>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82'>Интернет</a></li>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%A5%D0%B0%D0%BA%D0%B5%D1%80%D1%81%D1%82%D0%B2%D0%BE'>Хакерство</a></li>
<li><a href='http://uz-tech.blogspot.com/p/blog-page_9089.html'>Языки интернета</a></li>
</ul>
</li>


</ul>
</li>




<li><a href='#'>Искусственный интелект</a>
<ul class='children'>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%A0%D0%BE%D0%B1%D0%BE%D1%82%D1%8B'>Роботы</a></li>
<li><a href='http://uz-tech.blogspot.com/search/label/%D0%9B%D1%8E%D0%B4%D0%B8%20%D0%B8%20Tech'>Люди и Tech</a></li>
<li><a href='#'>Автомобили</a></li>
</ul>
</li>


<li><a href='http://uz-tech.blogspot.com/search/label/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D0%BD%D0%BE'>Это интересно</a></li>


<li><a href='#'>О нас</a>
<ul class='children'>
<li><a href='http://uz-tech.blogspot.com/p/blog-page_14.html'>Контакты</a></li>
<li><a href='http://uz-tech.blogspot.com/p/blog-page_17.html'>О нас</a></li>
</ul>
</li>
</ul> 
</div>
</div>
<div style='clear:both;'/>


<div id='content-wrapper'>


<div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>


<div id='main-wrapper'>

Сообщение отредактировал BaNru: 15 Февраль 2015 в 13:06
Для кода есть BBтег <CODE>

  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 990
    3 537 сообщ.

Отправлено 15 Февраль 2015 в 13:15

Читаем сначала основы:

https://ru.wikipedia.org/wiki/CSS

http://htmlbook.ru/samcss

 

В данном случае надо для элемента с классом span-24 указать ширину 100%, сейчас там указано 960px:

.span-24, div.span-24 {
    margin: 0;
    width: 960px;
}

исправить на

.span-24, div.span-24 {
    margin: 0;
    width: 100%;
}

Затем надо найти стили элемента .menu-secondary-container и заменить там текущую картинку, которая в 984px, на более широкую.

Вот тут:

.menu-secondary-container{position:relative;height:40px;z-index:300;background:url(http://1.bp.blogspot.com/-_g--5gw-TLY/U7ibn-vRgOI/AAAAAAAAK6U/5ECdwG7FMnI/s1600/menu-secondary-bg.png) center top no-repeat;margin:0 -12px -17px;padding:0 12px 17px}

А по хорошему вообще переверстать, чтобы фон меню был из трех элементов (правая и левая загагулины фиксированной ширины и центральная резиновая).


  • 1

#3 JoCKeR123

JoCKeR123

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 15 Февраль 2015 в 15:23

Спасибо большое выручили.) У меня ещё 1 вопрос. А как можно увеличить ширину 3 колонки. То есть с правой стороны который 


  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 990
    3 537 сообщ.

Отправлено 15 Февраль 2015 в 15:38

У #rsidebar-wrapper увеличиваем ширину

А у #lsidebar-wrapper или #main-wrapper уменьшаем.


  • 0

#5 JoCKeR123

JoCKeR123

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 15 Февраль 2015 в 15:50

Очень благодарен. И последний вопрос. Я с этим вопрос уже долго не могу разобраться. Наверху сайта хочу поставить вот эту шапку http://4.bp.blogspot...%BD%D0%B8-1.gif

но когда ставлю, видна только половина изображении, а другой половины нету. Кстати вот тот самый сайт http://uz-tech.blogspot.com это основной. Можете помочь?


  • 0

#6 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 990
    3 537 сообщ.

Отправлено 15 Февраль 2015 в 16:42

У #header стоит 40%.

 

Это всё можно увидеть через firrebug или инструменты разработчика любимого вами браузера.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей