'생각하는섬 바닷가 - 최상단 테이블과 browser 프레임 사이의 여백'

2003년 1월 8일 이후 모두 명 오늘 명
메인 페이지
칼럼 보기
카툰 보기
게시판 가기
사이트맵
그밖의 것들

가입하면 정말 편합니다;;

▶	자유 게시판
	질답 게시판
	유용한 정보

QnA
묻고 답하기

질문전 검색은 기본!!!
질문 내용은 최대한 자세하고 정확하게!!!!!

Login

최상단 테이블과 browser 프레임 사이의 여백

에스테반  posted at 2003-07-20 15:07:21
1226 hits  4 comments

http://www.chol.net/~ohnohoya NeWin ohnohoya is level 1  llllllllll

퍼머링크 : http://reedyfox.com/island.php/qna/97 [복사]
http://reedyfox.com/island.php/qna/97

전에 비슷한 질문을 본것 같은데요..

첫 화면은 main.php이기 때문에 browser window 프레임이랑 table사이에 여백(대략 12pt)이 있습니다.

근데 이하 게시판을 보여주는 header.htm, footer.htm으로 구성된 페이지들은 아까 말한 그 여백이 '0'이 되네요.

참조 : http://php.chol.com/~ohnohoya/main.php
         http://php.chol.com/~ohnohoya/bbs/zboard.php?id=notice
================================
두번째 질문인데요..
main.php랑 다른 페이지들(위의 두번째 link도 한 예)보면 html code가 완전 동일한데도 top menu의 font모양이랑 link style이 다르네요. link style은 head에

