자바스크립트로 만들어진 메뉴가 그누보드에서는 깨져보입니다 정보
자바스크립트로 만들어진 메뉴가 그누보드에서는 깨져보입니다본문
사용한 상단은 http://1rent.net/_head2.php 이구요
이걸 그누보드에서 불러오기 하면 http://1rent.net/bbs/board.php?bo_table=reservation 이렇게 깨져보입니다
그누보드에 들어있던 index.php 에서는 제대로 구현이 되는데 그누보드에서는 메뉴가 깨져보이는 이유를 알고싶습니다 ㅠㅠ
혹시나 스타일때문인가 싶어 index2.php에 쓰인 스타일을 아래에 써봅니다..
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<style type="text/css">
body {
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #333;
margin: 0;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #fff;
}
.container {width: 1000px; margin: 0 auto; align: center;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 1000px;
list-style: none;
position: relative;
font-size: 1.2em;
background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 30; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #214e94 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
float: center;
padding: 15px 0;
position: absolute;
left: 0px; top:35px;
display: none;
width: 1000px;
background: #214e94;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
이걸 그누보드에서 불러오기 하면 http://1rent.net/bbs/board.php?bo_table=reservation 이렇게 깨져보입니다
그누보드에 들어있던 index.php 에서는 제대로 구현이 되는데 그누보드에서는 메뉴가 깨져보이는 이유를 알고싶습니다 ㅠㅠ
혹시나 스타일때문인가 싶어 index2.php에 쓰인 스타일을 아래에 써봅니다..
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<style type="text/css">
body {
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #333;
margin: 0;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #fff;
}
.container {width: 1000px; margin: 0 auto; align: center;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 1000px;
list-style: none;
position: relative;
font-size: 1.2em;
background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 30; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #214e94 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
float: center;
padding: 15px 0;
position: absolute;
left: 0px; top:35px;
display: none;
width: 1000px;
background: #214e94;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
댓글 전체
네. http://1rent.net/style.css 이 css 가 다 씹히고 있어서 정확하게는 css conflict 이라고 하죠.
깨지고 있습니다. 충돌나는 부분을 하나하나 해소해 주는 방법밖에 없습니다. 일명 노가다.
깨지고 있습니다. 충돌나는 부분을 하나하나 해소해 주는 방법밖에 없습니다. 일명 노가다.
헉....이름이 겹치는게 없는것같은데도 충돌이 나나요? ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
board.php 에도 body 에, font 등에 적용되는 css rule 이 있고, style.css 에도 중복으로 body에 font 등에 적용되는 css rule 이 있습니다.
body, td, p, input, button, textarea, select, .c1 { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }
이렇게 되면 브라우저가 어느 css rule 에 맞춰 페이지를 적용해야 하는지 모르게 되고, 레이아웃이 깨지게 됩니다.
수정방법은 여러가지가 있습니다. !important 남발, css rule 인라인으로 피신시키기, 등등....
간단하니까 금방 수정하실 수 있겠네요...
http://sir.co.kr/bbs/board.php?bo_table=pg_html
body, td, p, input, button, textarea, select, .c1 { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }
이렇게 되면 브라우저가 어느 css rule 에 맞춰 페이지를 적용해야 하는지 모르게 되고, 레이아웃이 깨지게 됩니다.
수정방법은 여러가지가 있습니다. !important 남발, css rule 인라인으로 피신시키기, 등등....
간단하니까 금방 수정하실 수 있겠네요...
http://sir.co.kr/bbs/board.php?bo_table=pg_html