묻고답하기
웹표준 코딩 익스 질문이요!(원하는 답변이 아니에요ㅠ_ㅠ)
2012.12.23 18:24
http://sujubool.com/bbs/zboard.php?id=data
사이트 주소인데요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title></title>
<link rel="stylesheet" href="http://sujubool.com/1/style2.css" type="text/css" />
<script type='text/javascript' src="http://sujubool.com/1/java.js"></script>
<body>
<div id="top">
<div id="logo"><img src=http://sujubool.com/1/logo2.jpg></div></div>
<div id="menubg1"><div id="menubg2">
<div id="menu"><div id="menu1"><a href="http://sujubool.com/intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('notice','','http://sujubool.com/1/notice_on.jpg',1)"><img src="http://sujubool.com/1/notice_off.jpg" width="159" height="29" id="notice" border="0"></a></div>
<div id="menu2"><a href="http://sujubool.com/bbs/zboard.php?id=data" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('data','','http://sujubool.com/1/data_on.jpg',1)"><img src="http://sujubool.com/1/data_off.jpg" width="159" height="29" id="data" border="0"></a></div>
<div id="menu3"><a href="http://sujubool.com/bbs/zboard.php?id=memo" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('memo','','http://sujubool.com/1/memo_on.jpg',1)"><img src="http://sujubool.com/1/memo_off.jpg" width="159" height="29" id="memo" border="0"></a></div>
<div id="menu4"><a href="http://sujubool.com/bbs/zboard.php?id=board" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('board','','http://sujubool.com/1/board_on.jpg',1)"><img src="http://sujubool.com/1/board_off.jpg" width="159" height="29" id="board" border="0"></a></div>
<div id="menu5"><a href="http://sujubool.com/bbs/zboard.php?id=support" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('support','','http://sujubool.com/1/support_on.jpg',1)"><img src="http://sujubool.com/1/support_off.jpg" width="159" height="29" id="support" border="0"></a></div>
<div id="menu6"><a href="http://sujubool.com/bbs/zboard.php?id=master" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('master','','http://sujubool.com/1/master_on.jpg',1)"><img src="http://sujubool.com/1/master_off.jpg" width="159" height="29" id="master" border="0"></a></div>
</div></div></div></div>
<div id="middle"></div>
<div id="main">
<div id="main2">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
margin:0;
padding:0;
height: 100%;
}
#top {
background-color: #ffffff;
width: 100%;
height: 176px;
text-align:left;
border-top:6px solid #555555;
}
#logo {
background-color: #ffffff;
width: 979px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align:left;
}
#menubg1 {
background-color: #555555;
width: 100%;
height: 39px;
}
#menubg2 {
background-color: #555555;
width: 1079px;
height: 39px;
margin:0 auto;
}
#menu {
background-color: #555555;
width: 979px;
height: 29px;
margin:0 auto;
padding-top:5px;
text-align:left;
}
#menu1 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu2 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu3 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu4 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu5 {
background-color: #555555;
width: 164px;
height: 29px;
text-align:left;
float:left
}
#menu6 {
background-color: #555555;
width: 159px;
height: 29px;
text-align:left;
float:left
}
#middle {
background-color: #ffffff;
width: 100%;
height: 60px;
}
#main {
background-color: #ffffff;
width: 100%;
height: auto;
}
#main2 {
background-color: #ffffff;
width: 979px;
height: auto;
margin:0 auto;
text-align:left;
}
#middle2 {
background-color: #ffffff;
width: 100%;
height: 92px;
}
#foot2 {
background-color: #555555;
width: 100%;
height: 205px;
border-top:4px solid #4cb4b3;
}
#foot3 {
width: 979px;
height: 201px;
margin:0 auto;
text-align:left;
}
이건 코딩한 소스에요.
원래라면 #logo 부분이 정중앙으로 가야하는데 익스에서는 왼쪽에 붙어서 보이더라구요.
#logo {
background-color: #ffffff;
width: 979px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align:left;
}
css인데 어디가 잘못됐길래 혼자 왼쪽으로 가있는건지 모르겠네요^_ㅠ
고수분들 좀 알려주세요ㅠ_ㅠ
그리고 width: 979px; 부분은 밑에 게시판이 나올 부분이랑 맞춘다고 사이즈를 정한거라 이 부분 수정은 안할 생각이에요.
다른 부분도 width: 979px; 이걸로 맞춰져 있거든요.
쉽게 말하면 width: 979px; 사이즈의 div가 익스플로러에서 중앙정렬이 안된다는 말이에요.
로고 자체를 중앙정렬 하려는 게 아니구요.
밑에 카피라이트 부분도 width: 979px; 사이즈로 만들어진 건데 저건 중앙정렬이 되거든요.
http://sujubool.com/intro.html
위 주소로 보시면 아실 수 있듯이 html로 올리면 제가 원하는대로 출력이 되는데(크롬과 모바일에서도 정상으로 보입니다.)
제로보드로 출력하면 익스에서만 #logo이 왼쪽으로 붙는 이유 좀 알려주세요ㅠ_ㅠ
댓글 4
-
4b4
2012.12.23 18:47
제가 원하는 답변 아니라서요^^;;; -
되는데요;;
크롬
인터넷 익스플로러
-
4b4
2012.12.23 18:49
제가 원하는 건 그게 아니라서요ㅎ_ㅎ 그리고 크롬에서는 정상 출력되는데 익스에서만 안돼요. -
#logo {
background-color: #ffffff;
width: 979px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align: center;
}
내부 img같은 태그는 text-align에 의해서 위치가 결정됩니다.
postion 변경하지 않는 한.
-
4b4
2012.12.23 18:57
죄송한데 제 질문을 잘못 이해하신 것 같아요^_ㅠ 이미지를 중앙정렬 하고 싶다는 말이 아니라 div 자체를 중앙정렬하고 싶다는 말이에요. 크롬에서는 제가 원하는 대로 정상출력이 되고 있는데 익스에서만 div 중앙정렬이 안된다는 말이에용. -
도데체 뭘로 보고계신건지 모르겠지만 하단의 카피라이트도 정렬이 안됩니다.
그냥 width를 바꾸셔야해요.
가운데 정렬의 원리가 margin으로 좌우에 동일한 값을 줘서 정렬하는겁니다.
그런데 width가 979고 내부 컨텐츠가 left에 붙은채로 153이면 컨텐츠는 왼쪽에 보이죠.
요소검사로 살펴보면 중앙정렬은 잘 되고 있습니다.
-
4b4
2012.12.23 19:09
위에 이미지를 첨부해서 올렸으니 한번 확인해주세요!
#logo {
background-color: #ffffff;
width: 153px;
height: 176px;
position: relative ; top : -6px;
background-image: url(http://sujubool.com/1/bg.jpg);
margin:0 auto;
text-align:left;
}