(!--
A:link    {color:#000000;text-decoration:none}
A:visited {color:#000000;text-decoration:none}
A:active  {color:#000000;text-decoration:none}
A:hover  {color:#000000;text-decoration:none; position:relative; top:2; left:2}
body
{scrollbar-face-color: #ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #000000}
--)
그리고 body 태그안에 (body bgcolor="white" text="black" link="blue" vlink="purple" alink="red")가 있습니다.

그런데 보시면 아시겠지만 body의 명령(색 변경)이 안먹히고, font도 바뀌어 버리네요. 뭐가 문제일까요???
===================================
3. submenu랑 그 옆의 main view랑 table들의 bottom line align이 안되거든요? 저위 두번째 link 보시면 아실거에요. 이것들은 어떻게 맞추죠?

도움이 되실까 하여 제 자료들을 보냅니다. 만일 제 사이트에 들어와 보셔야 한다면 알려주세요. 임시로 암호를 바꾼뒤 알려드릴께요. ^^

고맙습니다~~

PRINT Text PRINT HTML

Trackbacks for this Posting (0)

'생각하는섬 바닷가 - 최상단 테이블과 browser 프레임 사이의 여백'

리디 posted at 2003-07-21 20:50

reedyfox is level 38 llllllllll

A:link {color:#000000;text-decoration:none}
A:visited {color:#000000;text-decoration:none}
A:active {color:#000000;text-decoration:none}
A:hover {color:#000000;text-decoration:none; position:relative; top:2; left:2}

이거랑

link="blue" vlink="purple" alink="red"

이거는 중복입니다.

예전에는 후자를 많이 사용했는데, css 파일 사용의 편리함이 알려지면서부터
전자의 방식으로 써넣습니다.

메인의 링크 스타일과 다른 페이지의 링크 스타일이 제각각인 이유 역시
제로보드 자체 css와 스킨 css 의 중복/충돌 때문입니다.

예를 들어 에스테반님께서는 전자의 방식으로 a태그의 속성을 지정하시면서
링크는 검정 마우스오버는 빨강으로 해두었다고 가정하겠습니다.
그런데 사용하시는 스킨 제작자가 스킨의 내부적 분위기를 위해 a태그 속성을
링크는 파랑 마우스오버는 초록으로 해두었다고 또 가정하겠습니다.

그러면 에스테반님의 css가 적용된 메인 페이지(제로보드랑 연결되지 않은 곳)에선
링크가 정상적으로 검정으로 보이고 마우스를 올리면 빨강으로 변하지만,
제로보드 해당스킨이 적용된 곳에서는 링크가 죄다 파랑색으로 보이고
마우스를 올리면 초록이 되는 증상이 나타납니다. 하나의 웹페이지에
두개의 css가 적용되면서 충돌이 일어나는 거죠.

그걸 막기 위해서 웹디나 경험많은 분들은 클래스(class)를 사용합니다.

A.my1:link {color:#000000;text-decoration:none}
A.my1:visited {color:#000000;text-decoration:none}
A.my1:active {color:#000000;text-decoration:none}
A.my1:hover {color:#000000;text-decoration:none; position:relative; top:2; left:2}

이렇게 css를 적용시키고 링크에는

<a class=my1 href="http://어쩌구 저쩌구">자유게시판</a>

이런식으로 class를 적용시켜 줍니다. 그러면 제로보드의 영향을 전혀 받지 않지요.
나아가, 센스있는 제로보드 스킨 제작자들은 에스테반님과 같은 피해자가 생기는
것을 막기위해 스킨 자체의 a태그에 class를 지정해둡니다.

리디 posted at 2003-07-21 21:44

reedyfox is level 38 llllllllll

에스테반님 홈의 구조에서는 어려울 것 같습니다.
보통은 전체 테이블의 아랫줄 TR(줄여서 '아랫줄 TR'이라고 합시다.)의
양쪽 TD에 들어가는 테이블의 높이를 100%로 주는 방식으로
높이를 맞출 겁니다. 하지만 이런 문제가 있죠.

1) 아랫줄 TR에 높이가 지정되지 않았을 경우(혹은 100% 등의 상대값인 경우)
브라우저는 전체 테이블 태그를 읽습니다. 이때 아랫줄 TR의 높이가 지정되지
않은 관계로 일단 형태만 정의하게 됩니다. 그리고 나서 아랫줄 TR의 왼쪽 TD 안에
있는 테이블을 읽습니다. 이 테이블의 높이는 100%로 해두었습니다만,
아랫줄 TR의 높이가 지정되지 않은 관계로 브라우저는 서브메뉴 테이블의
내용물의 순수 높이만을 계산한 임의의 높이값을 부여합니다.
그 다음은 아랫줄 TR의 오른쪽 TD를 읽을 차례죠? 이 오른쪽 TD안의 테이블의
내용이 왼쪽 TD안의 테이블의 내용보다 적으면 이 오른쪽 TD안의 테이블에
주어진 높이 100%라는 값은 좀전에 브라우저가 왼쪽 TD안의 테이블의 내용을
기초로 임의로 정해둔 높이와 일치한 값이 됩니다. 즉, 정열이 된것처럼 보입니다.
그러나 오른쪽 TD안의 테이블의 내용이 오히려 더 많을 경우는 어떻게 될까요?
왼쪽 TD안의 테이블의 높이가 브라우저에 의해 정해진 상태에서 오른쪽 테이블의
높이는 아랫줄 TR의 높이를 밀고(삐져) 나가게 되지만, 왼쪽 테이블의 높이값은
번복되지 않습니다. 즉, 정열이 안됩니다.

2) 아랫줄 TR의 높이가 지정되었을 경우
브라우저는 아랫줄 TR의 높이값을 읽습니다. 그리고 왼쪽 TD안의 테이블을 읽는데,
높이가 100%로 되어 있으니 아랫줄 TR의 높이값과 일치시킵니다.
그 다음은 오른쪽 TD안의 테이블을 읽는데 역시 마찬가지로 왼쪽 보다 분량이
적으면 아랫줄 TR의 높이값으로 일치/정열되지만, 내용이 많을 경우, 삐져나가거나
스타일 속성에 따라 전체 테이블 안으로 먹혀 들어갑니다.

두 가지 경우를 모두 살펴봐서 알수 있듯이 오른쪽 TD의 높이가 가변적일 경우
왼쪽 TD의 크기는 먼저 지정될 수 없습니다. (제 홈 구조와 같이 왼쪽이 가변적이고
오른쪽에 메뉴가 있다면 정열이 가능하겠지만 말이죠.) 그래서 대부분의 경우
왼쪽의 로긴/서브메뉴의 테두리를 그냥 조그맣게 놔둔답니다.

LIST ALL

GO TO THE TOP

- 이글 위에 있는 글 : 질문할 때 주의 사항

- 이글 아래 있는 글 : 리디님 새창열어 로그인땜에..들어왔다가

생각하는 섬, 바닷가는 리디가 운영하는 개인 칼럼 사이트이며 일부 컨텐츠는 리디 외의 필진에 의해 작성되었습니다. 이곳의 모든 컨텐츠는 출처(Deep Link URL) 및 작가를 명시하는 조건으로 비상업적 용도의 전제/복제가 가능합니다. 그러나 이곳에 게재된 컨텐츠의 취지 또는 작가의 의도가 왜곡되어 해석될 수 있는 컨텐츠 변형은 금지합니다. 이곳에 기재된 전자우편주소에 대한 일체의 수집행위를 거부합니다.(게시일 2008년 1월 1일)

Window close