Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.08.2012, 22:33   #1
ellays
 
Регистрация: 20.08.2012
Сообщений: 3
По умолчанию фиксированная ширина пунктов горизонтального меню

встала задача перекроить шаблон http://www.globbersthemes.com/demo/tequoia/

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

контейнер меню в index.php

Код:
<div class="navigation"> 
 <jdoc:include type="modules" name="position-1" /> 
</div>
код в tdefault.css

Код:
#topmenu {
float:left;
width:100%;
height:80px;
background: url(../images/topmenu.png) 0 0 repeat-x;
margin-top:-5px;

}

.navigation {
float:left;
width: 100%;
background:transparent;
 margin-top:13px;
 
}
 
.navigation ul {
list-style: none;
margin:0;padding:0;

}

.navigation ul ul {
margin: 0;
padding: 0; 

}

.navigation ul li {
margin:0px 0 0 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block; *

}

.navigation ul li ul {
width: 230px;
position: absolute; 
z-index: 99; 
left: -999em; 
height: auto;
w\idth: 230px; 

} 

.navigation ul li ul ul {
margin: 0;

} 

.navigation ul li li {
padding: 0;
margin: 0;
width: 100%;

}

.navigation ul ul a {
width: 100%;

}

.navigation ul li:hover ul ul,.navigation ul li:hover ul ul ul,.navigation ul li.sfhover ul ul,.navigation ul li.havechildsfhover ul ul,
.navigation ul li.havechild-activesfhover ul ul,.navigation ul li.activesfhover ul ul,
.navigation ul li.sfhover ul ul ul,.navigation ul li.havechildsfhover ul ul ul,
.navigation ul li.havechild-activesfhover ul ul ul,.navigation ul li.activesfhover ul ul ul {
 left: -999em;
 
 }
 
.navigation ul li:hover ul,.navigation ul li li:hover ul,.navigation ul li li li:hover ul,
.navigation ul li.sfhover ul,.navigation ul li.havechildsfhover ul,.navigation ul li.havechild-activesfhover ul,
.navigation ul li.activesfhover ul,.navigation ul li li.sfhover ul,.navigation ul li li.havesubchildsfhover ul,
.navigation ul li li.havesubchild-activesfhover ul,.navigation ul li li.activesfhover ul,.navigation ul li li li.sfhover ul,
.navigation ul li li li.havesubchildsfhover ul,.navigation ul li li li.havesubchild-activesfhover ul,.navigation ul li li li.activesfhover ul {
left: auto; *

}

.navigation ul li a {
padding: 25px 8px 0 8px ;
 margin:0;
 display: block; 
 font-weight: bold; *
 font-size:16px;
 text-transform:capitalize;
 height:36px;
 background:transparent;
 color:#0a0a16;
 
}
 
.navigation ul li a:hover {
color:#efe9cf;
background:#0a0a16;

}

.navigation ul li {
background: transparent ;
 border-left:1px solid #aea995;
border-right:1px solid #cdc7ae; 

}
.navigation ul li.active a {
color:#efe9cf;
background:#0a0a16;

} 

.navigation ul li ul {
background:#0a0a16;
margin-top: 0px;
padding-top:15px !important;
padding-bottom: 15px !important;
text-align:left !important;
width:200px;
border:none !important;

}

.navigation ul li ul li {
padding-top:2px ;
padding-bottom:0px ;
background:none !important;
border:none !important;

}

.navigation ul li ul li a{
height:33px !important;
color:#fff !important;
text-align:left !important;
padding-left:20px !important;
padding-top:23px !important;
width:172px !important;
border:none !important;

}

.navigation ul li ul li a:hover *{
color:#0a0a16 !important;
height:33px ;
background:#efd02c;
border:none !important;

}

.navigation ul li ul li ul {
margin-left:190px;
margin-top: -30px;
padding-top:10px !important;
text-align:left !important;

}
воспользовался поиском по форуму, нашел тему http://joomlaforum.ru/index.php/topic,159871.0.html
там советуют
Цитата:
добавьте к тегу a свойство display:block; тогда везде будет фиксированная ширина.
но я не могу понять как применить это на практике.

подскажите, пожалуйста, в какую сторону копать?
ellays вне форума Ответить с цитированием
Старый 21.08.2012, 12:36   #2
Program_use
 
Регистрация: 21.08.2012
Сообщений: 3
Радость

Наверное, имелось ввиду, чтобы ширина была фиксирована, вам необходимо к .navigation ul li a{width: вставить свою ширину.}

И тогда задайте 6 блоков и они будут с одинаковой шириной.

Выглядеть это будет так:
.navigation ul li a{
background: none repeat scroll 0 0 transparent;
color: #0A0A16;
display: block;
font-size: 16px;
font-weight: bold;
height: 36px;
margin: 0;
padding: 25px 8px 0;
text-transform: capitalize;
width: 120px;/*ваша ширина*/
}
Microsoft, Apple и Google являются лидерами в сфере технологий. И эта гонка технологий расскажет нам о том, куда мы идем. Последняя новинка технологий - это Windows 8 от корпорации Microsoft.
Program_use вне форума Ответить с цитированием
Старый 21.08.2012, 12:44   #3
ellays
 
Регистрация: 20.08.2012
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Program_use Посмотреть сообщение
Наверное, имелось ввиду, чтобы ширина была фиксирована, вам необходимо к .navigation ul li a{width: вставить свою ширину.}

И тогда задайте 6 блоков и они будут с одинаковой шириной.

Выглядеть это будет так:
.navigation ul li a{
background: none repeat scroll 0 0 transparent;
color: #0A0A16;
display: block;
font-size: 16px;
font-weight: bold;
height: 36px;
margin: 0;
padding: 25px 8px 0;
text-transform: capitalize;
width: 120px;/*ваша ширина*/
}
мне посоветовали сделать так
Код:

.navigation ul li {
margin:0px 0 0 0;
padding: 0;
width: ### px /* Ваша ширина */
float: left;
list-style: none;
background: none;
display: block;  
text-align: center /* Центрирование */
}
но после этого мое меню стало не горизонтальным, а вертикальным
в меню используется cufon шрифт. это имеет значение?
в чем разница между .navigation ul li a и .navigation ul li
ellays вне форума Ответить с цитированием
Старый 27.08.2012, 02:08   #4
yaskin
Форумчанин
 
Регистрация: 10.01.2011
Сообщений: 112
По умолчанию

.navigation ul li a - описываются свойства ссылки
.navigation ul li - описываются отдельные элементы списка, в которых расположены твои ссылки
Для спасибо весы слева
yaskin вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перелистывание TabbedNoteBook с горизонтального меню BukTop2009 Помощь студентам 1 06.06.2012 21:20
Создать меню из 4 пунктов Zzoyberg Помощь студентам 2 28.12.2011 16:27
центрирование горизонтального выпадающего меню deface2k9 HTML и CSS 2 23.08.2010 16:21
Фиксированная ширина таблицы tolikman Microsoft Office Word 1 15.01.2010 16:32
Копирование пунктов меню Altera Общие вопросы Delphi 4 28.07.2009 07:45