테스트 사이트 - 개발 중인 베타 버전입니다

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

· 17년 전 · 1611 · 5
안녕하세요.

초보인데요.. 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게시판이나 인터넷 둘러보시면 핵없는 좋은 예제들이 많이 있습니다.
링크 참조 하시기 바랍니다.
http://www.sodapop.co.kr/bbs/board.php?bo_table=tutorial&wr_id=11
CSS 비밀 메뉴얼이란 책에 자세히 나와 있어요 ^^
거기보면 둘다 똑같이 동작하도록 하게하는 꼼수들이 들어 있습니다.

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

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

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

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

핵을 쓰는 방법도 좋은 방법중의 하나가 되죠^^

게시글 목록

번호 제목
9869
9863
9862
3212
3203
3194
9855
9851
9845
9843
9842
9836
9834
3192
3191
6957
9830
9825
9823
9821
9735
3186
3182
9727
9720
3179
9702
6955
3174
9690
9686
9679
3165
3162
3159
9676
3146
9673
9668
9663
9662
게시판 액자??
9581
3143
3142
9561
9554
외부로그인 로그인 스킨 6
9542
9531
9527
9522
3131
9517
회원통합스킨 블랙 메뉴 디자인 4
9507
9500
9492
9490
9489
9485
9481
회원통합스킨 메뉴 디자인 3
9480
3128
3120
9478
3116
9477
3112
9471
9470
9468
9463
9460
9457
3104
9452
6953
9448
9444
9443
5984
3094
9442
3088
3082
3079
9432
패스워드찾기 로그인 페이지 PSD 9
9416
3078
9415
9407
9405
9402
3075
9400
게시판 공지창 1
9399
3072
6949
9397
9395
9380
게시판 조직도 14
9376