KLDP 초기화면 구성 변경

권순선의 이미지

현재 이곳 KLDP BBS 의 상단을 보시면 아시겠지만, 주황색 공지사항 박스가 오른쪽으로 치우쳐져 있습니다. 그건 원래 의도했던 바이니 상관 없는데 글자마저 오른쪽으로 치우쳐져 있어서 왼쪽 부분이 좀 이상하게 여백이 많이 남습니다. 왼쪽의 글자 여백을 없애고 딱 맞는 크기가 되게 하려면 어떻게 해야 하는지요? (이 페이지의 html 소스를 봐 주세요.)

그리고 만약 저 박스에 공지사항이 두 줄일 경우에는 박스 안에서 글자는 왼쪽으로 치우치게 하되 역시 박스 크기는 긴 줄 기준으로 딱 맞는 크기가 되게 하려면 어떻게 해야 하는지요?

세번째 질문은, http://kldp.org/test.php 를 우선 봐 주십시오.

IE로 볼 경우 최상단 우측의 | KLDP? | 참여하기 | .... 부분이 위로 붕 떠 있는데 그 반면에 firefox로 볼 경우는 최상단 좌측의 [KLDP] 글자가 들어있는 박스가 아래와 겹칩니다.

제가 원하는 것은, firefox에서 [KLDP] 박스가 겹치지 않으면서 우측의 | KLDP? | 참여하기 | ... 부분은 아래로 치우치게 하는 것입니다. 어디를 고쳐야 하는지요?

p.s. 일단 KLDP 초기화면 개편은 현재 http://kldp.org/test.php 와 같은 모습으로 개편하고자 합니다. 지난번에 공모전을 통해서 응모를 받았던 화면들은 현재 화면들과 구성이나 색상이 많이 달라서 사용자들이 또다시 거부감을 느낄 수 있을 것 같다는 의견이 있어 제가 현재 구성을 기본으로 다시 만들었습니다. 공모전에 참여해 주신 분들께는 개인적으로 죄송하게 생각하고, 대신 다음에 시간이 되면 참여해 주신 분들의 디자인을 쿠키 등의 방법을 사용하여 테마로 선택할 수 있도록 초기화면 인터페이스를 개선하도록 하겠습니다.

File attachments: 
첨부파일 크기
Image icon kldpbbs.PNG27.81 KB
Image icon snapshot5.png132.72 KB
Image icon snapshot4.png275.13 KB
Image icon front.gif2.25 MB
파일 kldpx.diff5.32 KB
파일 testkldp.tgz5.98 KB
Binary Data newkldp.tar.gz3.94 KB
Image icon kldp_viewby_Opera75.png56.27 KB
Image icon kldp_error.jpg129.53 KB
Image icon kldp_mozilla.jpg122.33 KB
Plain text icon newkldp.css.txt2.25 KB
관리자 주제: 

댓글

랜덤여신의 이미지

일단 1번에 대해서는,

268줄의 <div style="background-color: #ffcc66; bord...

여기의 style 에 text-align: left; 를 추가시키면 될 듯 하구요...

2번, 3번에 대해서는 이 글의 답변에서 배우고 싶군요... 죄송합니다. :oops:

권순선의 이미지

인클루드 wrote:
일단 1번에 대해서는,

268줄의 <div style="background-color: #ffcc66; bord...

여기의 style 에 text-align: left; 를 추가시키면 될 듯 하구요...

2번, 3번에 대해서는 이 글의 답변에서 배우고 싶군요... 죄송합니다. :oops:


음... width:70% 가 들어가 있는 채로 text-align: left를 넣으면 글자가 왼쪽으로 정렬되지 않아서(IE 기준) width:70%를 뺐더니 글자는 왼쪽으로 정렬 되었는데 박스 크기가 너무 크네요. 박스 크기를 문장 길이에 맞게 자동으로 맞추려면 어떻게 해야 하나요?
xesles의 이미지

1번하고 2번;;

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #a0a0a0; margin:14px 0px; padding: 2px 10px 2px 0px; background-color:#ffcc66">
<tr>
<td style="font-size:100%; text-align:left">
<ul style="margin:0px 0px 0px 25px; padding:0px">
<li><a ................................</a></li>
....
</ul>
</td>
</tr>
</table>

