CSS div 질문드립니다
본문
간단한 메인페이지를 만들어봤는데요
크롬에서는 원하는대로 나오는데 익스에서는 엉망으로 나오네요...
잘못된 부분이나 고칠점을 알려주실수 있을까요?ㅠㅠ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="normalize.css" />
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face {font-family:COUTURE-Bold; src:url(COUTURE-Bold.ttf);}
* { margin: auto; padding: 0px; border: 0px; font-family: Nanum Gothic; }
ul { line-height: 160% }
h1 { line-height: 120%; font-family: COUTURE-Bold; }
h3 { line-height: 120%; font-family: }
body {
background: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
.menu {
width: 150px;
background-color: #000000;
font-size: 13px;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
}
#menu {
position: fixed;
top: 100px;
left: 10px;
padding: 0px 0px 0px 0px;
}
#logo {
font-family: COUTURE-Bold;
font-size: 35px;
color: #FFFFFF;
position: fixed;
left: 20px;
top: 15px;
margin-left: 0px;
}
#info {
font-size: 11px;
width: 200px;
position: fixed;
left: 10px;
bottom: 10px;
}
#menu1 {
position: relative;
top: 0px;
}
#menu2 {
position: relative;
top: 10px;
}
#menu3 {
position: relative;
top: 20px;
}
.btn_content {
display: block;
width: 360px;
border-style : solid;
border-width : 1px;
color: #000;
font-family: "Georgia";
font-weight : 700;
font-style: italic;
font-size : 12px;
text-align : center;
padding: 15px 0px;
margin-top: 30px;
}
.articles {
width: 400px;
text-align : center;
position: fixed;
left: 50%;
top: 30%;
color: #000;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="logo">로고</div>
<div id="menu">
<div class="menu" id="menu1">
<ul>BOUTIQUE</ul>
<ul>NOTICE</ul>
<ul>STATUS</ul>
<ul>HELP</ul>
</div>
<div class="menu" id="menu2">
<ul>DIARY</ul>
<ul>FACEBOOK</ul>
</div>
<div class="menu" id="menu3">
<ul>AGREEMENT</ul>
<ul>PRIVACY POLICY</ul>
<ul>GUIDE</ul>
</div>
</div>
<div class="menu" id="info">
<ul>내용1</ul>
<ul>내용2</ul>
<ul>내용3</ul>
<ul>내용4</ul>
<ul>내용5</ul>
<ul>내용6</ul>
<ul>내용7</ul>
<ul style="color: #777;">내용8</ul>
</div>
<div class="articles">
<h1>문구1</h1>
<h3>문구2</h3>
<a href="#" class="btn_content" data-dynamic="link">문구3</a>
</div>
</body>
</html>
답변 3
doctype이 없어서 브라우저가 지멋대로 해석을 해서 그렇습니다.
doctype 선언하시고 크로스브라우징 하시면 됩니다.
감사합니다 doctype 하나 쓰니 거의 원하는데로 나와요!
#menu {
width: 0;
float: left;
position: fixed;
top: 100px;
left: 10px;
padding: 0px 0px 0px 0px;
}
이렇게 고쳤는데 width와 float가 잘못된거같은데 일단 이렇게 하면 익스에서도 원하는데로 나옵니다
더 좋게 웹표준에 맞게 고치려면 어떻게해야할지..ㅠㅠ
doctype 선언도 하시고 덧붙여서 ul태그에 li가 빠진듯
네 빠졌네요ㅠㅠ 만약 그냥쓰면 문제가 되는건가요? li를 쓰면 앞에 땡떙이? 가 나와서요ㅜㅜ
<style>
ul{list-style:none}
</style>
스타일에 추가 해주세요
답변을 작성하시기 전에 로그인 해주세요.
