При увеличении масштаба разваливается меню.

skygazer · March 2, 2012

Подскажите пожалуйста как это поправить. Ширина пунктов меню не указана.

Searcher · March 2, 2012

Можно задать min-width, но вариантов много, все зависит от того как вы реализовали меню.

Вобщем, код в студию.

Switch74 · March 2, 2012

обычно такое бывает, когда пункты меню стыкуются float:left например и сумма их width не влазит в родителя, попробуйте увеличить min-width для родителя меню

skygazer · March 2, 2012

<ul class="menu">
			<li class="create"><a href="">Создание сайта</a></li>
			<li class="disign"><a href="">Веб-дизайн</a></li>
			<li class="html"><a href="">(X)HTML</a></li>
			<li class="css"><a href="">CSS</a></li>
			<li><a href="">CMS</a></li>
			<li><a href="">Веб-программирование</a></li>
			<li><a href="">Ресурсы</a></li>
			<li><a href="">Статьи</a></li>
			<li class="forum"><a href="">Форум</a></li>
		</ul>

#wrapper{
min-height:100%;
width:980px;
min-width:980px;
margin:0 auto;}
.container{}
#header, #content, #footer{
width:100%;}
#header{
background:url(img/gradient-bg.png) left -2px repeat-x;
position:relative;
overflow:hidden;}


.menu{
margin-top:86px;}
ul.menu li{
float:left;
padding:4px 22px;
height:19px;
background:#ddd;}
ul.menu li.create{
width:98px;}
ul.menu li.disign{
width:73px;}
ul.menu li.html{
width:54px;}
ul.menu li.css{
width:26px;}
ul.menu li.cms{
width:29px;}
ul.menu li.prog{
width:148px;}
.menu li a{
color:#000;
text-decoration:none;
font-family:Arial;
font-size:80%;
display:block;}

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

Searcher · March 2, 2012

не забывайте, что тут паддинги прибавляются к указанной вами ширине каждого li

skygazer · March 2, 2012

Да я знаю, ширина указана только для текста.

Searcher · March 2, 2012

Из всего этого не понятно, что там происходит. Может сможете выложить на хостинг?

skygazer · March 2, 2012

http://skygazer.alwaysdata.net/

Searcher · March 2, 2012

это происходит из-за масштабирования шрифта

но у вас изначально подход неправильный

фон надо вешать на ul

задавать ширину li, а не a

а вообще, если вы хотите распределить равномерно по ширине, то либо таблица, либо вот как-то как Макс по-моему давал пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                        font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
                }

                ul {
                        list-style: none;
                        text-align: justify;
                        text-justify: newspaper;
                        line-height: 0;
                }

                li {
                        display: -moz-inline-box;
                        display: inline-block;
                        vertical-align:top;
                        text-align: center;
                        background: red;
                }

                li.helper {
                        width: 100%;
                        background: none;
                }
        </style>

        <!--[if lte IE 7]>
                <style type="text/css">
                        ul {
                                width: 99.9%;
                                text-align-last: justify;
                        }

                        li {
                                display: inline;
                        }

                        li.helper {
                                display: none;
                        }
                </style>
        <![endif]-->
</head>

<body>

        <ul>
                <li>home</li>
                <li>about us</li>
                <li>contacts</li>
                <li>some other link</li>
                <li class="helper"></li>
        </ul>

</body>
</html>

Sign In

При увеличении масштаба разваливается меню.

Question

skygazer

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

skygazer

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information