테스트 환경;;

MSIE 6.0.2800.1106.xpsp2.030422-1633
Mozilla/5.0 (X11; U; Linux i686; en-Us; rv1.5) Gencko/20040201

3번은 뭘 물어보는 건지 모르겠군요.

xesles의 이미지

참, 어느 부분을 수정한지 않 써놨네요.. <div style="background-color:#ffcc66... 에서부터 </div> 까지 입니다..

angpoo의 이미지

				<div style="background-color: #ffcc66; border: 1px solid #a0a0a0; font-size: 100%; padding: 5px 15px; margin: 14px 0px; float: right; text-align:left">
				<li><a href="http://bbs.kldp.org/viewtopic.php?t=39578"><strong>KLDP CSS 템플릿 문제 도움 요청</strong></a></li>
				<li><a href="http://kldp.org/~kss/wiki.php/KLDPStuff">KLDP 티셔츠, 열쇠고리 신청하세요!</a></li>
				</div>

쩜 앞에 여백은 <ul>때문에 들여쓰기가 되서 생긴건데 없애는 법은 모르겠네요.
<ul>에 margin주는것은 IE랑 firefox에서 다르게 나오더군요.
그냥 <ul>은 빼버렸습니다.
대신 <div>에서 적절한 padding을 주고 float: right를 주었습니다.

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트
lsj0713의 이미지

angpoo wrote:

쩜 앞에 여백은 <ul>때문에 들여쓰기가 되서 생긴건데 없애는 법은 모르겠네요.

li가 ul 없이 써도 되는지 의문입니다. 그냥 ul에 붙은 여백을 조정하면 해결될 문제입니다.

<ul style="margin: 0; padding: 0 0 0 1em;">

첫번째와 두번째 질문의 답은 위에분이 쓰신 float가 정답입니다.

3번은 아마도 td element의 valign attribute 같은 것을 원하는 것 같은데... CSS의 Box Model에서는 그같은 세로 정렬방법 변경을 지원하지 않습니다. 오로지 Table cell에서만 vertical-align으로 변경 가능할 뿐입니다(td valign="..."이랑 다를게 없습니다). 결국 밑으로 쏠리게 만드는 유일한 해결 방법은 table 뿐입니다.

그리고 떠다니는 박스와 겹치지 않게 하는 것은 clear로 가능합니다. 밑의 body 박스에다가 clear: left; 혹은 clear: both;를 붙여주면 됩니다. 아니면 body 박스의 위쪽 여백을 충분히 주는 방법도 있습니다.

http://www.w3.org/TR/REC-CSS2/tables.html#height-layout

angpoo의 이미지

lsj0713 wrote:
angpoo wrote:

쩜 앞에 여백은 <ul>때문에 들여쓰기가 되서 생긴건데 없애는 법은 모르겠네요.

li가 ul 없이 써도 되는지 의문입니다. 그냥 ul에 붙은 여백을 조정하면 해결될 문제입니다.

<ul style="margin: 0; padding: 0 0 0 1em;">

확인해보니 <li>는 <ul>따위에 딸려야 한다고 되어있습니다.
아마도 그냥 <li>가 나오면 IE나 firefox는 <ul>로 간주하나 봅니다.

<ul>의 padding-left가 점 앞여백이려니 했는데 점을 포함해서 <li>나오기 전까지의 여백이네요.

lsj0713의 이미지

angpoo wrote:

<ul>의 padding-left가 점 앞여백이려니 했는데 점을 포함해서 <li>나오기 전까지의 여백이네요.

list-style-position으로 변경 가능합니다.

http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-position

위 링크의 그림파일 보시면 어떤 방식으로 점을 표시하는지 한눈에 알아볼 수 있습니다. 즉 박스 바깥에 표시하는가(이것이 기본값) 바깥쪽에 표시하는가 하는 거죠.

하지만 웬지 inside는 리스트같은 느낌이 안들어서 개인적으로는 별로...;;;

권순선의 이미지

