레이어 위치에서.
firefox 랑 i.e 랑 다르게 잡네요;;
어느게 정상인지도 모르겠어요ㅡ_ㅡ;;
물론 firefox 가 표준이긴 하겠지만..a
문제 되는건..
problem 이 나오는 레이어 부분이에요..
firefox 는 menu 레이어에 딱 들어가게 나오는데.
i.e 에서는 menu 레이어의 가운데에서부터 시작하네요;;
그렇다고 center 태그를 그 위까지만 적용하면.
firefox 는 아예 menu 레이어 밖으로 벗어나구요ㅡ_ㅡ;;
어케 해야하나요?;;;
<html>
<body>
<center>
<div id=div1 style="width:975px;height:500px;border:1px #bbb dotted">
<div id=main style="width:790px;height:80%;float:left;border:red 1px solid;">
main</div>
<div id=menu style="width:150px;height:80%;float:right;border:#d3e1cb 1px solid;">
menu
<div id=problem style="position:absolute;bottom:20px;color:#333333;border:blue 1px solid;width:200px">
problem</div>
</div>
</div>
</center>
</body>
</html>
레이어 위치
-
astraea
- 해커
- Posts: 477
- Joined: 2004 01 04 23:57 23
- Contact:
-
위치값이문제
Re: 레이어 위치
<center>
<div id=div1 style="width:975px;height:500px;border:1px #bbb dotted">
<div id=main style="width:700px;height:80%;float:left;border:red 1px solid;">
main</div>
<div id=menu style="width:150px;height:80%;float:right;border:#d3e1cb 1px solid;">
menu
<div id=problem style="width:150px;bottom:20px;color:#333333;border:blue 1px solid;">
problem</div>
</div>
</div>
</center>
상대위치와 절대위치를 잘못지정해서 문제가 되는 것같내요.. 그리고 위치지정값을 지정하지 않을 경우 모두 상대위치로 처리되고 브라우저마다 nested div 태그 처리방식이 다른 것같내요.
그리고 스타일시트는 나중에 관리를 위해서 동일한 규칙순서를 가지면 좋은 것같습니다.
<div id=div1 style="width:975px;height:500px;border:1px #bbb dotted">
<div id=main style="width:700px;height:80%;float:left;border:red 1px solid;">
main</div>
<div id=menu style="width:150px;height:80%;float:right;border:#d3e1cb 1px solid;">
menu
<div id=problem style="width:150px;bottom:20px;color:#333333;border:blue 1px solid;">
problem</div>
</div>
</div>
</center>
상대위치와 절대위치를 잘못지정해서 문제가 되는 것같내요.. 그리고 위치지정값을 지정하지 않을 경우 모두 상대위치로 처리되고 브라우저마다 nested div 태그 처리방식이 다른 것같내요.
그리고 스타일시트는 나중에 관리를 위해서 동일한 규칙순서를 가지면 좋은 것같습니다.
-
position만으로
Re: 레이어 위치
<html>
<body style=margin:0 0 0 0>
<div style=position:absolute;left:0px;top:0px;width:150px;height:80%;background:blue;>주메뉴1</div>
<div style=position:absolute;left:0px;top:80%;width:150px;height:20%;background:red;>광고1</div>
<div style=position:absolute;left:160px;top:0px;width:150px;height:80%;background:gray;>주메뉴1</div>
<div style=position:absolute;left:160px;top:80%;width:150px;height:20%;background:yellow;>광고2</div>
</body>
</html>
HTML 배우는 것도 그렇지만, CSS에도 여러 요소를 사용하기에 따라 다르기 때문에 이것저것 테스트해볼 수 밖에 없다는 생각입니다.
이것을 table로 짜는 것은 어쩌면 간단할 수도 있지만, 아주 간단하게 되는군요.. ^^
<body style=margin:0 0 0 0>
<div style=position:absolute;left:0px;top:0px;width:150px;height:80%;background:blue;>주메뉴1</div>
<div style=position:absolute;left:0px;top:80%;width:150px;height:20%;background:red;>광고1</div>
<div style=position:absolute;left:160px;top:0px;width:150px;height:80%;background:gray;>주메뉴1</div>
<div style=position:absolute;left:160px;top:80%;width:150px;height:20%;background:yellow;>광고2</div>
</body>
</html>
HTML 배우는 것도 그렇지만, CSS에도 여러 요소를 사용하기에 따라 다르기 때문에 이것저것 테스트해볼 수 밖에 없다는 생각입니다.
이것을 table로 짜는 것은 어쩌면 간단할 수도 있지만, 아주 간단하게 되는군요.. ^^
Who is online
Users browsing this forum: No registered users and 1 guest