사업부가 중심 문제

Question

나는 누군가가 나를 도울 수 나는이 권리를하고 있어요 것을 ...

내가 HTML, 년의 경험을 통해 CSS와 거의 함께 모두에 비교적 새로운 오전 희망

이 첫 번째 웹 사이트 인 나는 손으로 코딩하고있다 - 나의 이전의 시도는 Wordpress를 사용하고 있었다.

어쨌든, 나는 가능한 한 자세하게이 게시물을 만들려고 노력한다 ... 여기에 우리가 간다! :)

나는 래퍼의 ID로 내 메인 div의 중심에 놓으려고합니다. 내 문제는 내 컴퓨터의 해상도 또는 내 브라우저의 확대/축소 수준에 관계없이 margin: 10px auto;을 완벽하게 센터링 할 때입니다. 그런 다음 브라우저 창 크기를 조정하면 래퍼 div가 내비게이션 막대 위로 이동하면서 시작됩니다. 래퍼 div와 navbar에 모두 적용되는 CSS 규칙이 있습니다. 나는 margin: 10px auto 제거하고 margin: 10px 250px을 사용하여 얻을 때 지금

#wrapper { 
    width: 850px; 
    margin: 10px auto; 
    padding: 10px; 
    background: white; 
} 

#nav { 
    padding: 5px; 
    position: fixed; 
    left: 35px; 
    top: 250px; 
} 

는, 사업부 내 해상도와 브라우저 줌 거의 센터입니다,하지만 난 축소 할 때 왼쪽으로 전체 페이지를 이동하지만 내 창을 다시 크기 조정 문제가 해결되었습니다 ....

어떤 도움이나 조언을 환영합니다!

Answer 1

콘텐츠가 사이드 바의 왼쪽에 배치 된 내비게이션 위를 흐르고 있다고 생각합니까? 지금처럼 래퍼 사업부로 :이 경우 단지 margin-left: 200px (탐색의 폭 변화 200 픽셀 참고) : 추가

#wrapper { 
    width: 850px; 
    margin: 10px auto; 
    padding: 10px; 
    background: white; 
    margin-left: 100px; 
} 

편집 :

내 원래의 대답은 래퍼 사업부를 중심으로하지 않습니다 . #wrapper 안에 다른 div를 추가하고 모든 배경 스타일을 추가하는 등의 작업을 수행 할 수 있습니다. 그러면 래퍼 div의 중심을 margin:auto으로 지정하고 왼쪽 패딩을 추가하여 탐색 오버플로를 방지 할 수 있습니다.

JSfiddle

CSS

#wrapper { 
    margin: 10px auto; 
    padding-left: 100px; 
    width: 850px; 
} 

#wrapper .content{  
    padding: 10px; 
    background: white; 
} 

#nav { 
    padding: 5px; 
    position: fixed; 
    left: 35px; 
    top: 250px; 
} 

HTML

<div id="wrapper"> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p> 
    </div> 
</div> 

<div id="nav"> 
    navigation 
</div> 

이 전체 페이지에 영향을 미칠 것입니다하지만 또 다른 해결책은 또한, 몸에 패딩을 추가 할 수있다 (즉, 바닥 글 및 머리말 등)

body{padding-left: 200px;}