KLDP 초기화면( http://kldp.org )의 구성을 변경하였습니다. 기본 디자인은 바뀐 것이 없고, 각 사이트 별 헤드라인을 좀더 편리하게 확인할 수 있게 하였으며 특히 사용자가 가장 많은 이곳 KLDP BBS의 헤드라인 배치를 대폭 확대하였습니다.

이번 변경을 통해서 좀더 많은 사용자들이 KLDP 초기화면을 방문할 수 있도록 유도하여, 편리하게 KLDP의 각 사이트별 변동사항을 한눈에 볼 수 있게 함으로서 KLDP Wiki나 KLDP.net 등에서 일어나고 있는 일들도 쉽게 파악할 수 있도록 하였습니다.

내부적으로는, 기존 초기화면에서 매번 로딩시마다 각 사이트의 헤드라인을 불러오도록 되어 있던 부분을 변경하여 미리 파일로 만들어둔 헤드라인 정보를 받아오게 함으로서 로딩 속도를 대폭 개선하였습니다.

아직 CSS 템플릿 등 몇가지 잔존하는 문제들이 있을 수 있으나 우선 개편을 먼저 진행하고 난 뒤 세부적인 문제점들은 차근차근 수정해 나가도록 할 예정입니다. html소스나 CSS 템플릿 소스에서 문제가 있는 부분, 이상하게 보이는 부분 등이 있으면 곧바로 알려 주십시오.

p.s. 지난번에 공모전을 통해서 응모를 받았던 화면들은 현재 화면들과 구성이나 색상이 많이 달라서 제가 현재 구성을 기본으로 다시 만들었습니다. 공모전에 참여해 주신 분들께는 개인적으로 죄송하게 생각하고, 대신 추후 참여해 주신 분들의 디자인을 쿠키 등의 방법을 사용하여 테마로 선택할 수 있도록 초기화면 인터페이스를 개선하도록 하겠습니다. 공모전에 참여해 주신 분들의 노력과 자극이 없었다면 지금의 개편은 없었을 것입니다. 그분들께 다시한번 진심으로 감사의 말씀을 드립니다.

권순선의 이미지

전부터 조금 이상했던 부분인데, 혹시 아시는 분은 알려 주세요.

현재 http://kldp.org 의 CSS 템플릿인 newkldp.css 에서 다음과 같은 부분이 있습니다.

div#bodyright {
    background-color: #fff; border-left: 1px solid  #a0a0a0;
    height: 100%; margin-left: 55%; padding: 14px
}

border-left: 1px로 되어 있는 부분인데요, Wiki 등의 헤드라인이 있는 왼쪽과 BBS의 헤드라인이 있는 오른쪽 박스 가운데를 구분하기 위한 선인데 이게 어떤 경우에는 아랫부분이 완전히 갈리지 못하고 왼쪽의 google 박스가 붕 떠버리는 듯한 현상이 생기고 있습니다. 브라우저 크기를 이리저리 줄여 보시면 확인하실 수 있습니다.

이런 현상이 생기지 않게 하려면 어디를 어떻게 고쳐야 하는지요?

iolo의 이미지

창크기가 많이 좁아지면 왼쪽과 오른쪽 단을 다 표시할 공간이 없어서 겹치게 됩니다. (지금은 몬타비스타 배너 크기가 최소 크기를 제한하고 있네요)
그래서 오른쪽 단의 왼쪽 경계선이 왼쪽단의 아래에 그려진, 그래서 보이지 않는 것으로 생각됩니다.

제가 생각한 임시적인 해법은(선택):

1. 왼쪽단의 패딩을 0으로 한다.
div#bodyleft { ... padding-right:0px; }

2. 왼쪽단에 오른쪽 경계선을 지정한다:
div#bodyleft { ... right-border:1px solid ... }
문제는 왼쪽단이 내용이 오른쪽 단 보다 작으면 선이 그려지다 만다... :(

3. 두개의 div로 단을 구성하지 말고 columns를 쓴다.
이건 좀 고쳐야 되겠네요 ;)

4. 테이블을 짠다 -.-

뭐 방법은 무궁무진 하겠지만... 역시 손쉽게 비슷한 결과를 얻어내는 방법은...

----
the smile has left your eyes...

ddoman의 이미지

창의 width를 약 1174 픽셀 이상으로 늘리면 좌측 하단부분이 튀어나오네요.
아래는 스크린샷입니다. 그 이하로 줄이면 정상적으로 나옵니다.
kde-3.2.2입니다.

