Центрирование навигационной панели внутри контейнера

Я новичок в CSS, и нам было поручено создать простой сайт, я решил создать простой веб-сайт, посвященный avril lavigne (пожалуйста, не судите меня), все идет хорошо, мой контейнер div всегда находится в центре, я не понимаю, почему моя панель навигации внутри моего контейнера выходит за пределы границы моего контейнера. Вот скриншотЦентрирование навигационной панели внутри контейнера

screenshot

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

Вот мои правила CSS.

body{font-size: small; background-image:url(../images/bg.gif);margin:50px 0px; padding:0px;} 
#container {width:600px; margin:0px auto;padding:15px; border:1px solid white;background-color:#fff;} 
.navbar{width:625px; height:45px;font-size: 13px;height: 22px;font-weight: bold;border: 2px dashed pink;repeat-x;opacity:0.6;} 

.button a{float:left;margin-right:50px;color: #000;text-decoration: none;text-align: center;width: 100px;height:25px;background: url(../images/nav.jpg) repeat-x;}

Вот мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Avril Lavigne</title> 
    <link rel = "stylesheet" type = "text/css" href="style/style.css"/> 
</head> 

    <body> 
    <div id = "container"> 

     <div id = "header"> 
      <img src = "images/header.jpeg"> 
     </div> 

      <div class = "navbar"> 
      <div class = "button" > <a href = "#">Home</a></div> 
      <div class = "button" > <a href = "#">Simply Avril</a></div> 
      <div class = "button" > <a href = "#">Images</a></div> 
      <div class = "button" > <a href = "#">Tour Dates</a></div>  
      </div> 

      <div id = "Content"> 
      <p id = "about"> 
       "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
       et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
       voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
       ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
       consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam 
       quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
       nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
       qui in ea voluptate velit esse quam nihil molestiae consequatur, 
       vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 
      </p>  
      </div> 


    </div> 
    </body> 
</html>

источник

2012-02-15 user962206

Контейнер 600px и навигационная панель является 625px. Ваша панель навигации больше, чем контейнер, поэтому она проходит через контейнер. Свойство переполнения по умолчанию установлено на видимое, поэтому вы все еще можете его увидеть. Попробуйте изменить ширину панели навигации меньше, чем содержимое контейнера. Here's some information on the box-model.

источник

2012-02-15 04:53:15 Akaishen

Я вижу, но как бы я положил навигационную панель в контейнер? и я хочу, чтобы моя навигационная панель начиналась в самой левой части моего контейнера, а затем вплоть до самой правой части контейнера? – user962206

Элемент уровня блока автоматически займет всю ширину своего контейнера: вам не нужно устанавливать ширину (625 пикселей). Высота вашего контейнера должна основываться на вашем контенте. По мере размещения вашего контента я добавляю 'overflow: auto;' и удаляю 'height: 45px;', это предотвращает сбой вашего контейнера. Теперь ваша ширина и высота должны основываться на содержании внутри: ваших ссылок. Кроме того, ваша панель навигации занимает полную ширину на основе ее контейнера. Если это не имеет смысла, отправьте свой HTML с помощью своего CSS, и я создам JSFiddle для вас. – Akaishen

Я уже добавил. пожалуйста, перепроверьте мой вопрос – user962206

body { 
    font-size: small; 
    background-image: url(../images/bg.gif); 
    margin: 50px 0px; 
    padding: 0px; 
} 

#container { 
    width: 600px; 
    margin: 0px auto; 
    padding: 15px; 
    border: 1px solid white; 
    background-color: #fff; 
} 

.navbar { 
    width: 625px; 
    height: 45px; 
    font-size: 13px; 
    height: 22px; 
    font-weight: bold; 
    border: 2px dashed pink; 
    repeat-x;opacity:0.6; 
}

Ваш контейнер 600px, а ваш навигатор - 625px, вам нужно, чтобы ваш навигатор находился внутри вашего контейнера. Измените размер на 600 пикселей для вашего навигатора.

источник

2012-05-27 21:18:57 Jess

Центрирование навигационной панели внутри контейнера

ответ

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