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

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

· 17년 전 · 1605 · 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을 씌워서 표현하곤 합니다.

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

게시글 목록

번호 제목
9032
9031
9027
9026
9024
9017
6918
6914
2821
2820
9006
8999
8984
8979
2811
8964
8955
2810
5963
8947
8943
2805
2804
8932
8924
8919
기타 배너 4
8915
2792
2790
2784
2777
8913
8908
8905
8903
2774
2771
2765
8894
기타 web ui 8
8879
8868
8863
8860
8855
8849
8833
8831
8829
2756
2750
2744
8823
8820
8819
8817
8815
8812
8804
8801
8799
8796
8793
8792
2740
2735
2732
2727
2724
2719
8787
2717
8785
8778
8776
8767
8764
8760
2713
2703
8753
2696
8751
8745
8740
8732
2688
2685
8727
8716
기타 2012 10
8704
6908
6901
8702
8701
2673
2671
8696
8687
8678
8672