css 관련 질문입니다 정보
css 관련 질문입니다
첨부파일
본문
크롬에서는 윗쪽 이미지처럼 정상적으로 출력이 되는데
익스에서는 아래쪽 이미지처럼 비정상적으로 출력되네요 ㅠㅠ
혹시 익스에서 정상적으로 출력될 방법이 없을까요?
댓글 전체
이미지가 고정이 아니라 내부의 넓이값에 따라 유동적으로 변해야 하거든요 흙흙~ ㅠ.ㅠ
상하좌우 다 변해야하는건가요?? ㅠ
좌우만 변하면 되면 http://dochis.woobi.co.kr/frm/web2.html 이렇게 해도 될텐데 말이죠;; ㅠㅠ
아쉽지만 css 로만 해야해서요 ㅠ.ㅠ
관심가져주셔서 감사합니다 도치즈님 ^^
관심가져주셔서 감사합니다 도치즈님 ^^
스타일이 많이 중첩이 되지만 이런식이면 어떨런지요..
<style type="text/css">
.frm {float:left;}
.frm_content {position:relative;padding-right:10px;padding-bottom:10px;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;overflow:hidden}
</style>
<div class="frm">
<div class="frm_content">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
</div>
아니면 간단하게 이런식..ㅎㅎ
<div style="float:left;border:1px solid #ff9bca;padding:5px;background:#ffeff7">
<div style="border:1px solid #ffcbe3;padding:3px;background:#fff">
<div style="width:300px;height:300px;background-color:#f66;"></div>
</div>
</div>
꼭 배경이미지를 사용하는 경우라면 아니겠지만..ㅎ
<style type="text/css">
.frm {float:left;}
.frm_content {position:relative;padding-right:10px;padding-bottom:10px;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;overflow:hidden}
</style>
<div class="frm">
<div class="frm_content">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
</div>
아니면 간단하게 이런식..ㅎㅎ
<div style="float:left;border:1px solid #ff9bca;padding:5px;background:#ffeff7">
<div style="border:1px solid #ffcbe3;padding:3px;background:#fff">
<div style="width:300px;height:300px;background-color:#f66;"></div>
</div>
</div>
꼭 배경이미지를 사용하는 경우라면 아니겠지만..ㅎ
우왕~ 이렇게 하니까 되네요
새벽비님 정말 감사합니다 ^^
새벽비님 정말 감사합니다 ^^
다행이네요^^
더 줄여봤습니다
<style type="text/css">
.frm {float:left;position:relative;padding :0 10px 10px 0;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;}
</style>
<div class="frm">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
더 줄여봤습니다
<style type="text/css">
.frm {float:left;position:relative;padding :0 10px 10px 0;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;}
</style>
<div class="frm">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
와.. 진짜 대단하시네요..
이것땜시 엄청 고생할뻔했는데 덕분에 두발뻗고 잘 수 있겠네요
완젼 감사합니다 ^0^
이것땜시 엄청 고생할뻔했는데 덕분에 두발뻗고 잘 수 있겠네요
완젼 감사합니다 ^0^
