CSS : 오버랩없이 왼쪽으로 떠있는 객체로

Question

나는 네비게이션 창을 만들고 있는데,이 네비게이션 바의 버튼을 페이지의 너비의 75 % 만 차지하는 네비게이션 div 내부의 왼쪽으로 띄우고 싶습니다. 중간에있다.

내가 HTML/CSS의 측면에서있다 :

<div id="header"> 
      <div id="navbar"> 
       <div id="navbar-left"> 
        <div id="navbar-button1" class="navbar-button"> 
         <div class="navbar-button-text">Page1</div> 
        </div> 
        <div id="navbar-button2" class="navbar-button"> 
         <div class="navbar-button-text">Page2</div> 
          <div class="navbar-dropdown"> 
           <div class="navbar-dropdown-button">Page2</div> 
           <div class="navbar-dropdown-button">SPage2</div> 
           <div class="navbar-dropdown-button">SPage3</div> 
           <div class="navbar-dropdown-button">SPage4</div> 
          </div> 
        </div> 
        <div id="navbar-button3" class="navbar-button"> 
         <div class="navbar-button-text">Page3</div> 
        </div> 
       </div> 
       <div id="navbar-right"></div> 
      </div> 
     </div> 

body { 
    background-color: #E5E5E5; 
    margin: 0em; 
    width: 100%; 
    height: 100%; 
} 

#main { 
    background-color: #E3E3E3; 
    width: 75%; 
    margin: auto; 
    height: 100%; 
    top: 0; 
    position: absolute; 
    left: 12.5%; 
} 

#header{ 
    background-color: #66CDAA; 
    height: 3em; 
    width: 100%; 
    left: 0; 
    top: 0; 
    position: fixed; 
    z-index: 998; 
} 

#navbar{ 
    background-color: #66CDAA; 
    height: 3em; 
    width: 75%; 
    top: 0; 
    position: fixed; 
    z-index: 999; 
} 

.right{ 
    border-left: 0.1em solid #E5E5E5; 
    height: 100%; 
    width: 25%; 
    float: right; 
    z-index: 3; 
} 

#footer{ 
    height: 5em; 
    clear: both; 
    z-index: 3; 
} 

.navbar-button{ 
    height: 3em; 
    line-height: 3em; 
    width: 25%; 
    z-index: 1; 
    position: fixed; 
} 

.navbar-button-text{ 
    text-align: center; 
    font-size: 1.3em; 
    font-family: 'bebas_neueregular'; 
    color: #E3E3E3; 
    font-weight: bold; 
} 

.navbar-dropdown-button{ 
    text-align: center; 
    font-size: 1.3em; 
    font-family: 'bebas_neueregular'; 
    color: #E5E5E5; 
    font-weight: bold; 
} 

.navbar-dropdown{ 
    position: absolute; 
    top:0%; 
    width:100%; 
    background-color: #57a58a; 
    opacity: 0; 
} 

#navbar-button1{ 
    left: 12.5%; 
    float: left; 
} 
#navbar-button1:hover{ 
    background-color: #57a58a; 
} 

#navbar-button2{ 
    left: 37.5%; 
} 

#navbar-button2:hover .navbar-dropdown{ 
    opacity: 1; 
} 

#navbar-button3{ 
    left: 62.5%; 

} 

#navbar-button3:hover{ 
    background-color: #57a58a; 
} 

그 설명하면서 :

• 나는 폭의 75 %와의 높이의 100 %를 커버 (주)는 DIV가 페이지
• DIV (주) 내에 DIV (머리글)가 있지만 머리글의 너비는 같지만 높이는 3em입니다.
• 현재 크기가없는 두 개의 DIV (navbar-left 및 navbar-right)가 있습니다.
• 저는 DIV (navbar-left) 안에 3 개의 DIV (navbar-button1, navbar-button2 및 navbar-button3)가 있습니다. 각각의 너비는 1/4입니다.

내가 원하는 것은 :

• 내가 세 된 DIV (네비게이션 바-단추 1, 네비게이션 바-단추 2 및 네비게이션 바-단추 3가)하여 DIV의 내부에 남아 부동 원하는 (네비게이션 바 왼쪽).

그 일을 할 때 발생하는 두 가지 문제 :

• 대신 사업부에 떠있는, 그들은이 페이지의 왼쪽에 모든 방법을 떴다.
• 다른 하나의 옆에 떠 다니는 대신에 다른 쪽 위에 떠있었습니다.

도와 주시겠습니까?

감사

Answer 1

는 지금까지 내가 바로 지금 보는 바와 같이, 당신의 CSS에 당신은 :이 네비게이션 바 - button1을 왼쪽 떠 있지만, 다른 두 부동되지

#navbar-button1 { 
    left: 12.5%; 
    float: left; 
} 

#navbar-button2 { 
    left: 37.5%; 
} 

#navbar-button3 { 
    left: 62.5%; 
} 

. 각각은 navbar-button 클래스를 통해 float: left; 속성을가집니다. 이것은 그들이 원하는대로 나란히 서서 만들 것입니다.

#header{ 
    background-color: #66CDAA; 
    height: 3em; 
    width: 100%; 
    left: 0; 
    top: 0; 
    position: fixed; 
    z-index: 998; 
} 

#navbar{ 
    background-color: #66CDAA; 
    height: 3em; 
    width: 75%; 
    top: 0; 
    position: fixed; 
    z-index: 999; 
} 

버튼은 navbar div를 가운데에 배치하거나 이동하지 않으므로 전체 페이지 왼쪽에있는 것처럼 보입니다. 실제로 div 안에 떠 다니지만 머리글과 navbar div는 같은 위치에 있습니다.