Центрирование навигационной панели внутри контейнера - PullRequest
Новая
       4

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

1 голос
/ 15 февраля 2012

Я новичок в CSS, и нам было поручено создать простой веб-сайт, я решил создать простой веб-сайт, посвященный Аврил Лавин (пожалуйста, не судите меня), все идет хорошо, мой контейнерный 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>

Ответы [ 2 ]

2 голосов
/ 15 февраля 2012

Контейнер 600px и панель навигации 625px. Ваша панель навигации больше контейнера, поэтому она пробивает контейнер. Свойство переполнения по умолчанию установлено в видимое, поэтому вы все еще можете его увидеть. Попробуйте изменить ширину панели навигации, чтобы она была меньше, чем поле содержимого вашего контейнера. Вот некоторая информация о блочной модели .

1 голос
/ 28 мая 2012 
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;
}

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

...