모든 해상도의 CSS

Question

나는 이미 1680x1050 해상도로 웹 사이트를 디자인했습니다. 그러나, 나는 대부분 항상 위치를 사용하기 때문에 : 절대, 디자인은 지금 너무 엉망입니다 (CSS에서 새로운). 그래서 디자인을 다시 시작하기 전에 전문적인 도움을 요청했습니다. 내가 사용하려고 할 방법은 페이지의 모든 내용을 가운데

<div style="width:760px;margin: 0 auto;"> 
...all contents 
</div> 

있는 페이지의 모든 내용을 containin div 요소를 만들고있다. 그런 다음, 내 오래된 내용을 usign position으로 재 설계 할 것입니다. 왼쪽 : .. px; and top : ... px; 내가 그 너비를 생각하지 않기 때문에 나는 이것을 묻고있다 : 760px; margin : 0 auto; (왼쪽에 아무 것도 남겨놓지 않고 요소에 대해이 메서드를 사용하면 : px 또는 top : ..px 요소가 제대로 가운데에 맞춰지지 않음). 나는 나의 방법을 잘 말해주기를 바란다 : 중심에서 모든 요소를 ​​얻고 그들이 있어야하는 곳으로 배치하라. 내가 어떻게 할 수 있니? 나는이 div가 그것을하고 있다고 생각하지 않는다 : (

참고 : 나는 원래의 디자인에 적절한 빈 공간을 남겼다. 1680x1050의 해상도에서 왼쪽과 오른쪽으로 약 300px를 사용하지 않았다. 내 디자인 alrady가 보인다. 화면 1680x1050의 중심.

Answer 1

1. 을 결코 화면 스타일은
2. 이 position:absolute을 피하려고 크기없는 경우 당신이 position:absolute 필요하면 당신은
3. , % 값을 시도 할 수 이제까지

왜 사용하지 않습니까?

이미 언급 한 바와 같이

1. 는, 그것이
2. 요소는 일반 문서 흐름에서 촬영 브라우저에서 렌더링 속도가 느려집니다 코드
3. 을 망쳐 놨 -> 동적 콘텐츠는 레이아웃 중단 될 수 있습니다

당신이 정말로 position:absolute 필요하면 당신은 요소의 중심을하기 위해 다음을 수행 할 수 있습니다

1. 로 명시를 width 및 margin:0 auto;

2. 정의하는 모든 그런 식으로, 오프셋 값 :

   element{ position:absolute; left:10px; right:10px; top: 10px; }

이 좌우 10px 상단의 "여백"로 요소를 배치하고 그것을 동적 높이를 줄 것이다 .

Answer 2

사용 : 상대

<div style="width:760px;margin: 0 auto;"> 
    <div style="position: absolute; width: 760px;">...all contents</div> 
</div> 

절대 요소의 위치는 가장 즉각적인 된 절대 위치가 부모 요소가 하나도없는 경우,이 문서를 기준으로합니다. 그러나 인라인 스타일도 사용하지 마십시오. 정적 해상도를 중심으로 디자인하는 것도 좋지 않습니다.