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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 28.09.2011, 12:58   #1
AlienNation
Пользователь
 
Регистрация: 22.08.2010
Сообщений: 85
По умолчанию Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?

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


на всякий случай вот листинг:
html:
Код HTML:
<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:
Код HTML:
/* СТИЛЬНОЕ МЕНЮ 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/jquery:
Код HTML:
 $(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 я не могу.
AlienNation вне форума Ответить с цитированием
Старый 28.09.2011, 13:03   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
white-space:nowrap;
текст без переноса.
п.с. Я бы использовал таблицу
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 28.09.2011, 13:17   #3
AlienNation
Пользователь
 
Регистрация: 22.08.2010
Сообщений: 85
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Код:
white-space:nowrap;
текст без переноса.
п.с. Я бы использовал таблицу
спасибо Naive, я ж знал, забыл просто, вот я дизайнер...
AlienNation вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при двойном клике мышью не вылетало сервис-меню ? platinum355 HTML и CSS 3 29.06.2011 09:26
Как сделать так, чтобы верхнее меню читалось на русском языке? net_net HTML и CSS 2 07.02.2011 16:07
TreeView как сделать, чтобы попап-меню выпадало для определенных ветвей? KWN, lnc Помощь студентам 11 08.03.2009 01:01
TreeView как сделать, чтобы попап-меню выпадало для определенных ветвей? KWN, lnc Помощь студентам 4 03.03.2009 17:04
Меню с Items в виде набора Bitmap (как меню редактирования в Word'е) chandrasecar Мультимедиа в Delphi 7 14.01.2009 09:20