안녕하세요? 팔공산님... 여러가지로 도움 많이 주셔서 많이 배우고 있습니다.
새로운 레이아웃으로 홈을 개편하면서 잘 안되는 것이 있어서 이렇게 질문 드립니다.
어떻게 설명을 해야할지 모르겠는데... 우선 그림을 보면요,
그림에서 빨갛게 테두린친 부분이 언어선택과 요일,날자 부분인데요.
이렇게 언어선택에 몇가지 기능을 더 넣어서 하나의 한개의 부분으로 취급하고 있습니다.
그런데 이 언어선택 부분이 해상도에 따라 위치가 왔다 갔다 변하는 것을 알고
수정하려 애쓰다 이렇게 질문드립니다.
포지션을 정확히 적용한 것 같은데요. 도대체 어디가 잘못되었는지...휴~~~
제홈에 오셔서 익스플로러 크기를 줄여보면(해상도 변경 대신에...) 저 언어선택 부분이 왔다
갔다 위치가 변하는 것을 아실 수 있을 것입니다. 와서 보시면 알 수 있을 거에요...
바쁘신데 이렇게 또 질문 드려 죄송합니다. 팔공산님은 금방 아실 거 같아 고민하다 이렇게
질문 드립니다. 부탁 드립니다...
댓글 10
-
참 깜박했네요.
홈피 정말로 예쁘게 잘 꾸몄셨네요.
그림을 그리시는 분이라 역시 디자인이 깨끗합니다.
저도 애기 엄마가 그림을 전공해서 상업적인 홈피 만들때는 자문을 구합니다.
역시 무뇌한과 프로는 색깔하나를 선택하더라도 틀리더군요.
그리고 재미있는 자바스크립트도 덤으로 알게 되었네요.
그런데 요일을 가르키는 이미지중 수요일과 목요일은 저의 해킹(?) 실력으로는 못받았습니다.ㅎㅎ -
팔공산님이 가르쳐주신대로 해도 안되네요.
어제 이것때문에 새벽까지 밤 설쳤는데...ㅜㅜ
제 실력으로는 역시 안되네요. 무슨 방법이 있을텐데...
이거 어떻하죠? 이젠 팔공산님께 의지할 밖에..
언어부분은 삭제했어요. 우상단 부분에 뭔가 넣어야 하는데,
허전해보여요. 이것만 해결되면 리뉴얼 다하는데, 이것때문에 발목이 잡혔네요.
참, 애기엄마가 그림을 그리신다니 반갑네요...
가르쳐주신데로 수정해본 css파일 내용
/* Site Layout - Logo */
#top { position:relative; width:980px; height:75px; }
#header { position:relative; width:980px; height:70px; margin-bottom: 5px; background:url(../images/default/bgHeader.gif) no-repeat right top; z-index:99;}
#top logo { position:absolute; margin:0; top:5px; left:8px; overflow:hidden; white-space:nowrap;}
#top .week { color:#f60; position:absolute; top:5px; right:20px; overflow:hidden; clear:both; }
#top .join { position:absolute; margin:0; top:64px; right:16px; height:20px; overflow:hidden; white-space:nowrap; }#language { position:absolute; top:25px; right:200px; overflow:hidden; clear:both; z-index:100;}
#language strong { color:#ffffff; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:25px; right:0px; display:none; border:1px solid #b23628; background:#de4332;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#ffffff; text-decoration:none;}
#language ul li a:hover { background:#bc4032;} -
홈페이지 가보니 이젠 잘 되는데요.
-
네... 어찌 어찌 해서 해결했어요... 정말 감사합니다.
언어선택부분 top값을 마이너스로 주었더니 고정되네요. 아직 왜 그런지 이해는 못하고...
정말 이것때문에 어제 잠도 설치고 이제 졸리네요. 주말 망치고... ㅜ.ㅜ
요일 스크립트 소스 아래 남기고 갑니다. (그리고 위 질문중 소스는 삭제할께요)
그리고 요일이미지도 압축파일을 놓고 갈께요.
이미지만 따로 홈 위치에 맞게 크기도 조절해서 제작해서 사용하신다면 좋을 겁니다.<요일스크립트 소스>
<script language="javascript">
today = new Date();
day = today.getDay();
arday = new Array(
"./layouts/naver_style_main/images/default/sun.gif",
"./layouts/naver_style_main/images/default/mon.gif",
"./layouts/naver_style_main/images/default/tue.gif",
"./layouts/naver_style_main/images/default/wedness.gif",
"./layouts/naver_style_main/images/default/thrus.gif",
"./layouts/naver_style_main/images/default/fri.gif",
"./layouts/naver_style_main/images/default/satur.gif"
);
document.write("<img src='" + arday[day] + "' />");
</script>
<요일이미지파일> week.zip -
저는 따로 분리해 내니 잘 작동됩니다. 그리고 님의 위의 소스보니 조금은 이상하군요.
왜 #top .week 라고 넣었나요. top은 빼서야 될 것 같은데요.<div id="language">
<strong title="ko">한국어</strong> <a href="#selectLang" onclick="showHide('selectLang');return false;"><img src="/layouts/naver_style_main/images/default/buttonLang.gif" alt="Select Language" width="87" height="15" /></a>
<ul id="selectLang">
<li><a href="#" onclick="doChangeLangType('ko');return false;">한국어</a></li>
<li><a href="#" onclick="doChangeLangType('en');return false;">English</a></li>
<li><a href="#" onclick="doChangeLangType('zh-CN');return false;">中文</a></li>
<li><a href="#" onclick="doChangeLangType('jp');return false;">日本語</a></li>
<li><a href="#" onclick="doChangeLangType('es');return false;">Español</a></li>
<li><a href="#" onclick="doChangeLangType('ru');return false;">Русский</a></li>
<li><a href="#" onclick="doChangeLangType('fr');return false;">Français</a></li>
</ul><!-- 언어선택옆 추가 메뉴 삽입 -->
<a href="#" onclick="doChangeLangType('en');return false;"><img src="/layouts/naver_style_main/images/default/en.png"></a>
<a href="#" onclick="doChangeLangType('jp');return false;"><img src="/layouts/naver_style_main/images/default/jp.png"></a>
<a href="#" onclick="doChangeLangType('zh-CN');return false;"> <img src="/layouts/naver_style_main/images/default/cn.png"></a>
<a href="#" onclick="doChangeLangType('es');return false;"><img src="/layouts/naver_style_main/images/default/spain.jpg"></a>
</div><!-- 요일스크립트 등 자바 출력 -->
<ul id="week">
<script>
<!--
var mydate=new Date()
var year=mydate.getYear()
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("SUN","MON","TUE","WED","THU","FRI","SAT")
var montharray=new Array("1.","2.","3.","4.","5.","6.","7.","8.","9.","10.","11.","12.")
document.write("<font color='#ff6600' face='돋음' size='2'>"+year+". "+montharray[month]+" "+daym+" / "+dayarray[day]+"</font>");
//-->
</script>
<script language="javascript">
today = new Date();
day = today.getDay();
arday = new Array(
"./layouts/naver_style_main/images/default/sun.gif",
"./layouts/naver_style_main/images/default/mon.gif",
"./layouts/naver_style_main/images/default/tue.gif",
"./layouts/naver_style_main/images/default/wedness.gif",
"./layouts/naver_style_main/images/default/thrus.gif",
"./layouts/naver_style_main/images/default/fri.gif",
"./layouts/naver_style_main/images/default/satur.gif"
);
document.write("<img src='" + arday[day] + "' />");
</script>
<br />
<script language="JavaScript">
var now = new Date();
var then = new Date("april 19,2008");
var gap = now.getTime() - then.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24));
document.write("시작일" + gap + "일째 되는 날!");
</script>
</ul>#language { position:absolute; top:0px; right:19px; z-index:100;}
#language strong { color:#ffffff; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #b23628; background:#de4332;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#ffffff; text-decoration:none;}
#language ul li a:hover { background:#bc4032;}#week { color:#f60; position:absolute; top:15px; right:0px; z-index:98;}
-
팔공산님이 사용하시는 스킨과 제가 사용하는 스킨이 달라서 그런지 알려주신데로 했는데,
역시 마찬가지로 안되네요. 그냥 top에 마이너스값 주니 되구요.
근데 마이너스값 주면 ie6에서 잘 보일지 모르겠어요. 전 비스타 써서요.
근데 css파일 알려주신데로 수정하구 나서 언어선택부분 소스를 레이아웃 어디다 붙여야
하는지 모르겠어요. 저는 로고밑에 두기도 하고, Header 밑에 두기도 하고 여기저기 다 붙여
봤는데, 다 깨지더라구요. 암튼 제로보드 원래 레이아아웃과 제가 사용하는 게 달라서
그런지 안되네요. 이 문제는 차츰 고민해봐야 할 것 같아요... -
ie6, ie7, 파폭 모두에서 정상적으로 보입니다. 근데 명언나오는 부분이 ie6에서 앞에 도트점이 보입니다.
그리고 제가 테스트한 스킨은 zbxe기본 스킨에서 했습니다.
참고로 제가 수정해서 드린 소스로 변환하시면 요일 나오는 부분의 글꼴칼라가 바뀌는지요. 만약 바뀌지 않으시면 css를 잘못 작성하신 것입니다. 그리고 ftp로 layout.html만 편집하시는 것은 아니지요, 그렇게 하면 홈피에 적용이 안됩니다. 제일 좋은 방법은 레이아웃편집에 가서 잘 작동하고 있는 지금의 소스를 모두 복사해서 layout.html에 덮어 씌우신 후 저장하시고 그 layout.html를 편집해서 올리고 레이아웃편집에서 초기화를 하시면 바로 적용됩니다.
언어 부분은 웬만하면 빼버리세요,
외국인들이 많이 들어오는 것도 아닐거고, 그렇다고 홈피전체를 외국어로 코딩하실 것도 아니면 말이죠,
그리고 진짜로 Korea, English 두 사이트를 만들어서 왔다 갔다 하게 할려면 지금의 상태로는 불가능합니다.
지금의 상태는 그냥 메뉴와 틀 몇개만 한글,영어로 변환되지 안의 내용들은 전혀 변할 수 없습니다.
한글,영어 사이트를 운영할려면 두개의 db를 가져야 하고, 한글.영어 다른 주소를 링크해야 합니다.(제로보드도 클릭해 보면 다른 사이트가 열립니다.) -
1. 제가 올려놓은 요일스크립트는 이미지로 나오는 것입니다.
월~일요일까지 모두 이미지로 했기 때문에 css와는 관련 없지 않나요?
2. layout.html은 관리자페이지에서 직접 보고 수정해서 미리보기로 확인후
저장하는 방식으로 합니다.
3. 언어부분은 빼버려도 됩니다. 그러나 우상단 부분이 비어있어서 뭔가 채우려
하는 것이구요. 언어빼고 요일스크립트만 넣어도 마찬가지에요.
어쨋든 우여곡절끝에 고정은 되었는데, 영 찝찝한거 있죠?
일단 그냥 쓸께요. 제가 지금 레이아웃을 공부하고 있는데, 나중에 실력이 향상
되면 아마 자연히 알게될꺼에요. 그때가 언제될런지... OTL
날이 많이 더운데, 건강 조심하시고 즐거운 휴일 보내세요~~~ -
마지막으로 한마디만
1. 요일중 위에 제가 올려논 이미지 보시면 날짜와 아래의 메세지는 흰색이죠,
그 부분을 말씀 드리는 것입니다. 제가 올려논 소스되로 하시면 #f60 오랜지 색으로 보여야 합니다.
그리고 지금 문제없이 잘 작동하니 그냥 사용하셔도 문제는 없을 것 같습니다.
혀나겅주님
저도 레이아웃은 코드만 본다고 오류를 판단 할 정도의 실력은 안 됩니다.
저도 설치를 해 보던지 아님 계정에 들어가서 주물럭 거려 봐야 대충 알 수 있을 정도입니다.
일단 위의 코드를 보고 말씀을 드리면
일단 언어부분과 요일선택부분을 하나로 묶지 마시고 따로 분리하세요.
그러니까, 언어부분의 div를 언어 부분에서 끝내시고 일단 언어부분을 고정하세요.
그리고 요일 선택부분을 ul로 묶어서 css에서 따로 설정을 주세요.
지금은 week에 대한 css설정 부분이 전혀 없네요.
답변이 된지를 모르겠네요, 해 보시고 안 되시면 다시 연락주시면 제가 설치를 해서 해 보던지 하겠습니다.
좋은 주말 보내세요.
layout.html 부분
<div id="language">
생략
</div>
<!-- 요일스크립트 등 자바 출력 -->
<ul id="week">
생략
</ul>
css부분 :
#language { position:absolute; top:18px; right:19px; z-index:100;}
생략
#week { color:#f60; position:absolute; top:20px; right:200px; overflow:hidden; clear:both; }