CSS - 위치 지정

a. 이미지 (960x7) b. div (너비 : 960, 안쪽 여백 : 10)CSS - 위치 지정

위로부터 50px되도록 (a) 위치를 지정하고 싶습니다. 나는 공간이없는 (a) 바로 아래에 위치하도록 (b) 위치를 지정하려고합니다.

내 CSS는 다음과 같습니다

@charset "utf-8"; 
* {margin:0;padding:0;} 
body {background-color:#999;} 
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;} 
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

내 HTML은 다음과 같습니다 나는 회색 바탕에 둥근 가장자리와 흰색 컨테이너를 만들려고 해요

<body> 
<div class="pagetop" /> 
<div class="page"> 
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p> 
</div>

. 어떻게하면 간단하고 지능적으로이 작업을 수행 할 수 있습니까? 둥근 모서리에 대한이 질문에 밖으로

출처

2009-07-15 Anonymous

확인 :

CSS Rounded corners

그리고 객체의 위치에 대한

, 나는 이런 식으로 갈 것 :

topimage { 
    position: absolute; 
    top: 50px; 
    text-algin: center; 
}

출처

2009-07-15 18:09:02

약간의 오타 :'text-algin' ='text-align'. 아마도 'margin : 50px auto 0 auto'가 더 좋을 것입니다. – Eric

없이 요소를 넣어 두 이미지 사이에 여백이 있으면 이미지의 맨 아래쪽 여백을 0으로 설정합니다.

margin: 50px auto 0;

(0이 아닌 측정에 대해서는 단위 (예 : px)를 지정해야합니다.)

배경 이미지는 크기가 가장 큰 요소를 제공하지 않으므로 일치시킬 너비와 높이를 지정해야합니다 이미지의 크기 높이가 일반 문자보다 작 으면 Internet Explorer가 요소를 한 문자 줄 높이로 유지하지 못하도록하려면 (예 : overflow: hidden;을 사용하여 내용이 요소의 크기에 영향을 미치지 않도록 유지해야 함)

width: 960px; height: 10px; overflow: hidden;

는 20 개 픽셀 좁아 page 요소를 확인해야하므로 패딩은 요소의 크기에 추가됩니다

padding: 10px; width: 940px;

출처

2009-07-15 18:10:11 Guffa

고맙습니다. 나는 측정 단위를 지정하는 것을 잊었고 내가 설정 한 모든 것이 무시당하는 이유를 알 수 없었다. –

하여 둥근 모서리 이미지는 30 픽셀로 30 픽셀 높은, .pagetop 설정 높이를하는 경우 상단에 50px의 여백을 추가하고 배경 이미지의 상단을 50px로 설정합니다.

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;} 
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

출처

2009-07-15 18:46:00 Emily

CSS - 위치 지정

답변

관련 문제