Jump to content
Sign in to follow this  
arm136

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

Recommended Posts

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

текст смешается   при  уменьшении размера страницы  в(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;
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block;
width: 147px;
}
Edited by AlexFisher
code

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.