쇼핑몰페이지 오늘본상품의 위치를 1000밖으로 옮기고 싶습니다.
본문
답변 2
#stv_list {
position:absolute;
right: -100px;
width:88px;
border:1px solid #e9e9e9;
background:#fff
}
정말 감사합니다. 한가지 더 물어 볼게요.
커뮤니티 홈 사이트사이즈를 바꾸고 메인의 aside의 여백을 좀 주려니까 페이지가 깨지는데
전체사이즈는 상단레이아웃과 중간레이아웃 모두 변경해야 겠지요?
aside의 좌 여백은 ?
제가 margin:0 0 0 -1px 과 padding:15px 16px 15px 15px 의 의미를 잘 몰라서요. 순서가 어떻게 되는지를
/* 상단 레이아웃 */
#hd {z-index:4;position:relative;min-width:970px;background:#fff}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;margin:0 auto;padding:26px 0;width:970px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
/* 중간 레이아웃 */
#wrapper {z-index:5;margin:0 auto;width:970px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9;zoom:1}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9;background:#fff}
#container {z-index:4;position:relative;float:left;padding:15px 16px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border-right:1px solid #dde4e9;background:#fff;font-size:1em;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}
모든위치관련 속성은 위,오른쪽,아래,왼쪽 순서입니다.
함축형으로 위+아래,좌+우 이런식으로 두개만 쓸수도있고
위,좌+우,아래 이렇게 쓸수도있습니다.
더호감 님께서 margin, padding 축약형에 대해서 잘 설명해주셨네요 ㅎ
content 와 aside 의 합이 늘리려는 사이즈와 딱 맞아야 해요.
padding 과 margin값은 width 값에 영향을 주거든요.
올려주신 소스보면
#aside 의 width는 210px
#container의 width는 728px 하지만
padding: 15px 16px 15px 15px 입니다.
: 이걸 풀어 쓰면 -> padding-top: 15px; padding-right: 16px; padding-bottom: 15px; padding-left: 15px 이 됩니다.
#container 의 width 값에 padding-left, padding-right 값을 더해줍니다.
: padding은 안쪽으로 컨텐츠를 미는 역할을 하고 그 밀어준 만큼 width와 height가 증가합니다. 즉, 패딩 값만큼 width와 height가 늘어난다고 생각하시면 되요.
더하게 되면
최종 #container의 width값은 728px + 16px + 15px 이죠? 759px 이 됩니다.
그럼~ #aside와 #container 의 width 합이 전체 문서의 width 값이 되는거죠
210px + 759px = 969px 이 되는겁니다.
아마 깨지는 이유는(#aside는 제대로 위치하는데 #container 가 내려가는건가요?) width 값이 맞지 않아서 그럴 수도 있어요. 이 #aside와 #container의 합을 #wapper의 width 값에 넣어주셔야 해요~
감사합니다.
훌륭한 조언 감사드립니다
화이팅하세요 ㅎㅎ!
