Проблемы с горизонтальной навигационной панелью - PullRequest
Новая
       1

Проблемы с горизонтальной навигационной панелью

3 голосов
/ 19 декабря 2011

В настоящее время я перерабатываю веб-сайт, которым управляю, и у меня возникают проблемы с панелью навигации. Он отлично работает с высоким разрешением (в настоящее время я использую 1440x900), но когда я переключаюсь на более низкое разрешение, последние пару пунктов меню отключаются.

Вот HTML: 

     <body>

<div id="page-wrap">
    <div id="inside">


        <div id="header">
            <img src="LogoGood.gif" alt="LogoGood" width="591" height="224" />



        <div id="nav">
<ul>

    <li><a href="index.html">Home</a></li>
    <li><a href="writings.html">Writing</a></li>
    <li><NOBR><a href="media.html">Media Relations</a></NOBR></li>
    <li><a href="events.html">Events</a></li>
    <li><NOBR><a href="proofreading.html">Proofreading</a><NOBR></li>
    <li><NOBR><a href="work.html">Writing Workshops</a></NOBR></li>
    <li><a href="publications.html">Publications</a></li>
    <li><a href="About.html">Working With You</a></li>
    <li><a href="aboutkathy.html">About Kathy Mayer</a></li>
    <li><a href="contact.html">Contact Kathy</a></li>
</ul>

и css: 

    #page-wrap {
background: beige;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
    margin: 50px 10px 0px 10px;
    padding-bottom: 10px;
}

    #main-content {
background: beige;
padding-left: 50px;
padding-top: 80px;

height: 400px;}


    #header {
padding-top: 5px;
background: beige;
text-align: center;}

    #nav {
float: left;
width: 100%;
background: beige;
height: 80px;
overflow: hidden;
padding: 0;
margin: 10px 0 0 0;
border-bottom: 1px solid rgb(255,23,28);}

    #nav ul{
text-align: center;
float: left;
list-style: none;
padding-left: 13px;
margin: auto;}

    #nav li {
float: left;
list-style: none;}


    #nav li a {
display: block;
padding: 8px 8px;
border-right: 1px solid rgb(255,23,28);}

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 21 декабря 2011

Я считаю, что главной проблемой здесь является количество пунктов меню и заданная высота. Предметы есть, но высота #nav равна 80px. Для более широких экранов это не должно быть проблемой, но для экранов с меньшим разрешением меню будет отключено, особенно когда высота уже определена. Одна из них - наличие множества элементов на одной панели навигации, безусловно, увеличивает ее общую ширину. Наличие длинных имен ссылок также помогает увеличить ширину каждой li (например, «О Кэти Майер» по сравнению с «О» или «О себе» и «Связаться с Кэти» по сравнению с «Контактом»).

Один из способов избавиться от этой проблемы - создать две отдельные панели навигации. У вас может быть «Домой», «О себе / о Кэти Майер» и «Связаться / связаться с Кэти» в правом верхнем углу страницы, делая ее отдельной навигационной панелью, а остальные оставляя на другой навигационной панели, поэтому что у вас будет две разные навигационные панели.

Другим способом было бы создание вертикальной панели навигации, которая устранит всю проблему.

Еще одна идея, которую я только что получил: вы можете также использовать подменю для элементов с похожими названиями, например, включить «Написание», «Корректура» и «Семинары» в одном подменю.

Надеюсь, я помог.

0 голосов
/ 19 декабря 2011

Вы установили #page-wrap на min-width:780px - но ваше меню шире.

http://jsfiddle.net/bbcmF/

Попробуйте большую минимальную ширину: http://jsfiddle.net/bbcmF/1/ (или уменьшите меню)

...