댓글 첨부 파일: 
첨부파일 크기
Image icon 72.94 KB
Image icon 0바이트
권순선의 이미지

iolo wrote:
창크기가 많이 좁아지면 왼쪽과 오른쪽 단을 다 표시할 공간이 없어서 겹치게 됩니다. (지금은 몬타비스타 배너 크기가 최소 크기를 제한하고 있네요)
그래서 오른쪽 단의 왼쪽 경계선이 왼쪽단의 아래에 그려진, 그래서 보이지 않는 것으로 생각됩니다.

제가 생각한 임시적인 해법은(선택):

1. 왼쪽단의 패딩을 0으로 한다.
div#bodyleft { ... padding-right:0px; }

2. 왼쪽단에 오른쪽 경계선을 지정한다:
div#bodyleft { ... right-border:1px solid ... }
문제는 왼쪽단이 내용이 오른쪽 단 보다 작으면 선이 그려지다 만다... :(

3. 두개의 div로 단을 구성하지 말고 columns를 쓴다.
이건 좀 고쳐야 되겠네요 ;)

4. 테이블을 짠다 -.-

뭐 방법은 무궁무진 하겠지만... 역시 손쉽게 비슷한 결과를 얻어내는 방법은...


흠...테이블은 쓰기 싫고, 컬럼을 쓴다는 것은 무슨 이야기인지 좀더 자세히 알려주실 수 있을까요?

일단 왼쪽단의 padding을 0으로 넣어 주었는데, 왼쪽단이 오른쪽단보다 더 길 경우에는 여전히 가운데 구분선이 중간에서 잘리네요. 뭐 그래도 그전보다는 훨씬 낫긴 합니다만.... :-)

권순선의 이미지

그리고, 한가지 이상한 것은 IE에서 초기화면의 BBS 각 게시판으로의 링크는 제가 의도했던 대로 마우스를 올려둘 때에만 아래에 줄이 생기고, 보통 때는 그냥 아무런 효과가 없는 텍스트인데 리눅스에서 firefox로 보니 방문했던 게시판은 visited 에 지정한 색깔에 밑줄이 같이 나와 있네요. CSS 템플릿 쪽에 뭔가 잘못 지정한 것이 있을 듯 한데 아시는 분은 좀 봐 주세요...

iolo의 이미지

css2에는 columns라는 속성이 있습니다. 단순히 다단 편집을 위해 테이블을 짜거나 div를 나눌필요가 없다는 거죠. 아직 속성에 제약이 많아 뽀대내기에는 좀 무리가 있고... IE와 오페라가(최근버전에선 확인을 못했습니다) 신통치 않은 결과를 내
더군요.

그리고, 게시판에 호버 밑줄이 안나오는건... 그냥 syntax error입니다 ;)

