KLDP 초기화면 디자인 문제들...

권순선의 이미지

http://kldp.org 를 조금 손을 봤는데 보시면 아시겠지만 조금 이상한 부분들이 있습니다. 살펴보시고 조언 주시면 감사드리겠습니다.

1. 오른쪽 상단의 "참여하기" 부분이 IE에서 유독 검은색으로 나타납니다. 왜 그럴까요? 제 pc에서만 나타나는 현상인가요?

2. 윈도우즈 모질라에서 보면 왼쪽 하단의 KLDP.net 의 News와 New Releases의 높이가 서로 다릅니다.. 윈도우즈 IE 에서는 같게 나오네요.

3. News, New Releases, 개발자 QnA, 사용자 QnA 등 <h3></h3>로 묶어놓은 부분들의 위아래가 너무 많이 띄워져 있습니다. 윗부분은 그냥 둔다고 해도 아랫부분은 좀 간격을 줄였으면 좋겠는데 방법을 모르겟네요. 예를 들어 개발자 QnA에서 <h3></h3>와 <li></li> 사이에 간격이 너무 띄워져 있다는 거지요. 이걸 좀 줄이려면 어떻게 해야 하나요?

File attachments: 
첨부파일 크기
Image icon scr2.png235.24 KB
Image icon scr1.png209.57 KB
Image icon kldp-opera.png197.7 KB
Image icon kldp-ie.png156.81 KB
Image icon kldp-firefox.png154.88 KB
Package icon kldpweb.zip4.98 KB
Package icon kldpweb.zip32.89 KB
Image icon barosl-kldp-bottomright-broken.png12.45 KB
세이군의 이미지

방금전에 확인을 해 보니 이렇군요..

프로젝트 때문에 KLDP.net에 접속을 많이 합니다.
그러다 보니 "개발자" 는 이미 방문한 사이트이고
다른 3 부분(KLDP?, 오픈소스, 참여하기) 부분은 방문하지 않은 사이트가 됩니다.

페이지를 한번 열어본 뒤에 다시 초기화면으로 돌아오니 4개가 모두 흰색으로 바뀌는 군요..

CSS를 확인하여 보니 편집이 좀 필요할 것으로 보입니다.
-----------------------------
수정 전

Quote:

#Menu a, #Menu a:visited {
margin: 0;
padding: 4px 10px;
border-right: 1px solid #00b0b0;
color: #e4f8fa;
text-decoration: none;
}

#Menu a{
color:white;
font-size:12px;
font-weight:bold;
font-family: Tahoma,Verdana,sans-serif;
text-decoration:none;
}


-----------------------------
수정 후
Quote:

#Menu a, #Menu a:visited, #Menu a:link {
margin: 0;
padding: 4px 10px;
border-right: 1px solid #00b0b0;
text-decoration: none;
color:white;
font-size:12px;
font-weight:bold;
font-family: Tahoma,Verdana,sans-serif;
}

이렇게 해 놓으면 전체가 연한 회색으로 나타납니다.
lefthander의 이미지

권순선 wrote:
3. News, New Releases, 개발자 QnA, 사용자 QnA 등 <h3></h3>로 묶어놓은 부분들의 위아래가 너무 많이 띄워져 있습니다. 윗부분은 그냥 둔다고 해도 아랫부분은 좀 간격을 줄였으면 좋겠는데 방법을 모르겟네요. 예를 들어 개발자 QnA에서 <h3></h3>와 <li></li> 사이에 간격이 너무 띄워져 있다는 거지요. 이걸 좀 줄이려면 어떻게 해야 하나요?

h3 나 ul, li 태그는 기본적으로 margin, padding 값이 적용되기 때문에, css 를 통해 아래와 같이 적정값을 설정해 주시면 됩니다.

h3 {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 5px;
}

ul, li {
  margin: 0;
  padding: 0;
}

li {
  margin-left: 20px;
}
권순선의 이미지

답글 올려주신 분들에게 진심으로 감사드립니다.... 이미 박원규님께서 적용을 해 놓으셨네요. :-)

지금 초기화면 구성이 거의 대강 마무리되어 가고 있고요... 약간씩의 변경은 있겠지만 기본적인 틀은 지금에서 크게 벗어나지 않을 것입니다.

그런데 아직 약간의 문제들이 더 남아 있네요. 보시면 아시겠지만...

1. 윈도우즈 모질라에서 보면 맨 아랫부분의 후원 관련 부분이 오른쪽으로 치우쳐져서 보입니다.

2. 왼쪽 아랫부분의 배너가.... 화면을 크게 키우면 오른쪽으로 치우쳐져 버립니다.

