Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?

@Schtrich · Регистрация: 13.08.2010

Студворк — интернет-сервис помощи студентам

вот менюшка (live-code): http://jsfiddle.net/Stasonix/gPbxC/

на всякий случай вот листинг:

HTML5
1
2
3
4
5
6
7
8
9
<ul id="navigation">
 <li class="home"><a href=""><div>Home</div></a></li>
 <li class="about"><a href=""><div>About</div></a></li>
 <li class="search"><a href=""><div>Search</div></a></li>
 <li class="photos"><a href="http://udruga.500mb.net/menu.php" target="_blank"><div>menu jquery</div></a></li>
  <li class="rssfeed"><a href="http://narod.ru/disk/26054239001/paralax-slider.rar.html"><div>PARALAX</div></a></li>
  <li class="podcasts"><a href=""><div>Podcasts</div></a></li>
  <li class="contact"><a href=""><div>Contact</div></a></li>
     </ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* СТИЛЬНОЕ МЕНЮ CODROPS */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    list-style: none;
    z-index:999999;
    width:100%;
    
}
ul#navigation li {
    width: 13.9%;
    display:inline;
    float:left;  
    height: 100%;    
    margin-left: 0.4%;
    
}
ul#navigation li a {
    display: block;
    float:left;
    width: 99%;
    height: 3%;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align: center;
    padding-top:85%;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    
    overflow: hidden;
    
}
ul#navigation li a:hover{
     background-color: black; /* #CAE3F2 */
}
ul#navigation li a div{
    letter-spacing:2px;
    font-size:14px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
    font-weight: bold;
    margin-bottom: 6%;
    overflow: hidden;
    
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-79%'
                    },d+=150);
                });
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-5%'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-79%'
                    },200);
                }
            );
            });

В блоке где прописано JQuery при стягивании-расстягивании блока текст перелазит на новую строчку, что значительно портит всю картину, я пробовал overflow:hidden; но оно тут до лампочки, как этого избежать?

п.с. сайт заточен под резину, так что менять проценты на px я не могу.

@Alorian · 28.09.2011, 14:49

Зачем вообще указывать ширину для пунктов меню? Они все должны быть одинаковыми?

@Vicont · 28.09.2011, 19:11

Чтобы текст "menu jquery" не переносился на новую строку, нужно сделать его цельным, с помощью неразрывного пробела(   ) :

HTML5
1
<div>menu&nbsp;jquery</div>

P.S. Нужно поставить минимальную ширину пунктов меню.

Vovan-VE · 29.09.2011, 16:12

Сообщение от Vicont

Чтобы текст "menu jquery" не переносился на новую строку, нужно сделать

нужно сделать ему

CSS
1
white-space:nowrap;

и не забыть указать правильный !doctype , чтобы работало в IE.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	28.09.2011, 14:49
	Зачем вообще указывать ширину для пунктов меню? Они все должны быть одинаковыми? 0