COMING SOON 🚀

파폭에서 레이아웃 잡을때 질문입니다~

안녕하세요.

초보인데요.. CSS와 DIV를 이용해서 레이아웃을 잡아봤는데..

익스에선 잘 되는데.. 파폭에서는 안되네요.. (높이도 안맞고 폭도 안맞고..ㅠㅠ)

이걸 어떻게 두 브라우져에서 정상 작동 시킬지 도와주세요~

<style type='text/css'>

#top { width:800px;border:1px solid;height:100px;text-align:center;font:20px bold;padding-top:35px;
	background:#c8c8c8;
	}
#left {height:600px;width:200px;float:left;border:1px solid;padding:10px 0 0 5px;font-size:15px;
	}
#right {height:600px;width:600px;float:left;border:1px solid;padding:20px 5px 5px 5px;}

</style>


<body 부분>
<div id=top>top 부분 </div>
<div id=left>Left 부분 </div>
<div id=right>Right 부분 </div>


입니다. 꼭좀 도와주세요~






|

댓글 5개

파이어폭스는 패딩값과 보더값을 넓이와 높이에 포함시킵니다.
아래와 같이 해보세요.*로 시작하는 부분참조.(익스핵)

<style type='text/css'>

#top { width:798px;border:1px solid;height:63px;text-align:center;font:20px bold;padding-top:35px;
background:#c8c8c8;
}
*html #top{width:800px;height:100px;}

#left {height:589px;width:193px;float:left;border:1px solid;padding:10px 0 0 5px;font-size:15px;
}
*html #left {width:200px;height:600px;}

#right {height:573px;width:588px;float:left;border:1px solid;padding:20px 5px 5px 5px;}
*html #right {width:600px;height:600px;}
</style>
감사합니다. 이게 웹표준인가요? 움,., 영 까다롭군요~

모두 이런방식으로 하시는거 맞나욤?

혹 wrap을 씌우게 되면 어떻게 되는지.. 아~ 빨리 퇴근하고 해봐야겠네욤~^^

감사합니다.
핵은 어쩔수 없을경우 사용하게 됩니다.CSS게시판이나 인터넷 둘러보시면 핵없는 좋은 예제들이 많이 있습니다.
CSS 비밀 메뉴얼이란 책에 자세히 나와 있어요 ^^
거기보면 둘다 똑같이 동작하도록 하게하는 꼼수들이 들어 있습니다.

책내용이 워낙 많아서 다 소개시켜 드리지는 못하지만...

제가 확실히 하나 알고 있는건..
DIV나 이런걸 총칭해서 박스라 칭하죠?
박스들의 width를 지정할 때에는 left right의 padding이나margin, border를 지정하면 안되고요 그렇게하면 익스와 파폭에서 다르게 표시됩니다.
박스들의 height를 지정할 때에는 top bottom의 padding,margin,border를 지정하면 다르게 표시되죠

익스와 파폭의 기준이 달라서 그런건데요..
실제 너비에 margin,padding,border를 포함시키느냐 안시키느냐에 따라서 둘이 나뉘어 져요..

그래서 대부분 wrap을 씌워서 표현하곤 합니다.

핵을 쓰는 방법도 좋은 방법중의 하나가 되죠^^
댓글을 작성하시려면 로그인이 필요합니다.

디자인

+
제목 글쓴이 날짜 조회
16년 전 조회 1,169
16년 전 조회 2,768
16년 전 조회 2,218
16년 전 조회 1,749
16년 전 조회 1,673
16년 전 조회 1,356
16년 전 조회 2,121
16년 전 조회 1,515
16년 전 조회 1,340
16년 전 조회 1,268
16년 전 조회 1,140
16년 전 조회 1,178
16년 전 조회 1,209
16년 전 조회 2,167
16년 전 조회 1,260
16년 전 조회 1,124
16년 전 조회 1,099
16년 전 조회 5,312
16년 전 조회 1,605
16년 전 조회 1,147
16년 전 조회 1,514
16년 전 조회 1,312
16년 전 조회 3,774
16년 전 조회 1,126
16년 전 조회 1,100
16년 전 조회 1,144
16년 전 조회 1,208
16년 전 조회 1,089
16년 전 조회 1,091
16년 전 조회 1,127
16년 전 조회 1,199
16년 전 조회 1,111
16년 전 조회 1,202
16년 전 조회 1,145
16년 전 조회 1,106
16년 전 조회 8,383
16년 전 조회 3,345
16년 전 조회 817
16년 전 조회 1,296
16년 전 조회 1,297
17년 전 조회 1,022
17년 전 조회 1,083
17년 전 조회 1,230
17년 전 조회 1,282
17년 전 조회 1,118
17년 전 조회 2,234
17년 전 조회 1,738
17년 전 조회 967
17년 전 조회 1,025
17년 전 조회 1,284
17년 전 조회 1,158
17년 전 조회 985
17년 전 조회 1,295
17년 전 조회 1,311
17년 전 조회 1,225
17년 전 조회 1,421
17년 전 조회 1,147
17년 전 조회 1,005
17년 전 조회 1,781
17년 전 조회 1,292
17년 전 조회 3,385
17년 전 조회 1,556
17년 전 조회 1,963
17년 전 조회 1,718
15년 전 조회 2,308
16년 전 조회 3,898
16년 전 조회 1,558
17년 전 조회 1,091
17년 전 조회 1,269
17년 전 조회 2,158
17년 전 조회 1,398
17년 전 조회 1,572
17년 전 조회 4,513
17년 전 조회 2,121
17년 전 조회 2,236
17년 전 조회 1,763
17년 전 조회 1,824
17년 전 조회 2,038
17년 전 조회 2,157
17년 전 조회 3,359
17년 전 조회 2,354
17년 전 조회 1,642
17년 전 조회 1,756
17년 전 조회 1,469
17년 전 조회 1,585
17년 전 조회 1,507
17년 전 조회 1,642
17년 전 조회 1,700
18년 전 조회 1,865
18년 전 조회 1,874
18년 전 조회 3,707
18년 전 조회 1,842
18년 전 조회 1,842
18년 전 조회 2,217
18년 전 조회 2,196
18년 전 조회 1,771
18년 전 조회 3,838
18년 전 조회 2,434
18년 전 조회 1,921
20년 전 조회 3,109