요청! table->css

컴박사 · Post by **컴박사** » 2005 08 01 02:21 36

불야시랑 익스에서 똑같이 보이게 한다는 건 정말이지 불가능에 가까운 겁니까?
지금 5일째 레이아웃이 두 브라우저간에 틀리게 나와서 했다 지웠다를 반복하고 있습니다.
테이블로 짜면 간단하지만 div 로 짤려니 고통이 이만저만이 아닙니다.

실력있으신 고수분들의 도움을 기다립니다.
너무 지쳤어용....

이 소스 좀 크로스 브라우징이 가능하도록 div 와 css 로 좀 짜주시면 참으로 길이길이 은혜를 잊지 않겠습니다. ㅡ.ㅜ

Code: Select all

<table align="center" cellpadding="0" cellspacing="0" width="980" bgcolor="white">
<tr>
<td style="padding:10;">

	<table cellpadding="0" cellspacing="0" width="100%">
        <tr>
	<td height="70" colspan="2" bgcolor="black">
	</td>
	</tr>
        <tr>
	<td valign="top" colspan="2" style="padding-top:10;">

		<table cellpadding="0" cellspacing="0" width="100%">
                <tr>
		<td height="112" bgcolor="blue">
		</td>
		</tr>
                </table>

        </td>
	</tr>
        <tr>
        <td width="170" align="center" valign="top" bgcolor="#F4F4F4" style="padding:10;">

		<table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td>
		</td>
		</tr>
		<tr>
		<td>
		</td>
		</tr>
		<tr>
		<td>
		</td>
		</tr>
		<tr>
	        <td>
                </td>
		</tr>
		</table>

	</td>
        <td align="center" valign="top" style="padding:10;">

		<table style="padding:10;" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td align="center" style="padding:10;">

			<table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td align="left" bgcolor="#F7F7F7" style="border-width:1; border-color:rgb(219,219,219); border-style:solid;">
                        </td>
                        </tr>
                        </table>

                        <table style="margin-top:10;" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td align="center" valign="top">
                        </td>
                        </tr>
                        </table>

		</td>
                </tr>
                </table>

	</td>
        </tr>
        <tr>
        <td colspan="2" style="padding-top:10;">

		<table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td height="100" bgcolor="#2C2C2C">
                </td>
                </tr>
                </table>

	</td>
        </tr>
        </table>
</td>
</tr>
</table>

Post by **hyeonseok** » 2005 08 01 10:34 39

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 10px;
	padding: 0;
}
#top {
	height: 70px;
	background: #000;
}
#visual {
	margin-top: 10px;
	background: #00f;
	height: 112px;
}
#left {
	width: 150px;
	padding: 10px;
	background: #f4f4f4;
	float: left;
	margin: 10px 0 0;
}
#body {
	padding: 0 0 0 180px;
}
#body h1 {
	border: 5px solid rgb(219,219,219);
	margin: 10px 0 0;
}
#body #content {
	margin: 10px 0;
	width: 100%;
}
#foot {
	clear: both;
	background: #2c2c2c;
	height: 100px;
}
</style>
</head>
<body>
<div id="top">
	top area(??)
</div>
<div id="visual">
	visual area(??)
</div>
<div id="left">
	left area
</div>
<div id="body">
	<h1>Title of this Content(??)</h1>
	<div id="content">content</div>
</div>
<div id="foot">
	foot area
</div>
</body>
</html>

이 코드가 도움이 되셨으면 좋겠습니다. 좌측 영역이 아래까지 이어지게 하시려면 #body 에 background-image 를 repeat-y 로 사용하셔야 합니다. 그 부분만 유의 하시면 나머지 것들은 쉬울 것이라고 생각 됩니다.

문제 생기면 다시 글 올려 주세요.

컴도사 · Post by **컴도사** » 2005 08 01 12:04 11

정말 친절하시군요....
저기까지는 저도 어느정도 해보았습니다. 5일동안 수차례 시행착오를 겪으면서요...

문제는 아래의 이미지와 같이 여백이 만을경우가 문제더군요...
제가 질문글을 제대로 올리지 않아 소스가 약간 다른것이 나왔는데....
한 번만더 시간내어주실 수 없으시겠는지요?

http://img110.imageshack.us/img110/286/ex2wk.gif

전체 크기는 980px 이며.. 흰 부분들의 여백은 모두 10px 씩 입니다.
중앙 정렬이며, 테두리 흰여백뒤의 회색은 배경색입니다.

제가 했을경우 여백이 많이 있을경우 익스와 불여우에서의 크기나 위치를 정위치에 놓기가 잘 안되더군요....
먼저 올려주신 소스도 많은 공부가 되었습니다.
거듭 감사드립니다.

고맙습니다.

Post by **hyeonseok** » 2005 08 02 10:38 01

http://css.macple.com/forum/showthread.php?t=186

비슷한 문제를 겪으신 분들도 도움이 됐으면 좋겠습니다.

Mozilla 한국 커뮤니티

요청! table->css

요청! table->css

고맙습니다.

Who is online