질문 & 답변 게시판
![[레벨:1]](./modules/point/icons/default/1.gif "포인트:220point (61%), 레벨:1/30"){kind=icon}
original이래저래 하다가 겨우 원하는거에 비슷한 스킨 찾고,
뭔가 해보려 하다가 또 문제에 봉착하네요..
사이트 디자인이 공개로 쓸수 있게 되어 있는 곳에서,
오픈(공개용) 메인 페이지 소스(Template)를 html파일을 구해서
제로보드랑 쓰려고
head.html , foot.html 로 나눠서
제로보드에 ../head.html , ../foot.html 으로 입력하려 했는데요,
분명히 본 파일의 메인 중앙 부분의 내용 위쪽을 복사해서 head.html으로,
메인 중앙 아래의 내용을 foot.html으로 복사해서 내용 붙여넣어 파일 만들고,
default.css 라는 파일이 있길래 그 주소까지 head.html. foot.html 에 넣어줬습니다.
근데 결과는 아래 사진과 같네요.
내용에 있는 영문들은 원래 소스에 있던 글들입니다.+_+;
A . 원본 오픈 소스 페이지 화면
B. 위/아래 내용 분리하여 head.html등 만든후 제로보드에 ../head.html, ../foot.html에 넣은 화면
1.제로보드 위치가 엉뚱한데 가 있고 ,
2.메뉴의 폰트 색상
3.우측 글 위치
4.아래의 foot의 크기가 전체 사이즈가 아니고, 게시판 사이즈로...등이 달라졌네요...
왜 이렇게 될까요? ^^;
저로서는 원인을 찾기가 힘드네요....
참고로 원래 있는 페이지의 html파일 소스 올려봅니다.
파랑색 = head.html 으로 쓴 부분,
검은색 = 본문 부분이라 입력 안 한 부분 (이 위치에 제로보드를 넣어려 함)
갈색 = footer.html 로 쓴 부분
바로 아래의 href="default.css" 는 href="http://www.주소/default.css"로 바꿔 넣어주었습니다. 위치 찾아지게끔..
-------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Dark Ritual</title>
</head>
<body>
<div class="container">
<div class="header">TEST PAGE</div>
<div class="main_right">
<div class="padded">
<h1>Etiam placerat</h1>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
<h1>Maecenas</h1>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus.</p>
<h1>Lobortis</h1>
<p>Interdum nec, metus. Maecenas ornare lobortis risus. Donec mattis quam aliquam risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero <a href="index.html">varius pede</a> tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
</div>
<div class="subnav">
<h1>Something</h1>
<ul>
<li><a href="index.html">pellentesque</a></li>
<li><a href="index.html">sociis natoque</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">convallis</a></li>
</ul>
<h1>Another thing</h1>
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">sociis natoque</a></li>
</ul>
<h1>Third and last</h1>
<ul>
<li><a href="index.html">sociis natoque</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
<li><a href="index.html">consequat molestie</a></li>
</ul>
</div>
<div class="main">
<div class="padded">
<h1>Porttitor posuere</h1>
<p class="meta">October 24th, 2006 by Duis porttitor</p>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
</p>
<h1>Adipiscing</h1>
<p class="meta">September 31st, 2006 by Mauris</p>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
</div>
</div>
<div class="clearer"><span></span></div>
<div class="footer">
<span class="left">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML</a></span>
<span class="right">Template design by <a href="http://templates.arcsin.se">Arcsin</a></span>
<div class="clearer"><span></span></div>
</div>
</div>
</body>
</html>
------------------------------------------------
그리고 default.css 라고 스타일시트라고 부르나요...
이런 파일이 같이 있어서 글꼴이나 스타일을 정해주게 한 파일도 같이 있었어서
같이 넣어놨는데, 이게 문제 발생과 관련이 있는건지 몰라서 이 소스도 올려보겠습니다.
default.css 파일 소스 내용입니다.
/*#############################################################
Name: Dark Ritual
Date: 2006-11-06
Description: Tribal-style three column layout.
Author: Viktor Persson
URL: http://templates.arcsin.se
Feel free to use and modify but please provide credits.
#############################################################*/
/* standard elements */
* {
margin: 0;
padding: 0;
}
a {color: #682;}
a:hover {color: #9A6;}
body {
background: #333 url(img/bg.gif);
color: #333;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 3% 0;
}
p,ul {
padding-bottom: 1em;
}
ul {margin-left: 1.2em;}
li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}
h1 {font-size: 1.2em;}
blockquote {
background: #FFF;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
color: #333;
display: block;
font-size: 0.9em;
margin-bottom: 1.2em;
padding: 6px 12px;
}
blockquote p {padding: 3px 0;}
h1,h2,h3 {color: #994;}
/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 18px 24px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}
/* structure */
.container {
font-size: 1.2em;
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 840px;
border: 12px solid #222;
}
/* header */
.header {
float: left;
width: 640px;
background: url(img/header.jpg) no-repeat;
font: normal 2.4em Verdana,sans-serif;
line-height: 150px;
text-align: center;
}
/* structure */
.top {
background: #222;
color: #DDD;
float: left;
font: normal 1.4em Verdana;
height: 50px;
text-align: center;
width: 639px;
}
.subnav {
float: left;
width: 160px;
}
.main {
float: left;
width: 480px;
}
.main_right {
float: right;
width: 200px;
color: #CCC;
}
/* sub-navigation */
.subnav h1 {
background: #222;
color: #FFE;
font: bold 1.1em Verdana,sans-serif;
line-height: 18px;
padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
border-bottom: 1px solid #696755;
list-style: none;
}
.subnav li a {
background: #89866F;
color: #111;
display: block;
padding: 8px 0 8px 12px;
width: 148px;
text-decoration: none;
}
.subnav li a:hover {
background: #9C997C;
color: #000;
}
/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
color: #CCC;
font-size: 0.9em;
line-height: 39px;
width: 100%;
text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover {color: #FAFCB0;}
에구 스스로 해결할수 있으면 좋을텐데,
저로선 전혀 원인을 찾질 못 하겠네요...
조언 부탁드립니다.
수고하시고, 하루하루 좋은 일 많이 생기시길 (__)
![[레벨:6]](./modules/point/icons/default/6.gif "포인트:4195point (95%), 레벨:6/30"){kind=icon}
이승일870
original제로보드4 스킨 맞습니다.
http://www.zeroboard.com/?mid=zb4_skin_user&search_target=title&search_keyword=%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4&document_srl=1436036
여기 스킨 자료 원글 보시구요,
현재 스킨은 잘 작동 됩니다.
head, foot 설정으로 인한 제로보드와
원 메인html문서와의 섞임이 문제이지
제로보드와 스킨은 현재 아무 이상 없습니다..
original이 홈페이지 html소스가
제로보드4 와는 매끄럽게 연결이 안된다는 말씀이신가요?...
일부 div명령어등때문일까요?.....
스타일 시트 방식이 제로보드4와 문제인가요?
음 아쉽네요.+_+;페이지가 개인적으로 색감이나 스타일이 맘에 들었는데...
뭐가 어떻게 바뀌면 제로보드4에서 head, foot으로 설정이 될까요?
원 페이지를 좀 편집하면 되겠죠?.....우측 검은 공간을 없애면 될라나요..뭐 때문에 안되는 건지 궁금하네요.ㅠ.ㅡ
original안된다는거라도 알게 되어 다행이네요ㅠ.ㅡ 혼자 뭐 때문인지 너무 답답해만 하고 있었어서....
그럼 혹시 이 소스를 기본으로 해서 디자인을 살려서 수정을 시도할 경우,
(레이 아웃등만 원래대로 안 쓰면 되는거라는 말씀일테니..)
스타일시트등과 본 html에서 레이아웃 부분(div맞죠?)만
다르게 해서 페이지 구성하면 된다는 말씀이시죠?
^^ 답변 감사합니다~ 원래 안되는거라는거라도 알게 되니 좀 시원해집니다..
제로보드4에다 쓰시는거 아닙니다~~!!!