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

Всякий раз, когда я увеличиваю или уменьшаю масштаб изображения на своей странице, последний li перемещается вправо, а затем вниз. Я хочу, чтобы он оставался в том же положении, когда я увеличиваю масштаб. Я довольно новичок в html/css, и я не знаю, что я должен делать.Навигационная панель перемещается, когда я увеличиваю

<html> 
<head> 
    <title>Delta Aluminum</title> 
    <link rel=stylesheet href="/css/style.css" type="text/css"/> 
</head> 
<body> 
    <div id="page"> 
     <div id="header"> 
      <div id="logo"> 
       <a href="/"><img src="/images/logogrey.png"></a> 
      </div> 
      <div id="nav"> 
       <ul> 
        <li id="home"><a href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
        <li id="services"><a href="/services/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
        <li id="photo"><a href="/gallery/">&nbsp;&nbsp;&nbsp;Photo Gallery&nbsp;&nbsp;&nbsp;</a></li> 
        <li id="glossary"><a href="/glossary/">Glossary of Terms</a></li> 
        <li id="about"><a href="/about/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
        <li id="contact"><a href="/contact/">&nbsp;&nbsp;&nbsp;&nbsp;Contact Us&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
       </ul> 
      </div> 
     </div> 
     <div id="banner"> 
      <img src="/images/imgmain.jpg"> 
     </div> 
     <div id="content"> 
      <h2>Welcome to Delta Aluminum!</h2> 
      <h3>Professional Installation</h3> 
      <h3>Over fifteen years of experience and over 7000 homes installed in the Greater Toronto Area</h3> 
      <ul> 
       <li>Soffit and fascia (aluminum and copper)</li> 
       <li>5" and 6" eavestrough and downspouts (aluminum and copper)</li> 
       <li>Half-round eavestrough and round downspouts (aluminum and copper)</li> 
       <li>Siding (vinyl and aluminum) </li> 
       <li>Copper and metal roofs</li> 
      </ul> 
      <img src="/images/contentimg.jpg"> 
     </div> 
     <div id="footer"> 
      <p>&copy; 2012&nbsp;Delta Aluminum D Inc.</p> 
     </div> 
    </div> 
</body>

#nav{ 
    display: inline-block; 
} 
    #nav ul{ 
     margin-left:-40px; 
} 
     #nav ul li{ 
      padding: 7px 0px 12px 0px; 
      display: inline; 
     } 
      #nav ul li a{ 
       padding: 7px 30px; 
       color: #444; 
      } 
      #nav ul li a:hover{ 
       padding: 7px 30px 11px 30px; 
       background-color: white; 
       color: black; 
      } 
      #nav ul li a:active{ 
       padding: 7px 30px; 
       background-color: white; 
       color: black; 
      }

источник

2012-06-28 Anonymous

Указание ширины на #nav бы избежать обертку, как по умолчанию используется DIV будет простираться до конца окна. Также используется & nbsp; для интервала, как правило, плохая идея. Вместо этого используйте поля css или padding.

Проверьте эту статью, это может помочь вам.

http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

источник

2012-06-28 02:49:27 amsprich

Добавление ширины к #nav ничего не изменилось, он по-прежнему движется вниз, когда я просигналить. Также я попытался добавить ширину вместо , и это тоже не сработало. –

Bummer. :/Я скопировал html и css в файл, проверил его. Увеличилось, и это было похоже на то, что происходило. Вы говорите, что последний движется вправо и вниз? Не думайте, что у вас есть снимок экрана? – amsprich

Также примечание о было более полезным предложением. Я не хотел подразумевать, что это решение. – amsprich

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

ответ

Смежные вопросы