php로 조그마한 프로그램 작성하고 있습니다.
테이블 말고 div와 css를 이용하여 중앙에 일정폭으로 정렬하여 메뉴를 만들고 싶습니다.
에제 좀 알려 주시면 감사하겠습니다.
참고해보세요.
<html> <head> </head> <!-- 스타일 적용 순서는 이렇습니다. style type > html >javascript 클래스는 .으로 접근하고. div는 #으로 접근 합니다. //--> <style type="text/css"> #editor {font-family:Arial, Tahoma,sans-serif; background-color:#eab9b2; font-size:small; color:white;} .div_item {font-family:Arial, Tahoma,sans-serif; background-color:#eab9b2; font-size:22px; color:white;} </style> <!-- 화면 1/2 - 자신 1/2) //--> <body onkeydown="fn_keydown()"> <div id="start" class="div_item" style='background-color:transparent; color:black; width:300; height:300; border:solid; border-width:1; position:absolute; left:200; top:50px; z-index:10000;'> <table border="0" cellpadding="0" cellspacing="0"> <!-- table width height 를 제거 해야 div 크기로 지정 됩니다 //--> <tr><td> shint </td></td> </table> </div> <!-- 스크립트는 div 하단에 있어야 하고. html에 style 코드가 있어야 적용 됩니다. //--> <script language="javascript"> //http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=66510180&qb=67iM65287Jqw7KCAIO2BrOq4sA==&enc=utf8§ion=kin&rank=1&search_sort=0&spq=0 var browser_w = document.body.clientWidth; var browser_h = document.body.clientHeight; //http://blog.naver.com/rmc841/60108724030 var desktop_w = window.screen.availWidth; var desktop_h = window.screen.availHeight; function fn_keydown() { var id = document.getElementById("start"); code = String.fromCharCode(event.keyCode); if(code == 'A') { id.style.left = parseInt(id.style.left) - 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'W') { id.style.top = parseInt(id.style.top) - 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'D') { id.style.left = parseInt(id.style.left) + 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'S') { id.style.top = parseInt(id.style.top) + 100; //parseInt 꼭 해줘야 됩니다. } var bw = parseInt(browser_w); var bh = parseInt(browser_h); var l = parseInt(id.style.left); var w = parseInt(id.style.width); var t = parseInt(id.style.top); var h = parseInt(id.style.height); var cx = (bw/2) - (w/2); id.style.left = parseInt(cx); id.innerHTML = "cx: "+ cx + " desktop_w: "+desktop_w; } document.onkeypress = fn_keydown; </script> </body> </html>
---------------------------------------------------------------------------- 젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다. 정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
많은 도움이 될 것 같습니다. 그런데 한 가지만 더 알려 주시면 감사하겠습니다.
<div id="start" class="div_item" style='background-color:transparent; color:black; width:300; height:300; border:solid; border-width:1; position:absolute; left:200; top:50px; z-index:10000;'>
div의 깊이값입니다. html에 style을 적어주셔야 style에 값을 넣을 수 있습니다.
IE에서도 표준대로 보이도록 적절한 doctype을 써준 다음에 박스의 width를 고정폭으로 정해주고 좌우 마진을 auto로 놓으면 박스가 가운데로 정렬이 됩니다.
중요한건 doctype입니다. 이거 안적어주면 IE에서는 예전 버젼 호환성 모드로 보여주기 때문에 가운데 정렬 안됩니다.
<!doctype html> <html> <head> <style type="text/css"> <!-- .center { width: 200px; margin: 0 auto; } .box { border: 1px solid black; } --> </style> <body> <div class="center box"> test </div> </body> </html>
덕분에 필요한 것 배웠구요
오늘 밤 중으로 메뉴는 완성될 것 같습니다.
텍스트 포맷에 대한 자세한 정보
<code>
<blockcode>
<apache>
<applescript>
<autoconf>
<awk>
<bash>
<c>
<cpp>
<css>
<diff>
<drupal5>
<drupal6>
<gdb>
<html>
<html5>
<java>
<javascript>
<ldif>
<lua>
<make>
<mysql>
<perl>
<perl6>
<php>
<pgsql>
<proftpd>
<python>
<reg>
<spec>
<ruby>
<foo>
[foo]
이런식으로 합니다.
참고해보세요.
<html> <head> </head> <!-- 스타일 적용 순서는 이렇습니다. style type > html >javascript 클래스는 .으로 접근하고. div는 #으로 접근 합니다. //--> <style type="text/css"> #editor {font-family:Arial, Tahoma,sans-serif; background-color:#eab9b2; font-size:small; color:white;} .div_item {font-family:Arial, Tahoma,sans-serif; background-color:#eab9b2; font-size:22px; color:white;} </style> <!-- 화면 1/2 - 자신 1/2) //--> <body onkeydown="fn_keydown()"> <div id="start" class="div_item" style='background-color:transparent; color:black; width:300; height:300; border:solid; border-width:1; position:absolute; left:200; top:50px; z-index:10000;'> <table border="0" cellpadding="0" cellspacing="0"> <!-- table width height 를 제거 해야 div 크기로 지정 됩니다 //--> <tr><td> shint </td></td> </table> </div> <!-- 스크립트는 div 하단에 있어야 하고. html에 style 코드가 있어야 적용 됩니다. //--> <script language="javascript"> //http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=66510180&qb=67iM65287Jqw7KCAIO2BrOq4sA==&enc=utf8§ion=kin&rank=1&search_sort=0&spq=0 var browser_w = document.body.clientWidth; var browser_h = document.body.clientHeight; //http://blog.naver.com/rmc841/60108724030 var desktop_w = window.screen.availWidth; var desktop_h = window.screen.availHeight; function fn_keydown() { var id = document.getElementById("start"); code = String.fromCharCode(event.keyCode); if(code == 'A') { id.style.left = parseInt(id.style.left) - 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'W') { id.style.top = parseInt(id.style.top) - 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'D') { id.style.left = parseInt(id.style.left) + 100; //parseInt 꼭 해줘야 됩니다. } if(code == 'S') { id.style.top = parseInt(id.style.top) + 100; //parseInt 꼭 해줘야 됩니다. } var bw = parseInt(browser_w); var bh = parseInt(browser_h); var l = parseInt(id.style.left); var w = parseInt(id.style.width); var t = parseInt(id.style.top); var h = parseInt(id.style.height); var cx = (bw/2) - (w/2); id.style.left = parseInt(cx); id.innerHTML = "cx: "+ cx + " desktop_w: "+desktop_w; } document.onkeypress = fn_keydown; </script> </body> </html>----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
정말 감사합니다.
많은 도움이 될 것 같습니다.
그런데 한 가지만 더 알려 주시면 감사하겠습니다.
위 div의 position을 화면의 크기에 관계없이 중앙으로 오게 하려면 어떻게 해야 하나요?
그라고 z-index의 의미는 무엇인가요?
z-index만 답변 드릴 수 있겠네요
div의 깊이값입니다.
html에 style을 적어주셔야 style에 값을 넣을 수 있습니다.
----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
IE에서도 표준대로 보이도록 적절한 doctype을
IE에서도 표준대로 보이도록 적절한 doctype을 써준 다음에
박스의 width를 고정폭으로 정해주고
좌우 마진을 auto로 놓으면
박스가 가운데로 정렬이 됩니다.
중요한건 doctype입니다.
이거 안적어주면 IE에서는 예전 버젼 호환성 모드로 보여주기 때문에
가운데 정렬 안됩니다.
<!doctype html> <html> <head> <style type="text/css"> <!-- .center { width: 200px; margin: 0 auto; } .box { border: 1px solid black; } --> </style> <body> <div class="center box"> test </div> </body> </html>위 두 분께 정말 감사드립니다.
덕분에 필요한 것 배웠구요
오늘 밤 중으로 메뉴는 완성될 것 같습니다.
댓글 달기