h3 a:link {text-decoration: none; color: #000}, h3 a:visited {text-decoration: none; color: #000 }, h3 a:hover {text-decoration: underline;}

에서 ,를 줄 바꿈으로...
h3 a:link {text-decoration: none; color: #000}
h3 a:visited {text-decoration: none; color: #000 }
h3 a:hover {text-decoration: underline;}

휘릭=3

----
the smile has left your eyes...

권순선의 이미지

iolo님 감사합니다. :-)

한가지 더 도움을 청해야 할 것 같네요. 방금 오픈소스 관련 배너를 랜덤하게 출력하는 자바스크립트를 추가하였는데 원하는 위치는 초기화면 우측 상단 오렌지색 박스 옆입니다. IE에서는 괜찮은 것 같은데 firefox에서는 배너와 박스가 겹쳐 버리네요. 어느 부분을 어떻게 고쳐야 할까요... 아마 IE를 제외한 다른 브라우저에서도 같은 현상이 발생할 것 같은데...

권순선의 이미지

또다른 문제가 있군요. 현재 상태에서는 IE로 볼 경우 아랫부분의 전체 텍스트(각 BBS 게시판 헤드라인 중계)의 왼쪽이 배너가 들어있는 공간만큼 왼쪽으로 밀려 버렸네요. 왜 줄바꿈이 많은 듯 한가 해서 봤더니 역시나 그렇군요.

어쨌든 원하는 것은 초기화면 우측 상단부 오렌지색 박스 오른쪽에 배너를 겹치지 않게 놓는 것인데 시간이 오래 걸리네요.

angpoo의 이미지

해당 스크립트부분을 오렌지박스 다음으로 옮기고 오렌지 박스에는 float:left를 주고 두개를 div로 묶어 주면 되겠네요.

  <div id="bodyright">
+<div>

  <div style="background-color: #ffcc66; border: 1px solid #a0a0a0; font-size: 100%; padding: 2px 4px; margin: 4px 4px; text-align: left; float: left;">
  <ul style="margin: 0; padding: 0 0 0 1em;">
...
  </ul>
  </div>
  <div style="float: right; margin: 10px 4px; text-align: right; clear:right">
<script language='JavaScript' type='text/javascript'>
...
</script><noscript><a href='http://img.kldp.org/adclick.php?n=afc46d89' target='_blank'><img src='http://img.kldp.org/adview.php?clientid=4&amp;n=afc46d89' border='0' alt=''></a></noscript>
<br />
<a href="http://wiki.kldp.org/wiki.php/KLDPAdAlliance">AdAlliance</a>
  </div>

+</div>
angpoo의 이미지

<div style="float: right; margin: 10px 4px; text-align: right; clear:right">
이 마진을 상단에 오렌지박스에 맞춰 4px 4px로 바꿔야 된다는 얘기를 추가하려 했는데 수정이 안되네요.

답글을 올릴 수 있으면 올린 답글에 대해서는 수정이나 삭제가 가능하게 해주었으면 합니다.

그리고 다른 문제를 발견했는데
firefox에서 보면 bodyleft 밑부분이 깨지네요. body 밑부분을 뚫고 나옵니다.

권순선의 이미지

감사합니다. http://kldp.org/test.php 에 말씀하신 대로 고쳐 두었습니다만 화면을 좀 키우니 글자가 가운데로 끼어 들어가는 현상이 발생하네요.

첨부한 그림을 참고하세요....

다시한번만 살펴봐 주시겠습니까?

p.s. 답글은 수정할 수 있도록 설정을 고쳐 두었습니다.

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트
angpoo의 이미지

-<h2><a href="http://bbs.kldp.org">KLDP BBS</a></h2>
+<h2 style="clear:right "><a href="http://bbs.kldp.org">KLDP BBS</a></h2>

<div>로 두개를 묶은게 전혀 효과를 못 발휘하네요.
저렇게 해놓으니까 <div>빼도 제대로 나오기는 합니다.
뭔가 더 깔끔한 방법이 있을거 같기는 한데... 한계네요.

권순선의 이미지

angpoo wrote:
-<h2><a href="http://bbs.kldp.org">KLDP BBS</a></h2>
+<h2 style="clear:right "><a href="http://bbs.kldp.org">KLDP BBS</a></h2>

<div>로 두개를 묶은게 전혀 효과를 못 발휘하네요.
저렇게 해놓으니까 <div>빼도 제대로 나오기는 합니다.
뭔가 더 깔끔한 방법이 있을거 같기는 한데... 한계네요.


감사합니다. 일단 말씀하신 대로 고쳐 두었는데 firefox에서도 잘 나오는군요. 더 좋은 방법이 생각나시면 언제든지 글 올려 주시고요.

화면을 키웠을 때 좌측 아랫부분이 조금 이상해지는 현상에 대한 것은 위에 iolo님이 답글을 올려 주신 부분이 있는데 현재로서는 테이블을 사용하는 것이 가장 좋을 것 같다는 의견이었습니다. 그런데 CSS를 이용하는 이상 테이블을 섞어서 이용하는 것이 그다지 내키지 않아서 아직 그냥 두고 있는데 혹시 이 부분에 대해서도 CSS 상에서 해결 가능한 방법이 있다면 알려 주세요.

감사합니다....

angpoo의 이미지

#bodyleft가 #body를 뚫고 나오는 문제

 +<div style="height:0; clear:both ">&nbsp;</div>
 </div>
 <div id="foot">

이때 가운데 구분선을 #bodyright가 그리므로 #bodyright보다 #bodyleft가 길면 구분선 밑부분이 끊깁니다.
이를 해결하기 위해 #bodyright의 border-left를 빼고 1x1짜리 dot.png를 만들어 #body에서 구분선을 그립니다.

div#body {
	background: #fff url(dot.png) repeat-y 54.9% 0;
	border: 1px solid #a0a0a0;
	height: 100%; margin: 3px 0px; clear: both
}

그외에 사소한 에러...(newkldp.css)

-h3 { font-size: 100%; font-weight: normal; font-color: #000; margin: 3px }
+h3 { font-size: 100%; font-weight: normal; color: #000; margin: 3px }

title='KLDP sponsor: 몬타비스타'는 <img>에서 <a href..>로 이동

더 사소한 headright위치 조정

div#headright {
    background-color: #ddd; font-weight: bolder;
    height: 100%; text-align: right; padding: 0px;
+   margin-top: 30px;
}
혹시 모르니 div#headleft {}에 height: 35px;추가.. 근데 [KLDP] 이건 새 배너를 공모해서 이미지로 넣는게 더 나을것 같네요.

좀 생각해 볼 문제로는
DOCTYPE이 현재 HTML 4.01로 되어 있는데 <br />, <img />등은 XHTML 문법 아닌가요.
아예 xhtml로 바꾸는게 낫지 않을까 싶네요.
드림위버에 xhtml변환기능 있길래 해봤더니 몇군데만 고치면 되는군요.

이상을 다 적용하면 레이아웃도 멀쩡하고 xhtml 1.0 transition 및 CSS validator를 모두 무사히 통과합니다.

댓글 첨부 파일: 
첨부파일 크기
파일 0바이트
권순선의 이미지

오늘 드디어 시간이 좀 생겨서 angpoo님께서 말씀하신 내용들을 테스트해 보았습니다. 그런데.... :( 위에 말씀하신 내용을 모두 적용하였는데 가운데 부분이 비고 아랫부분이 뜨는 현상이 발생하네요. http://kldp.org/test.php 를 IE로 한번 보시면 확인하실 수 있습니다.

그리고 원래 http://kldp.org/ 에서 bodyleft가 body를 뚫고 나오는 문제는 말씀하신 방법으로 해결이 되는 것 같습니다. 그래서 일단은 <div style="height:0; clear:both ">&nbsp;</div> 만 http://kldp.org/index.php에 추가해 놓은 상태입니다.

현재 사용하고 있는 http://kldp.org/test.php와 http://kldp.org/index.php 및 관련 파일들을 모두 그대로 묶어서 로컬에서 테스트하실 수 있도록 파일을 올립니다. 혹시 시간이 되시는 분은 한번 테스트해 보시고 문제가 있는 부분은 patch를 만들어서 올려 주시면 구구하게 조목조목 설명하지 않아도 바로 이쪽에서도 merge해서 적용할 수 있을 것입니다.

감사합니다....

댓글 첨부 파일: 
첨부파일 크기
파일 0바이트
angpoo의 이미지

뭐 사실 그동안 제시한 방법이 깔끔하지 못한탓도 있지만
분명히 테스트해보고 올린게 전혀 다른 결과를 보이는 부분이 있어 난감했었는데
역시 소스가 공개되니 고치기가 편하네요.

고친점:
#body에서 흰바탕과 구분선을 그리고 #bodyleft와 #bodyright 배경을 투명하게 했습니다.
오렌지박스와 광고박스위치를 바꿨더니 clear: both가 생각한데도 먹습니다.
또 창 폭이 줄어들었을때도 글자가 중간에 끼어들지 않습니다.
그외에 마진이나 위치를 미세하게 바꾼 부분이 있습니다.
#headright를 리스트로 바꿨습니다. - 어쨌거나 headright폭이 줄어 800x600에서도 깔끔하게 나옵니다.

중앙 구분선을 dot.png로 그리게 했는데 이미지 넣기 뭐하시면 newkldp.css에서 dot.png를 검색해서 주석처리된 부분을 바꾸시면 됩니다. 그냥 border로 그려도 가끔 #bodyleft가 #bodyright보다 길때 구분선 밑이 약간 끊기는 경우가 있는거 빼고는 문제 없습니다.

-- 중앙을 55%로 나눈거 그냥 가운데로 나누는게 낫지 않나요?

댓글 첨부 파일: 
첨부파일 크기
Binary Data 0바이트
권순선의 이미지

angpoo님 감사합니다.

http://kldp.org/testkldp/ 에 새로 올려주신 사항들을 적용해 보았습니다. 일단 IE 6에서는 잘 보이고, 별다른 문제도 없어 보이는데 다른 브라우저, 다른 환경에서는 어떤지 확인 부탁드립니다...

feanor의 이미지

Mozilla Firefox 0.8, 잘 보입니다.

--feanor

권순선의 이미지

특별한 문제가 없는 것으로 판단되므로 초기화면을 교체하였습니다. 수정해야 할 부분이 있으면 http://bbs.kldp.org/download.php?id=1575 에 소스(index.php, newkldp.css)가 있으니 패치를 올려 주세요...

조언을 올려 주신 모든 분들에게 진심으로 감사 드립니다...

idlock의 이미지

제가 css는 무지 약한 관계로 -.-.. 소스를 봐도 어디가 잘못됬는지 잘 모르겟내요.. 음..

viwe는 아래와 같습니다.

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트
서지훈의 이미지

뭔가 또 수정을 하신거 같은데...
오페라 7.50 에서 이상하게 보입니다.
수정 부탁드립니다.

<어떠한 역경에도 굴하지 않는 '하양 지훈'>

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트

#include <com.h> <C2H5OH.h> <woman.h>
do { if (com) hacking(); if (money) drinking(); if (women) loving(); } while (1);

권순선의 이미지

지금은 어떤가요??

dhunter의 이미지

여전히 깨져 있습니다. 며칠 전까지만 해도 괜찮았는데...

W2k, Firefox 0.9.1 입니다.

from bzImage
It's blue paper

dhunter의 이미지

사실, Opera와 Mozilla, Internet Explorer 에서 [똑같이] 보이는 CSS 만들려면 좀 황당합니다. Opera 와 Moz, IE 의 여백 계산이 각자 전부 달라서 머리가 아프죠...;

from bzImage
It's blue paper

서지훈의 이미지

아직 그대로입니다.
그리고 모질라 1.6에서도 똑같은 현상이...

그럼... 수정 부탁드립니다~~~

<어떠한 역경에도 굴하지 않는 '하양 지훈'>

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트

#include <com.h> <C2H5OH.h> <woman.h>
do { if (com) hacking(); if (money) drinking(); if (women) loving(); } while (1);

codebank의 이미지

CSS를 볼줄은 모르지만 HTML(php소스겠지만요.)소스중 div의 bodyright부분에 있는
광고중에 스크립트를 사용한 부분을 제외하면 정상으로 나오는 걸로 봐서는 스크립트에
관련해서 위와같이 사이가 벌어지는 현상이 일어나는게 아닌가 생각되네요.
일단 스크립트를 보실 수 있는 분이 점검을 해주셔야 할것 같은데...
좀더 찾아보고 다시 쓰겠습니다.
-----------
좀더 범위는 줄여봤지만...
전체 부분중에 스크립트 아래있는 noscript부분을 제외하니 정상으로 나오더군요.
다시 집어넣고 target="_blank" 부분만 빼면 정상으로 나오고...
문제는 그렇게 된 이후에는 target이 들어가도 이젠 정상으로 나와서 테스트가 더이상
안된다는 겁니다. :(
무언가 제 시스템에 문제가 발생한것 같기도 하지만...
일단 저부분을 참고해보시면 어떨런지...

------------------------------
좋은 하루 되세요.

권순선의 이미지

지금은 어떤가요? <noscript></noscript> 사이에 <div></div>를 넣어 보았는데....

서지훈의 이미지

아직도 그대로네요...-_-ㅋ

<어떠한 역경에도 굴하지 않는 '하양 지훈'>

#include <com.h> <C2H5OH.h> <woman.h>
do { if (com) hacking(); if (money) drinking(); if (women) loving(); } while (1);

codebank의 이미지

마찬가지 인것 같네요. :oops:

테스트를 하려고해도 제가 받아온 파일로는 더이상 테스트가 안되서.. -.-;
참고로 어제인가 아파치하고 php가 Update되어서 merge시켜놨더니 그렇네요.
apache는 2.0.49-r4이고 php는 4.3.7-r1로 나오는군요.

------------------------------
좋은 하루 되세요.

권순선의 이미지

초기화면이 깨지는 분들은 일단 문제가 해결될 때까지 http://kldp.org/old.php 를 사용해 주세요.... 죄송합니다....

angpoo의 이미지

구분선을 중앙으로 옮기면서 #bodyleft와 #bodyright가 겹쳐서 그런가 보네요.

@@ -66,7 +66,7 @@
 
 div#bodyleft {
     background-color: transparent; float: left; 
-    padding-right: 0px; padding: 10px; width: 50%
+    padding-right: 0px; padding: 10px; width: 45%
 }
 div#bodyleft p { margin-top: 5px; margin-left: 40px }
 div#bodyleft ul { margin-top: 5px; margin-bottom: 12px }
@@ -75,7 +75,7 @@
 div#bodyright {
     background-color: transparent;
     /* border-left: 1px solid #a0a0a0; */      /* without dot.png */
-    height: 100%; margin-left: 50%; padding: 10px
+    height: 100%; width: 45%; margin-left: 50%; padding: 10px;
 }
 div#bodyright ul { margin-top: 0px; margin-bottom: 12px }

현재의 http://kldp.org/newkldp.css 기준입니다.
그런데 css는 업로드시 허용되는 확장자가 아니라는군요.
권순선의 이미지

angpoo님 말씀대로 고쳤습니다. 잘 나오나요??

p.s. 이곳에 업로드 가능한 파일 확장자는 정해져 있습니다. 안올라가면 zip이나 tgz등으로 해서 올리시면 됩니다. :-)

서지훈의 이미지

아직입니다...
조그만 더 힘내세요^^

<어떠한 역경에도 굴하지 않는 '하양 지훈'>

#include <com.h> <C2H5OH.h> <woman.h>
do { if (com) hacking(); if (money) drinking(); if (women) loving(); } while (1);

angpoo의 이미지

opera에서 봤더니 심하게 깨지더군요.

height: 100%로 된걸 다 지웠습니다.
- 오페라는 height: 100%면 무조건 창 높이로 맞추더군요.
#bodyright를 margin-left: 50%;에서 float: rigth로 바꿨습니다.
- 오른쪽단의 글써지는 왼쪽 위치가 기준선에서 좀 더 떨어졌지만 폭을 %단위로 지정하는 한 이게 최선이 아닐까 하는 생각이 듭니다.

테스트 환경: 윈XP - firefox 0.9.1, IE 6.0.x, Opera 6.06

-- 아예 테이블로 했으면 속 편했을것을 사서 고생하는게 아닐까 하는 생각도 들기는 하네요.

댓글 첨부 파일: 
첨부파일 크기
Plain text icon 0바이트
idlock의 이미지

고생이 많으십니다.

퇴근전에 올려놧던 글이.. 밤에 활발히 논의 되었네요 ^^;;;;;..

파팅(아직 깨집니다. ㅠ.ㅠ)

권순선의 이미지

http://kldp.org/new.php 를 한번 확인해 보시겠습니까? 다른 브라우저에서도 다들 잘 보이는지 확인 부탁드립니다. 방금 angpoo님이 새로 올려주신 css를 적용한 것입니다. :-)

idlock의 이미지

http://kldp.org/new.php 잘 보입니다.

Test viwer(?) : Opera 7.5 , FireFox 0.8

수고 많으셨습니다. ^^..

권순선의 이미지

드디어 해결된 것인가요....

기존에 테스트 용으로 만들었던 new.php, old.php 모두 삭제하였습니다. 이제는 곧바로 초기화면으로 진입해서 사용하시면 됩니다.

테스트해 주시고 조언해 주신 분들께 감사드리며, 특히 angpoo님께 감사의 말씀 전합니다... :-)

codebank의 이미지

환경 : Mozilla 1.7

잘보입니다. (어제 저녁부터 잘보였습니다.) :)
고생 많이 하셨네요.

------------------------------
좋은 하루 되세요.

서지훈의 이미지

아... 이제 잘 보이네요^^

어제 어제 고생하신 모든분들... 수고하셨습니다...;)

<어떠한 역경에도 굴하지 않는 '하양 지훈'>

#include <com.h> <C2H5OH.h> <woman.h>
do { if (com) hacking(); if (money) drinking(); if (women) loving(); } while (1);

댓글 달기