3. 매킨토시 사파리에서 보면 초기화면이 왼쪽에 크게 몰려서 오른쪽은 거의 절반 정도가 텅 비어 보이는 현상이 발생합니다.

혹 이런 문제들의 해결 방법을 알고 계시면 답글 부탁드립니다.... 감사합니다...

ddoman의 이미지

Gentoo KDE3.3.1 을 사용 중 입니다.

kldp.org 첫 화면과 wiki.kldp.org 에서 로그인 부분의 위치가 이상합니다.
해상도는 1600x1200이고, 스크린샷을 첨부합니다.

크기를 좀 줄여서 올리려했는데, 이미지 편집 가능한 프로그램이
설치가 안되어있네요...emerge 하려다가 언제 할까 싶어서 :wink: 그냥
첨부합니다.

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

사파리가 khtml엔진을 사용해서 그런지..
맥에서 사파리도 저렇게 되는군요.

힘없는자의 슬픔

lefthander의 이미지

일단 validation 을 통과해야 될 것 같습니다. 방금 확인해 보니 51개의 에러가 발생하더군요.

lefthander의 이미지

1.

<strong>
<li><a href="http://bbs.kldp.org/viewtopic.php?t=46758">제 3회 KLDP CodeFest 참가 신청 접수중입니다!</a></li>
<li><a href="http://bbs.kldp.org/viewtopic.php?t=46980">KLDP 초기화면 디자인 문제 해결을 도와주세요.</a></li>
</strong>

<li><a href="http://bbs.kldp.org/viewtopic.php?t=46758"><strong>제 3회 KLDP CodeFest 참가 신청 접수중입니다!</strong></a></li>
<li><a href="http://bbs.kldp.org/viewtopic.php?t=46980"><strong>KLDP 초기화면 디자인 문제 해결을 도와주세요.</strong></a></li>

2. xhtml 에서는 엘러먼트와 속성명에 대문자를 허용하지 않습니다.

<A HREF="http://wiki.kldp.org/wiki.php/OnlineBanking/Mozilla">OnlineBanking/Mozilla</A>

<a href="http://wiki.kldp.org/wiki.php/OnlineBanking/Mozilla">OnlineBanking/Mozilla</a>

3. id 같은 div 가 존재 - 이 부분이 주로 문제가 되는 것으로 보입니다.

<div id="left">
...
</div>

<div id="right">
...
</div>

<div id="left">
...
</div>

<div id="right">
...
</div>

4. 주석 구문 오류

<!---
--->

<!--
-->

등의 문제가 존재합니다.

권순선의 이미지

감사합니다.... 조금 더 쉽게 문제를 해결할 수 있도록 초기화면의 코드를 CVS에 넣었습니다.

http://kldp.net/projects/ldp/ 를 참고하세요.

CVS 모듈 이름은 kldpweb 입니다. 패치를 만드시면 이곳에 올려 주셔도 되고 http://kldp.net/projects/ldp/ 의 패치 올리는 곳에 올려 주셔도 됩니다.

다시한번 감사드립니다....

익명 사용자의 이미지

이번에 사이트 초기화면에 그림을 넣으면서 내용이 상자 밖으로 삐져 나오는 문제가 있습니다. 스크린샷 첨부합니다. 의외로 오페라에서 잘 안나오네요.

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

CVS에서 파일을 받아서 몇가지 수정을 해 보았습니다.
오른쪽 부분(BBS의 내용 출력하는 부분)을 조금 더 늘려보니까 비슷하게 맞더군요..
제가 해본 방법으로는 BBS분류별로 항목을 5개씩 출력하도록 해 보았습니다.

각 DIV간의 정렬때문에 이런 현상이 나타나는 것으로 보입니다.

변경된 PHP파일 올립니다.

확인한 브라우저 : 불여우 1.0(정식), IE6.0SP1

목록 출력되는 부분을 제외하고는 XHTML 1.0 유효성검사까지 하였는데 div id로 지정된 left와 right에 대해서는 아직 처리하지 못했습니다.

댓글 첨부 파일: 
첨부파일 크기
Package icon 0바이트
랜덤여신의 이미지

음... CVS 를 쓸 줄 몰라서, FireFox 로 KLDP 초기화면 소스를 저장해서 패치했습니다...

http://barosl.com/pub/KLDPFront_before.html
http://barosl.com/pub/KLDPFront_after.html

31 번째 줄에 있는
<div id="body">
요걸
<div id="body" style="overflow: hidden;">
이렇게 바꾸었습니다.

CSS 의 옵션을 하나하나 대입해 보다가... 저렇게 하니 되더군요. :shock:
왜 저런 결과가 나오는지는 모르겠습니다. -o- 뭔가 부작용이 있을지도 모르겠네요...

