arm136

Смешение текста в меню при масштабировании

Рекомендуемые сообщения

arm136    0

Смешение текста  в меню при масштабировании

текст смешается   при  уменьшении размера страницы  в(opera,safari,chrome,IE)

пытался зафиксировать его  задав размер  списка  (.menu ul width 700px  height 42px )  и его элементов   ,

но выходит кривовато .прошу критики/совета .спасибо!)))

 
<div class="menu">
<ul class="menuul">
<li><a href="<?php echo $home; ?>">Главная</a></li>
<li><a href="<?php echo $category; ?>">Каталог товаров</a></li>
<li><a href="/">Доставка и Оплата</a></li>
<li><a href="/">Контакты</a></li>
<li><a href="/">Гарантии</a></li>
<li><a href="/">Помощь</a></li>
</ul>
</div>






.menu {
width: 980px; 
height: 44px; 
background: #565656;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


.menu ul {
padding: 0;  
margin: 0 auto;
border: 0;
}
.menu ul:before {
content: '';
display: block;
}
#menu ul:after {
content: '';
display: table;
clear: both;
}
/* menuul */
.menu li {  
    display: inline;  
    float: left;  
    border-right: 1px solid #000000;
    border-left: 1px solid #4f4f4f;
}
.menuul  a {
    display: block;
    float: left;
    font-family:Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;   
    text-decoration: none; 
     padding: 12px 20px;
    text-shadow: 1px 1px 0px #283744; 
}
.menuul li a {  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
} 
.menu li:hover {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
.menu li:first-child {
border-left: none;
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
arm136    0

решено.закройте тему

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    195

еще одна тема ни о чем. Делитесь решением.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
arm136    0

еще одна тема ни о чем. Делитесь решением.

решение простое  

 ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block;
width: 147px;
}
Изменено пользователем AlexFisher
code

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    195

Простое, сложное - кому-то поможет. 

Спасибо за участие.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу