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

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

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

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

게시글 목록

번호 제목
4672
4670
11126
4659
4654
4646
7050
11150
4637
4623
4617
7047
4605
11250
11110
4594
4580
4571
11102
4562
4547
4535
11249
4519
4506
4493
4484
4473
11141
4465
4450
4432
11099
7044
4416
4412
4399
4395
4387
7043
11097
11091
4382
4377
4368
4364
4362
4360
4355
4353
4349
11047
11023
7039
4341
4325
4320
4318
4314
4308
4301
4297
11021
11020
11015
4295
4288
4278
4272
11010
4270
4266
11006
10888
10886
10882
10879
10876
10874
4255
11248
4254
10871
10869
10867
10865
10863
10861
10859
10787
10717
10686
4247
4231
4228
4218
10681
10660
10657
4213