익명 사용자의 이미지

전체적으로 table을 사용해서 맞추는 것이 좋을 듯 하네요..

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

Anonymous wrote:
전체적으로 table을 사용해서 맞추는 것이 좋을 듯 하네요..
테이블 레이아웃은 안쓰는게 대세입니다. =3 =3
권순선의 이미지

인클루드 wrote:
음... CVS 를 쓸 줄 몰라서, FireFox 로 KLDP 초기화면 소스를 저장해서 패치했습니다...

http://barosl.com/pub/KLDPFront_before.html
http://barosl.com/pub/KLDPFront_after.html

31 번째 줄에 있는
<div id="body">
요걸
<div id="body" style="overflow: hidden;">
이렇게 바꾸었습니다.

CSS 의 옵션을 하나하나 대입해 보다가... 저렇게 하니 되더군요. :shock:
왜 저런 결과가 나오는지는 모르겠습니다. -o- 뭔가 부작용이 있을지도 모르겠네요...


감사합니다! 일단 말씀하신 것을 적용하여 두었습니다. 아랫부분이 깨지지 않으니 참 좋네요~
권순선의 이미지

smjang78 wrote:
CVS에서 파일을 받아서 몇가지 수정을 해 보았습니다.
오른쪽 부분(BBS의 내용 출력하는 부분)을 조금 더 늘려보니까 비슷하게 맞더군요..
제가 해본 방법으로는 BBS분류별로 항목을 5개씩 출력하도록 해 보았습니다.

각 DIV간의 정렬때문에 이런 현상이 나타나는 것으로 보입니다.

변경된 PHP파일 올립니다.

확인한 브라우저 : 불여우 1.0(정식), IE6.0SP1

목록 출력되는 부분을 제외하고는 XHTML 1.0 유효성검사까지 하였는데 div id로 지정된 left와 right에 대해서는 아직 처리하지 못했습니다.


예... 원래 부분에서도 오른쪽 부분이 더 길면 문제가 생기지 않습니다.

일단은 새로 올려주신 것을 테스트해 보니 아랫부분이 이상하게 나오는 문제가 있어 당장은 위의 '인클루드'님에 알려주신 부분만 수정해 두었습니다. 그 부분을 이번에 올려주신 파일에도 적용해서 테스트해 보았었는데 아랫부분이 이상하게 나오는 건 그대로더라구요. 그래서 우선 간단하게 수정할 수 있는 부분만 수정했습니다.

감사합니다....

권순선의 이미지

윽... 지금 보니 IE에서는 아랫부분이 이상하게 꼬이는 문제가 그대로 나타나는군요. firefox에서 잘 보이길래 ok인줄 알았더니.... 아무튼 아직 갈 길이 머네요.

감사합니다....

세이군의 이미지

참고삼으시라고 제가 테스트하고 있는 주소를 알려드립니다.
http://drssay.com/kldpweb/index.php

개인홈페이지 밑에서 테스트중인데 이 곳에서는 그리 꼬이지 않고 잘 나오고 있습니다.
소스는 압축파일로 올린 그대로입니다.

익명 사용자의 이미지

IE 에서는 style="overflow: hidden;" 속성이 다르게 처리 되는 것 같네요..

그럼 임시라도 이렇게 하시면....
<DIV id=bodyright>
<DIV id=bodyright style="height: 690px">

bodyright 의 높이를 bodyleft의 크기와 같게 만들면 될 텐데요..... :roll:

권순선의 이미지

smjang78 wrote:
참고삼으시라고 제가 테스트하고 있는 주소를 알려드립니다.
http://drssay.com/kldpweb/index.php

개인홈페이지 밑에서 테스트중인데 이 곳에서는 그리 꼬이지 않고 잘 나오고 있습니다.
소스는 압축파일로 올린 그대로입니다.


음... 이상하네요. 올려주신 파일을 그대로 풀어서 http://kldp.org/kldpweb/tmp 에서 돌려보았는데 아랫부분이 깨지는 현상은 마찬가지로 발생하거든요?

http://drssay.com/kldpweb/ 아래의 파일들을 모두 묶어서 이곳에 그대로 다시한번 올려주실 수 없을까요? 출력 html을 비교해 보았는데 양쪽이 서로 달라서....아무래도 사용하고 계신 전체 파일을 가지고 테스트해 보는 것이 좋을 것 같습니다. 다시한번만 부탁드립니다... 감사합니다...

세이군의 이미지

파일 올립니다.
그 사이에 조금 변경된 사항이 있는데

