css 에 관하여 질문올립니다. 정보
css 에 관하여 질문올립니다.
본문
레이어를 800px로 하고자 할때
wdith:780px; padding:10px; 이렇게 지정하면 정확하게 800px 로 표현되잖아요..
안쪽으로 10px 씩 줄여가면서...
암튼 전 계속 이렇게 작업했거든요...
근데 이상하게 파폭에선 원래대로 먹히는데 익스6에선 10px이 안으로 접어들어요...
실제사용너비는 760px이 된다는거죠...
border 도 마찬가지구요...
css에 안쪽 바깥쪽 설정부분이 있나요?
도와주세요....
댓글 전체
웹브라우저마다 표현해내는 방식이 틀려요.
그래서 핵을 사용하셔야 하는데 _width:800px; << 이걸 추가해주셔야 되요.
검색해보시면 더 많은 정보를 얻으실 수 있을거에요.
그래서 핵을 사용하셔야 하는데 _width:800px; << 이걸 추가해주셔야 되요.
검색해보시면 더 많은 정보를 얻으실 수 있을거에요.
답변 감사합니다..
근데 잘안되네요.._ 넣어으면 파폭에선 왈~
근데 잘안되네요.._ 넣어으면 파폭에선 왈~
아~...width:780px 과 _wdith:800px을 함께 넣으란 예기예요?
그럼 앞으로 이런경우 전부이렇게 처리해야 된다면....ㅠㅠ
css 앞에서 설정이 필요치 않을까요
그럼 앞으로 이런경우 전부이렇게 처리해야 된다면....ㅠㅠ
css 앞에서 설정이 필요치 않을까요
패딩과 고정폭,고정높이가 함께 들어간다면 그렇게 처리해주셔야 되요.
하시다 보면 브라우져마다 차이가 계속 생길거에요.
처음 작업부터 핵을쓰시지 마시고 핵을 안쓰는 쪽으로 크로스브라우징하신다음,
엘모님이 지금 겪으신 처리불가능한 부분에만 사용해주시는게 좋습니다. ^^
하시다보면 고정폭,고정높이와 border가 함께쓰이면 계산방식이 또 틀려지므로
많이 해보시고 많이 찾아보시면 빨리 감잡으실거에요.
하시다 보면 브라우져마다 차이가 계속 생길거에요.
처음 작업부터 핵을쓰시지 마시고 핵을 안쓰는 쪽으로 크로스브라우징하신다음,
엘모님이 지금 겪으신 처리불가능한 부분에만 사용해주시는게 좋습니다. ^^
하시다보면 고정폭,고정높이와 border가 함께쓰이면 계산방식이 또 틀려지므로
많이 해보시고 많이 찾아보시면 빨리 감잡으실거에요.
소프트님 잘 주무셧나요?
언제 답변 올라오나 밤샛습니다.( 머 이것저것 하다보니까...ㅎ)
문제는 어떤경우에 이렇게 되는지 모르겟습니다.
DOCTYPE문제인지...여러가지로 바꿔바도 소용없고....
언제 답변 올라오나 밤샛습니다.( 머 이것저것 하다보니까...ㅎ)
문제는 어떤경우에 이렇게 되는지 모르겟습니다.
DOCTYPE문제인지...여러가지로 바꿔바도 소용없고....
호곡. ㅠㅠ 잠자고 일보고 이제 컴터 앞에 앉네요. ㅠㅠ
문제는 해결하셨나요? 아직 못하신거면
소스 주시면 수정해 드릴수도 있는데.. 쪽지 주세요. ^^;
문제는 해결하셨나요? 아직 못하신거면
소스 주시면 수정해 드릴수도 있는데.. 쪽지 주세요. ^^;
너비가 지정되었을 때 padding, margin, border는 너비를 증가시키는 요인입니다.
해당 값을 고려하여 너비를 지정하시거나, 끼워넣는 요소를 만들어야합니다.
해당 값을 고려하여 너비를 지정하시거나, 끼워넣는 요소를 만들어야합니다.
근데요 지금 문제는 저 세가지속성들이 너비를 잡아먹는 요인이 돼버린겁니다...
예를들어 800px에서 border:10px주면 총너비는 820px이 돼야 할텐데...
그냥 800유지하고 실제사용 너비는 780px 이란겁니다.
예를들어 800px에서 border:10px주면 총너비는 820px이 돼야 할텐데...
그냥 800유지하고 실제사용 너비는 780px 이란겁니다.
그럼 820px 너비의 div 안에, 테두리 10px 짜리 div를 넣으시면 됩니다.
<div style="width: 820px; margin: 0 auto;">
<div style="border: 10px solid #eee">
내용
</div>
</div>
<div style="width: 820px; margin: 0 auto;">
<div style="border: 10px solid #eee">
내용
</div>
</div>
아래와 같이 한 번 해보시겠어요?
<style type="text/css">
div#container{width:800px;text-align:center;background:#888888;padding:10px 0 10px 0;}
div.contents{width:780px;margin:0 auto 0 auto;background:#e1e1e1;}
</style>
<!-- 가로가 800px인 밖 DIV -->
<div id="container">
<!-- contents 안쪽의 내용 -->
<div class="contents">
내용
</div>
<!-- //contents 안쪽의 내용 -->
</div>
<!-- //가로가 800px인 밖 DIV -->
<style type="text/css">
div#container{width:800px;text-align:center;background:#888888;padding:10px 0 10px 0;}
div.contents{width:780px;margin:0 auto 0 auto;background:#e1e1e1;}
</style>
<!-- 가로가 800px인 밖 DIV -->
<div id="container">
<!-- contents 안쪽의 내용 -->
<div class="contents">
내용
</div>
<!-- //contents 안쪽의 내용 -->
</div>
<!-- //가로가 800px인 밖 DIV -->
답변해준 분들 모두 감사드립니다.
많은 도움 되였습니다. (--) (__)
많은 도움 되였습니다. (--) (__)