HTML/CSS : 960보다 큰 그리드 콘텐츠

Question

960 Grid System 및 container_16 형식을 사용하고 있습니다. 웬일인지 나의 컨테이너 중의 1 대는 나머지 것보다 약간 크다. 이건 내 풍수를 죽이고있어. 몇 픽셀

가 실시간 미리보기가 http://rcnhca.org.uk/sites/first_steps/에서 볼 수

, 공지 방법에 빵 부스러기가 맨 위에 가서 더 잘 이외의 다른 요소 :

여기 오류를 강조?

유죄 요소는 다음과 같은 마크 업이 있습니다

<div class="container_16"> 
       <div class="grid_16" id="breadcrumbs"> 

        <a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a> 
        <ul id="parent" class="grid_15 omega"> 
        <li><a href="http://rcnhca.org.uk/sites/first_steps/">Select a topic</a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li></ul></li>      </ul> 
       </div> 

       <div id="supplements" class="grid_16"> 
        <div class="left"> 
         <a href="#" class="button alpha"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/book-icon.png" alt="book icon">View competencies checklist</a> 
        </div> 
        <div class="right"> 
         <a href="#" class="button alpha bold"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png" alt="rcn icon">Join the RCN</a> 
         <a href="#" class="button omega">Reasons to joins</a> 

        </div> 
       </div> 
      </div> 

을 그리고 CSS의 :

#breadcrumbs { 
    display: block; 
    position: relative; 
    z-index: 4; 
    height: 39px; 
    padding-bottom: 3px; 
    background: #ffffff; 
    border: 0px solid; 
    border-left: #3a90a7 2px solid; 
    border-right: #3a90a7 2px solid; 
    border-bottom: #3a90a7 2px solid; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

#breadcrumbs ul { 
    list-style: none; 
    list-style-image: none; 
    margin: 0; 
} 

#breadcrumbs #home{ 
    display: block; 
    height: 39px; 
    width: 60px; 
    float: left; 
    background-image: url(library/images/home_icon.png); 
    background-repeat: no-repeat; 
    background-position: 19px center; 
    text-indent: -999em; 
} 

#breadcrumbs ul#parent { 
    display: block; 
    height: 39px; 
    float: right; 
    right: 3px; 
    position: relative; 
    background: #f38630; 
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229; 
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229; 
    box-shadow: inset 0px -2px 0px 0px #cf7229; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

#breadcrumbs ul#parent li { 
    position: relative; 
    height: 39px; 
    float: left; 
    min-width: 1px; /* required to fix Opera bug */ 
    padding: 0 47px 0 15px; 
    background-image: url(library/images/breadcrumb_seperator.png); 
    background-repeat: no-repeat; 
    background-position: right; 
    line-height: 39px; 
    zoom: 1; 
} 

#breadcrumbs ul#parent li a { 
    display: block; 
    height: 42px; 
    position: relative; 
    font-size: 15px; 
    font-weight:900; 
    color: #ffffff; 
    text-decoration: none; 
    text-shadow: 0px 2px 0px #cf7229; 
} 

#breadcrumbs ul li a:visited { 
    color: #ffffff; 
} 
#breadcrumbs ul#parent li:first-child ul { 
    left: -5px; 
} 
#breadcrumbs ul#parent li ul { 
    position: absolute; 
    z-index: 9998; 
    left: -28px; 
    top: 42px; 
    background: #ffffff; 
    border-left: #3a90a7 2px solid; 
    border-right: #3a90a7 2px solid; 
    border-bottom: #3a90a7 2px solid; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    padding: 0 3px 0 3px; 
    list-style-position: outside; 
    min-width: 200px; 
    width: auto; 
    -webkit-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5); 
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5); 
} 

.js #breadcrumbs ul#parent li ul { 
    display:none; 
} 

.no-js #breadcrumbs ul#parent li ul { 
    left: -999em; 
} 

#breadcrumbs ul#parent li ul li { 
    float: none; 
    display: block; 
    position: relative; 
    height: 26px; 
    margin-bottom: 3px; 
    padding: 0 15px; 
    background-image: url(library/images/arrow-icon.png); 
    background-position: -25px 50%; 
    background-repeat: no-repeat; 
    background-color: #738793; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    line-height: 26px; 
    white-space: nowrap; 
    zoom: 1; 
} 

#breadcrumbs ul#parent li ul li a{ 
    display: block; 
    width: auto; 
    color: #ffffff; 
    text-decoration: none; 
    text-shadow: none; 
    font-weight: 100; 
} 

#breadcrumbs ul#parent li ul li.active, #breadcrumbs ul#parent li ul li:hover{ 
    background-color: #3393b5; 
} 

#breadcrumbs ul#parent li ul li.active, .no-js #breadcrumbs ul#parent li ul li:hover{ 
    background-position: 0px 50%; 
    text-indent: 10px; 
} 

.no-js #breadcrumbs ul#parent li:hover ul, .no-js #breadcrumbs ul#parent li:focus ul { 
    left: -5px; 
} 

사람이 저 모양으로 채찍을 도와 드릴까요?

Answer 1

#breadcrumbs에 국경이있는 4px 너비가 추가 되었기 때문입니다.

border-left: #3a90a7 2px solid; 
border-right: #3a90a7 2px solid;`. 

grid_16 실제로 대신 의도 940px의 944px, 따라서 차이가있다.

마크 업을 다시 조정해야합니다.

<div class="grid_16"> 
<div id="breadcrumbs"> 
<!-- etc --> 
</div> 
</div> 

당신은 또한 당신의 home 버튼의 크기를 조정해야합니다. 클래스를 grid_1 alpha으로 지정하고 CSS에서 width:54px을 제거하십시오. 좋은되어야합니다