테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

CSS div 질문드립니다

영튜 11년 전 조회 10,580
답변 3
목록
간단한 메인페이지를 만들어봤는데요
크롬에서는 원하는대로 나오는데 익스에서는 엉망으로 나오네요...
잘못된 부분이나 고칠점을 알려주실수 있을까요?ㅠㅠ
</div>
<div><div><html></div>
<div><head></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><title></title></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><link rel="stylesheet" href="normalize.css" /></div>
<div><style></div>
<div>@import url(<a href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css);" target="_blank" rel="noopener noreferrer">http://fonts.googleapis.com/earlyaccess/nanumgothic.css);</a></div>
<div>@font-face {font-family:COUTURE-Bold; src:url(COUTURE-Bold.ttf);}</div>
<div>* { margin: auto; padding: 0px; border: 0px; font-family: Nanum Gothic; }</div>
<div>ul { line-height: 160% }</div>
<div>h1 { line-height: 120%; font-family: COUTURE-Bold; }</div>
<div>h3 { line-height: 120%; font-family: }</div>
<div>body {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background: url("bg.jpg");</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background-repeat: no-repeat;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background-size: cover;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background-position: 50% 50%;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background-attachment: fixed;</div>
<div>}</div>
<div>.menu {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>width: 150px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>background-color: #000000;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-size: 13px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>color: #FFFFFF;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>padding: 10px 10px 10px 10px;</div>
<div>}</div>
<div>#menu {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: fixed;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 100px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>left: 10px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>padding: 0px 0px 0px 0px;</div>
<div>}</div>
<div>#logo {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-family: COUTURE-Bold;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-size: 35px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>color: #FFFFFF;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: fixed;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>left: 20px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 15px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>margin-left: 0px;</div>
<div>}</div>
<div>#info {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-size: 11px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>width: 200px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: fixed;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>left: 10px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>bottom: 10px;</div>
<div>}</div>
<div>#menu1 {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: relative;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 0px;</div>
<div>}</div>
<div>#menu2 {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: relative;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 10px;</div>
<div>}</div>
<div>#menu3 {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: relative;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 20px;</div>
<div>}</div>
<div>.btn_content {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>display: block;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>width: 360px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>border-style : solid;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>border-width : 1px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>color: #000;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-family: "Georgia";</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-weight : 700;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-style: italic;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>font-size : 12px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>text-align : center;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>padding: 15px 0px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>margin-top: 30px;</div>
<div>}</div>
<div>.articles {</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>width: 400px;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>text-align : center;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>position: fixed;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>left: 50%;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>top: 30%;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>color: #000;</div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span>margin-left: -200px;</div>
<div>}</div>
<div></style></div>
<div></head></div>
<div>
</div>
<div><body></div>
<div><div id="logo">로고</div></div>
<div><div id="menu"></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><div class="menu" id="menu1"></div>
<div>    <span class="Apple-tab-span" style="white-space: pre">	</span><ul>BOUTIQUE</ul></div>
<div>        <ul>NOTICE</ul></div>
<div>        <ul>STATUS</ul></div>
<div>        <ul>HELP</ul></div>
<div>    </div></div>
<div>    <div class="menu" id="menu2"></div>
<div>    <span class="Apple-tab-span" style="white-space: pre">	</span><ul>DIARY</ul></div>
<div>        <ul>FACEBOOK</ul></div>
<div>    </div></div>
<div>    <div class="menu" id="menu3"></div>
<div>    <span class="Apple-tab-span" style="white-space: pre">	</span><ul>AGREEMENT</ul></div>
<div>    <span class="Apple-tab-span" style="white-space: pre">	</span><ul>PRIVACY POLICY</ul></div>
<div>    <span class="Apple-tab-span" style="white-space: pre">	</span><ul>GUIDE</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span></div></div>
<div></div></div>
<div><div class="menu" id="info"></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용1</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용2</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용3</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용4</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용5</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용6</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul>내용7</ul></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><ul style="color: #777;">내용8</ul></div>
<div></div></div>
<div><div class="articles"></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><h1>문구1</h1></div>
<div><span class="Apple-tab-span" style="white-space: pre">	</span><h3>문구2</h3></div>
<div>    <a href="#" class="btn_content" data-dynamic="link">문구3</a></div>
<div></div></div>
<div>
</div>
<div></body></div>
<div></html></div></div>
<div>
#html5 #html #크로스브라우징 #css
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

새
새벽비
11년 전
스타일에 추가 해주세요
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

새
새벽비
11년 전
doctype 선언도 하시고 덧붙여서 ul태그에 li가 빠진듯
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
영튜
11년 전
네 빠졌네요ㅠㅠ 만약 그냥쓰면 문제가 되는건가요? li를 쓰면 앞에 땡떙이? 가 나와서요ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

모
모노폴리
11년 전
doctype이 없어서 브라우저가 지멋대로 해석을 해서 그렇습니다.
doctype 선언하시고 크로스브라우징 하시면 됩니다.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
영튜
11년 전
감사합니다 doctype 하나 쓰니 거의 원하는데로 나와요!

#menu {
width: 0;
float: left;
position: fixed;
top: 100px;
left: 10px;
padding: 0px 0px 0px 0px;
}

이렇게 고쳤는데 width와 float가 잘못된거같은데 일단 이렇게 하면 익스에서도 원하는데로 나옵니다

더 좋게 웹표준에 맞게 고치려면 어떻게해야할지..ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인