Навигация неправильно расположена в html / css - PullRequest
Новая
       3

Навигация неправильно расположена в html / css

3 голосов
/ 23 июля 2010

Я кодирую свое новое портфолио, и навигация по нему находится не в том месте, и я не могу понять, почему.в линию с линиями по бокам, но вместо этого он перемещается вправо и вниз, и я не могу понять, почему он это сделал.

body {
  padding: 0px;
  margin: 0px;
  background:url('images/Background.png');
  font-family: century gothic;
}

#nav a {
  text-decoration: none;
  color: white;
}

#container {
  margin: 0 auto;
  width: 960px;
}

#logo {
  background:url('images/Logo.png');
  height: 340px;
  width: 524px;
  float: left;
  margin-left: 0px;  <!--check-->
}

#nav {
  background:url('images/Nav_Container.png');
  width: 427px;
  height: 33px;
  float: right;
  margin-top: 100px;
  padding: 0px;

}

#main_nav li {
  list-style: none;
  display: inline;
  font: 18px century gothic, sans-serif;
  color: white;
  margin-right: 18px;
  padding: 0px;
}
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>MozazDesign Portfolio</title>
  </head>

  <body>

    <div id="container">
      <div id="header">
        <div id="logo">

        </div><!--end logo-->

        <div id="nav">
          <ul id="main_nav">
            <li><a href="#">home</a></li>
            <li><a href="#">about me</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
          </ul><!--end main nav-->
        </div><!--end nav-->
      </div><!--end header-->
    </div>
  </body>
</html>

Ответы [ 4 ]

2 голосов
/ 23 июля 2010

Что происходит, когда вы уменьшаете маржу справа: 17px;

Полагаю, к вашему последнему элементу вы должны добавить меньше margin-right

1 голос
/ 23 июля 2010

Вы должны попытаться уменьшить "font-size: 18px;"и / или "margin-right: 17px;"пока текст не будет расположен так, как вы хотите.

[обновление] Также попробуйте добавить 

#main_nav { float: left; }

, чтобы лучше контролировать положение ваших ссылок.[Обновление]

0 голосов
/ 24 июля 2010

Скорее всего, отступы / поля по умолчанию для ваших элементов ul и li. Попробуйте обнулить все в вашем CSS, как это, и затем медленно добавлять его обратно, пока не найдете точку, где разбивается макет меню: 

#main_nav,
#main_nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#main_nav li { 
    display: inline;
    margin-right: 17px; /* lower this value and see if that fixes the layout */
    font: 18px century gothic, sans-serif; /* specify a fall back font that's at least the same type as century gothic */
    color: white;        
}
0 голосов
/ 23 июля 2010

Вместо добавления margin-right, попробуйте вставить невидимые разделители, например так: 

  <div id="nav">
   <ul id="main_nav">
    <li><a href="#">home</a></li>
    <li>&nbsp;</li>
    <li><a href="#">about me</a></li>
    <li>&nbsp;</li>
    <li><a href="#">gallery</a></li>
    <li>&nbsp;</li>
    <li><a href="#">blog</a></li>
    <li>&nbsp;</li>
    <li><a href="#">contact</a></li>
   </ul><!--end main nav-->
  </div><!--end nav-->

Таким образом, вы не получите ненужный интервал в конце. Дайте проставочные имена классов, если хотите, и устанавливайте их размер, пока они не станут правильными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...