1. 스폰서 사이트 2곳이 나오는 부분 바로 위로 10px짜리 빈 공간이 들어갑니다.
(일부러 입력한 곳이니 삭제하셔도 됩니다. 입력안하고 했더니 테두리가 안보이는 경우가 있더군요. 그래서 임의로 입력했습니다.

2. INC파일을 통해서 만들어지는 항목에 강제로 라인피드를 하도록 만들었습니다.
( LI 태그들이 한 줄에 한 항목씩 나타나게 될 것입니다.)

index.php 파일 상단에 ini_set를 사용했는데 홈페이지 호스팅하는 서버에서 설정이 막혀 있기에 강제로 풀어놓은 부분입니다. 삭제하셔도 되는 부분입니다.

추가 :
변경된 사항이 한가지 더 있습니다.
명예의 전당 과 공지사항 포럼을 별도로 분리시켰습니다.
HDD가 문제생기기 전에 메인페이지에서 두 포럼을 따로 올린 기억이 있어서 변경했습니다.

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

smjang78 wrote:
파일 올립니다.
그 사이에 조금 변경된 사항이 있는데

1. 스폰서 사이트 2곳이 나오는 부분 바로 위로 10px짜리 빈 공간이 들어갑니다.
(일부러 입력한 곳이니 삭제하셔도 됩니다. 입력안하고 했더니 테두리가 안보이는 경우가 있더군요. 그래서 임의로 입력했습니다.

2. INC파일을 통해서 만들어지는 항목에 강제로 라인피드를 하도록 만들었습니다.
( LI 태그들이 한 줄에 한 항목씩 나타나게 될 것입니다.)

index.php 파일 상단에 ini_set를 사용했는데 홈페이지 호스팅하는 서버에서 설정이 막혀 있기에 강제로 풀어놓은 부분입니다. 삭제하셔도 되는 부분입니다.

추가 :
변경된 사항이 한가지 더 있습니다.
명예의 전당 과 공지사항 포럼을 별도로 분리시켰습니다.
HDD가 문제생기기 전에 메인페이지에서 두 포럼을 따로 올린 기억이 있어서 변경했습니다.


감사합니다. 일단 올려주신 파일을 가지고 교체를 했습니다. 훨씬 낫네요. :-)

다시한번 진심으로 감사드립니다....

랜덤여신의 이미지

음... 데뱐 FireFox 1.0 에서 footer 부분이 오른쪽으로 치우치고, 수평선이 배경 바깥으로 그려집니다.

댓글 첨부 파일: 
첨부파일 크기
Image icon 0바이트
익명 사용자의 이미지

float 스타일을 해제하기 위해서
clear 스타일을 사용해야 한다고 합니다.

<div id=bodyleft style="float: left;">

<div id=bodyright style="float: right;">

<div style="height:5px; clear: both;">

세이군의 이미지

인클루드 wrote:
음... 데뱐 FireFox 1.0 에서 footer 부분이 오른쪽으로 치우치고, 수평선이 배경 바깥으로 그려집니다.

한소프트 리눅스 2005 입니다. 여기서도 같은 현상이 벌어지네요..
참 이상합니다. 윈도용 파폭 최신버전에서는 잘 보이던 놈이 리눅스에서는 이런 현상이 벌어지네요..

PS 1. smjang78 에서 drssay로 이름 바꿨습니다.

세이군의 이미지

KLDP.org의 메인화면에서 일부분을 선택를 하려고 하면 codefest 이미지 부분부터 한꺼번에 복사되는 현상이 IE에서 발생하고 있습니다. 윈도용 파폭에서는 이런 현상이 없습니다.

KLDP의 다른 페이지와 비교를 했을때 WIki는 같은 현상이 발생하고 BBS와 NET에서는 그런 현상이 나타나지 않아서 그 이유를 생각해 보니 가장 의심해 볼 만한 상황이 테이블입니다.

사이트별로 알아보면
ORG(메인 화면) : 테이블 전혀 없음
Wiki : 메인 화면과 위키 내용상 테이블 일부 들어감
BBS : DIV와 Table 혼용
Net : BBS와 동일

중심 정보가 테이블에 들어가 있느냐? 아니면 Div로 만들어진 레이아웃에 있느냐에 따라 현상이 발생하고 발생하지 않고 합니다.
CSS와 DIV 태그간에 충돌같은 것이 있는 것으로 보입니다.
codefest때 이와 같은 현상을 확인하여 문제해결을 해 보려고 했으나 실패했습니다. 어디 CSS에 대하여 잘 아시는 분 해결 방법을 좀 찾아 주세요..

현재 테스트중인 환경은 W2K Pro Sp4 + IE6 SP1입니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.