묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테이블의 세로 정렬 기능 좀 알려주세요.
2004.12.01 01:28
안녕하세요.
다름이 아니고, 이번에 개인적인 학교 과홈페이지를 만들게 되었는데 이상하게 테이블 수직 정렬이 안 되어서 질문 드립니다.
일단 기본적으로 width=100%, height=100% 를 주고, valign="middle" 로 주었는데 익스플로어에서 안 먹히더군요. (드림위버 내에서는 잘 되던데, 익플에서 꼭 먹통이 됩니다.)
드림위버 2004, 윈도우 익스플로어 6.0 인데, 도저히 이 문제에 대한 해답을 못 찾아서 질문드립니다.
혹시나해서 기본적으로 테이블 하나 달랑 만들어서 height=100% 를 주고 익플에서 띄우니 그것 자체가 안 먹히더군요. width=100% 은 확실하게 먹는데 말이죠.
그래서 style="height : 100%;" 까지 줘봤는데도 여전히 익스플로어에서 먹통이 됩니다. (드림위버에서는 잘 되고요)
과제물 제출이 목요일인데, 혼자서는 도저히 못 풀 것 같아서 질문을 드립니다. (2시간동안 열심히 찾아다녀봤지만 결국 포기했습니다.)
참고하시라고 index 프레임 소스를 밑에 첨부합니다.
부디 도와주시면 감사하겠습니다.
테이블이 많아서 조금 복잡합니다. 기본적으로는 td 큰 거 하나에, 내부 테이블 안에 플래쉬와 아이프레임 삽입 레이아웃입니다. 플래쉬 높이가 마음에 걸리긴 하는데 내부 테이블은 크기 변경없이 외부 테이블 안에 정중앙으로만 오면 되게 하는 디자인이라서 건드려 보지는 못 했습니다. (건드려보니 플래쉬가 자꾸 깨져서)
날씨도 추워지는데 감기 조심하시고 좋은 하루 보내세요 ^^ 그럼
<body>
<table width="100%" height="100%" border="0" align="center">
<tr>
<td align="center" valign="middle"><table width="850" border="0" align="center" cellpadding="1" cellspacing="5" bgcolor="#FFFFFF">
<tr>
<td valign="middle"><table width="850" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="841" height="90">
<param name="movie" value="top.swf">
<param name="quality" value="high">
<embed src="top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="841" height="90"></embed>
</object></td>
</tr>
<tr>
<td width="150"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="300">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="300"></embed>
</object></td>
<td width="440">
<p>
<iframe width="440" height="300" scrolling="auto" frameborder=0 align="center" src="main.html" name="main"></iframe>
</p></td>
<td width="250"><div align="center">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="245" height="300">
<param name="movie" value="side.swf">
<param name="quality" value="high">
<embed src="side.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="245" height="300"></embed>
</object>
</p>
</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="840" height="120">
<param name="movie" value="bottom.swf">
<param name="quality" value="high">
<embed src="bottom.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="120"></embed>
</object>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
다름이 아니고, 이번에 개인적인 학교 과홈페이지를 만들게 되었는데 이상하게 테이블 수직 정렬이 안 되어서 질문 드립니다.
일단 기본적으로 width=100%, height=100% 를 주고, valign="middle" 로 주었는데 익스플로어에서 안 먹히더군요. (드림위버 내에서는 잘 되던데, 익플에서 꼭 먹통이 됩니다.)
드림위버 2004, 윈도우 익스플로어 6.0 인데, 도저히 이 문제에 대한 해답을 못 찾아서 질문드립니다.
혹시나해서 기본적으로 테이블 하나 달랑 만들어서 height=100% 를 주고 익플에서 띄우니 그것 자체가 안 먹히더군요. width=100% 은 확실하게 먹는데 말이죠.
그래서 style="height : 100%;" 까지 줘봤는데도 여전히 익스플로어에서 먹통이 됩니다. (드림위버에서는 잘 되고요)
과제물 제출이 목요일인데, 혼자서는 도저히 못 풀 것 같아서 질문을 드립니다. (2시간동안 열심히 찾아다녀봤지만 결국 포기했습니다.)
참고하시라고 index 프레임 소스를 밑에 첨부합니다.
부디 도와주시면 감사하겠습니다.
테이블이 많아서 조금 복잡합니다. 기본적으로는 td 큰 거 하나에, 내부 테이블 안에 플래쉬와 아이프레임 삽입 레이아웃입니다. 플래쉬 높이가 마음에 걸리긴 하는데 내부 테이블은 크기 변경없이 외부 테이블 안에 정중앙으로만 오면 되게 하는 디자인이라서 건드려 보지는 못 했습니다. (건드려보니 플래쉬가 자꾸 깨져서)
날씨도 추워지는데 감기 조심하시고 좋은 하루 보내세요 ^^ 그럼
<body>
<table width="100%" height="100%" border="0" align="center">
<tr>
<td align="center" valign="middle"><table width="850" border="0" align="center" cellpadding="1" cellspacing="5" bgcolor="#FFFFFF">
<tr>
<td valign="middle"><table width="850" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="841" height="90">
<param name="movie" value="top.swf">
<param name="quality" value="high">
<embed src="top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="841" height="90"></embed>
</object></td>
</tr>
<tr>
<td width="150"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="300">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="300"></embed>
</object></td>
<td width="440">
<p>
<iframe width="440" height="300" scrolling="auto" frameborder=0 align="center" src="main.html" name="main"></iframe>
</p></td>
<td width="250"><div align="center">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="245" height="300">
<param name="movie" value="side.swf">
<param name="quality" value="high">
<embed src="side.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="245" height="300"></embed>
</object>
</p>
</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="840" height="120">
<param name="movie" value="bottom.swf">
<param name="quality" value="high">
<embed src="bottom.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="120"></embed>
</object>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
댓글 4
-
piasol
2004.12.01 04:04
-
임지훈
2004.12.01 05:23
친절한 답변 감사드립니다. ^^ 소스를 보고 적용시켜보니 확실히 제 소스 보다는 안정성이 높고 수정이 편리하군요.
문제는 아직도 valign 정렬이 안 되네요. 익스플로어 문제인지 새로운 표준 때문인지 아직도 안 먹힙니다.
width = 100% 는 인식하는데 height = 100% 나 style="height : 100%;" 같은 코드는 아직도 드림위버 내에서만 인식하네요. 덕분에 막막합니다. 드림위버에서는 잘 돌아가는 것이 우째 익스플로어와 브라우져에서만 안 먹히는지...
혹시 가능하시면 height = 100% 관련 명령어가 먹으시는지 확인 좀 부탁드릴 수 있을까요?
(그래야 수직 관련쪽 명령어가 먹을 것 같은데, 제 컴과 친구 컴에서 안 먹으니 방법이 없네요. 테이블 하나 100% 100% 설정해 놓아도 width 만 먹는 것 보니 뭔가 확실히 이 쪽 코드 자체에 문제가 있는 것 같네요.)
너무 귀찮게 해드려서 죄송합니다. 언제 이렇게 복잡하게 바뀌었는지 모르겠네요. (분명 예전에는 이 정도로 하면 다 인식했는데;;;)
저도 힘내서 % 로 다시 한 번 코드를 짜봐야 겠습니다. 33.333333% 3단 테이블이 머릿 속에서 뱅뱅 도네요. 그럼 좋은 하루되세요 ^^ -
piasol
2004.12.01 06:12
엇;; 이상하네요. 전 미들 라인 으로 잘 뜨거든요 ;; ^^
어떻게 된일이지 ^^;;; 고생하시네요 ^^ -
oezn
2004.12.03 23:25
css를 써 보세요
지금 질문올리신것에대한 내용에 맞는건지는 모르겠지만.
index 가 첨부된걸 보고 수정을 했습니다.
1. 안쪽에 테이블을 모두 빼고. 새로운 테이블을 추가했습니다.
2. 테이블을 어떤식으로 했냐면. 3x3 으로 세로3 칸 가로 3칸 짜리죠.
3. 그럼 상단 중단 하단 과 좌,중,우 이렇게 나눠지면서 중간에 공간이 남는곳에
넣으셔야할 내용의 매인 테이블을 집어넣었습니다.
그럼 소스 한번보세요.
<!------- 여기 아래부터 ---------->
<body>
<table width="100%" height="582" border="0" align="center">
<tr bgcolor="#CCCCCC">
<td height="20" align="center" valign="middle" bgcolor="#CCCCCC"> </td>
<td height="20" align="center" valign="middle"> </td>
<td height="20" align="center" valign="middle" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="6%" height="18" align="center" valign="middle" bgcolor="#CCCCCC"> </td>
<td width="88%" valign="top">
<table width="850" border="0" align="center" cellpadding="1" cellspacing="5" bgcolor="#FFFFFF">
<tr>
<td valign="middle"><table width="850" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="841" height="90">
<param name="movie" value="top.swf">
<param name="quality" value="high">
<embed src="top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="841" height="90"></embed>
</object></td>
</tr>
<tr>
<td width="150"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="300">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="300"></embed>
</object></td>
<td width="440" valign="top">
<p>
<iframe width="440" height="300" scrolling="auto" frameborder=0 align="center" src="main.html" name="main"></iframe>
</p></td>
<td width="250"><div align="center">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="245" height="300">
<param name="movie" value="side.swf">
<param name="quality" value="high">
<embed src="side.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="245" height="300"></embed>
</object>
</p>
</div></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="840" height="120">
<param name="movie" value="bottom.swf">
<param name="quality" value="high">
<embed src="bottom.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="120"></embed>
</object>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="6%" align="center" valign="middle" bgcolor="#CCCCCC"> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td height="18" align="center" valign="middle"> </td>
<td height="20" align="center" valign="middle"> </td>
<td height="18" align="center" valign="middle" bgcolor="#CCCCCC"> </td>
</tr>
</table>
</body>
<!------ 여기까지 ---------->
아마 보시면 어떻게 변했는지 아실겁니다.
그리구 되도록 height 값는 100% 를 주시지 마시구요.
테이블 의 픽셀로 높이조절을 해주시는것이 안정적이고 좋습니다.
100% 값을 주게 되면. 창의 내용과 는 상관없이 윈도우에 맞게 뜨니깐
필요없는 공간이 너무 많이 생기게 되고. 나중에 내용 추가 시에도
iframe 같은 경우는 안나오는 경우도 생기거든요.
그래서 height 값은 테이블의 자체크기로 자연스럽게 두시구요.
제일 밖의 테이블은 폭을 100% 로 주셔도되긴하는데
이도 마찬가지로. 되도록 자연스러운 픽셀값으로 주시는것이 좋습니다.
그리고 이제 안쪽에 매인 테이블을 하나 더 생성하셔서.
100% 로 하시면 제일 밖쪽의 테이블과 알맞은 테이블 크기가 되니까
아무레도 편하고 보기에도 좋겠죠 ^^
질문에 알맞은 답변이었으면 합니다~
아니라면 다시한번 질문주세요 ^^