자꾸 같은문제로 죄송합니다.

자꾸 같은문제로 죄송합니다.

QA

자꾸 같은문제로 죄송합니다.

본문

도와주세요

사이트를 만들고 있는데 같은 문제로 계속 문제가 샐깁니다.

수정해야할 버튼은 bt-roll입니다 동그란버튼을 중앙으로 오게해야 하는데

<div style="width: 100%x; valign: top ; margin:0 text-align: center;">로 해도 안됩니다

2000863829_1582860148.9762.jpg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/x-ico" />
<title>SUNFLOWER ENERGY</title>
<style type="text/css">
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
#apDiv1 {
 position: absolute;
 top: 90px;
 width: 433px;
 height: 32px;
 z-index: 1;
 visibility: hidden;
}
#apDiv2 {
 position: absolute;
 top: 90px;
 width: 442px;
 height: 30px;
 z-index: 2;
 visibility: hidden;
}
#apDiv3 {
 position: absolute;
 top: 90px;
 width: 505px;
 height: 32px;
 z-index: 3;
 visibility: hidden;
}
#apDiv4 {
 position: absolute;
 top: 90px;
 width: 220px;
 height: 31px;
 z-index: 4;
 visibility: hidden;
}
#mainmenu {
 position: absolute;
 top: 150px;
 width: 506px;
 height: 505px;
 z-index: 5;
 visibility: visible;
}
</style>
<SCRIPT language=javascript>
<!--
function getCookie( name ){
   var nameOfCookie = name + "=";
   var x = 0;
   while ( x <= document.cookie.length ){
        var y = (x+nameOfCookie.length);
        if ( document.cookie.substring( x, y ) == nameOfCookie ) {
             if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                  endOfCookie = document.cookie.length;
             return unescape( document.cookie.substring( y, endOfCookie ) );
        }
        x = document.cookie.indexOf( " ", x ) + 1;
        if ( x == 0 )
            break;
    }
return "";
}

 if ( getCookie( "Notice[1]" ) != "done[1]" ){
window.open ('pop1.html','english1','left=32,top=112,width=800, height=568,scrollbars=no,toolbars=no,resizable=0');  
}
//-->
</SCRIPT>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>
</head>
<body onload="MM_preloadImages('sunflimg/topbtn01o.gif','sunflimg/topbtn02o.gif','sunflimg/topbtn03o.gif','sunflimg/topbtn04o.gif','sunflimg/topbtn05o.gif','sunflimg/topbtns01o.gif','sunflimg/topbtns02o.gif','sunflimg/topbtns03o.gif','sunflimg/topbtns2-01o.gif','sunflimg/topbtns2-02o.gif','sunflimg/topbtns3-01o.gif','sunflimg/topbtns3-02o.gif','sunflimg/topbtns3-03o.gif','sunflimg/topbtns3-04o.gif','sunflimg/topbtns3-05o.gif','sunflimg/topbtns5-01o.gif','sunflimg/topbtns5-02o.gif','sunflimg/mainbtn01o.png','sunflimg/mainbtn03o.png','sunflimg/mainbtn04o.png','sunflimg/topbtns04o.gif','sunflimg/mainbtn02o.png')">
 
 
<table width="100%" height="100%"border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="1200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="1200" bg background="sunflimg/top_bg.gif"border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="351" valign="bottom"><a href="../../index.html"><img src="sunflimg/logo.gif" width="351" height="58" /></a></td>
            <td width="849"><table width="666" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="sunflimg/top_cell01.gif" width="38" height="33" /></td>
              </tr>
              <tr>
                <td><table width="666" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="116"><div id="apDiv1">
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="121"><a href="../../p1-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn01','','sunflimg/topbtns01o.gif',1)"><img src="sunflimg/topbtns01.gif" width="121" height="27" id="sbtn01" /></a></td>
      <td width="79"><a href="../../p1-2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn02','','sunflimg/topbtns02o.gif',1)"><img src="sunflimg/topbtns02.gif" width="118" height="27" id="sbtn02" /></a></td>
      <td width="79"><a href="../../p1-4.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tbtn04','','sunflimg/topbtns04o.gif',1)"><img src="sunflimg/topbtns04.gif" name="tbtn04" width="115" height="27" id="tbtn04" /></a></td>
      <td width="79"><a href="../../p1-3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn03','','sunflimg/topbtns03o.gif',1)"><img src="sunflimg/topbtns03.gif" width="86" height="27" id="sbtn03" /></a></td>
    </tr>
  </table>
</div><a href="../../p1-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn01','','sunflimg/topbtn01o.gif',1)"><img src="sunflimg/topbtn01.gif" name="btn01" width="112" height="58" id="btn01" onmouseover="MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','hide','apDiv4','','hide')" /></a></td>
                    <td width="1"><img src="sunflimg/menubar.gif" alt="" width="1" height="58" /></td>
                    <td width="140"><div id="apDiv2">
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="82"><a href="../../p2-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn04','','sunflimg/topbtns2-01o.gif',1)"><img src="sunflimg/topbtns2-01.gif" width="82" height="27" id="sbtn04" /></a></td>
      <td width="118"><a href="../../p2-2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtns05','','sunflimg/topbtns2-02o.gif',1)"><img src="sunflimg/topbtns2-02.gif" width="175" height="27" id="sbtns05" /></a></td>
    </tr>
  </table>
</div><a href="../../p2-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn02','','sunflimg/topbtn02o.gif',1)"><img src="sunflimg/topbtn02.gif" width="136" height="58" id="btn02" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide')" /></a></td>
                    <td width="1"><img src="sunflimg/menubar.gif" alt="" width="1" height="58" /></td>
                    <td width="135"><div id="apDiv3">
  <table width="453" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="90"><a href="../../p3-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn06','','sunflimg/topbtns3-01o.gif',1)"><img src="sunflimg/topbtns3-01.gif" name="sbtn06" width="90" height="27" id="sbtn06" /></a></td>
      <td width="100"><a href="../../p3-2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn07','','sunflimg/topbtns3-02o.gif',1)"><img src="sunflimg/topbtns3-02.gif" name="sbtn07" width="100" height="27" id="sbtn07" /></a></td>
      <td width="100"><a href="../../p3-3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn08','','sunflimg/topbtns3-03o.gif',1)"><img src="sunflimg/topbtns3-03.gif" name="sbtn08" width="100" height="27" id="sbtn08" /></a></td>
      <td width="82"><a href="../../p3-4.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn09','','sunflimg/topbtns3-04o.gif',1)"><img src="sunflimg/topbtns3-04.gif" name="sbtn09" width="82" height="27" id="sbtn09" /></a></td>
      <td width="81"><a href="../../p3-5.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn010','','sunflimg/topbtns3-05o.gif',1)"><img src="sunflimg/topbtns3-05.gif" name="sbtn010" width="82" height="27" id="sbtn010" /></a></td>
    </tr>
  </table>
</div><a href="../../p3-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn03','','sunflimg/topbtn03o.gif',1)"><div id="mainmenu">
              <table width="200" border="0" cellspacing="27">
                <tr>
                  <td><a href="../../p2-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mbtn01','','sunflimg/mainbtn01o.png',1)"><img src="sunflimg/mainbtn01.png" width="209" height="209" id="mbtn01" /></td>
                  <td><a href="../../p3-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mbtn02','','sunflimg/mainbtn02o.png',1)"><img src="sunflimg/mainbtn02.png" width="209" height="209" id="mbtn02" /></a></td>
                </tr>
                <tr>
                  <td><a href="../../p4-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mbtn03','','sunflimg/mainbtn03o.png',1)"><img src="sunflimg/mainbtn03.png" width="209" height="209" id="mbtn03" /></a></td>
                  <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mbtn04','','sunflimg/mainbtn04o.png',1)"><img src="sunflimg/mainbtn04.png" width="209" height="209" id="mbtn04" /></a></td>
                </tr>
              </table>
            </div>
<a href="../../p3-1.html"><img src="sunflimg/topbtn03.gif" name="btn03" width="134" height="58" id="btn03" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','show','apDiv4','','hide')" /></a></td>
                    <td width="1"><img src="sunflimg/menubar.gif" alt="" width="1" height="58" /></td>
                    <td width="134"><a href="../../p4-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn04','','sunflimg/topbtn04o.gif',1)"><img src="sunflimg/topbtn04.gif" name="btn04" width="134" height="58" id="btn04" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','hide','apDiv4','','hide')" /></a></td>
                    <td width="1"><img src="sunflimg/menubar.gif" alt="" width="1" height="58" /></td>
                    <td width="138"><div id="apDiv4">
  <table width="159" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="68"><a href="../../gnuboard/bbs/board.php?bo_table=notice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn011','','sunflimg/topbtns5-01o.gif',1)"><img src="sunflimg/topbtns5-01.gif" width="68" height="27" id="sbtn011" /></a></td>
      <td width="91"><a href="../../gnuboard/bbs/board.php?bo_table=download" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sbtn012','','sunflimg/topbtns5-02o.gif',1)"><img src="sunflimg/topbtns5-02.gif" width="92" height="27" id="sbtn012" /></a></td>
    </tr>
  </table>
</div><a href="../../gnuboard/bbs/board.php?bo_table=notice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn05','','sunflimg/topbtn05o.gif',1)"><img src="sunflimg/topbtn05.gif" width="146" height="58" id="btn05" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','hide','apDiv4','','show')" /></a></td>
                  </tr>
                  </table></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="1200" height="600" bg background="sunflimg/mainbg.jpg" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><!DOCTYPE html>
<html lang="ko-KR">
<head>
 <title>UI Laboratory</title>
 <meta charset="utf-8" />
 <link rel="stylesheet" type="text/css" href="common.css" />
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
<style type="text/css">
 .mainimg-wrap {position:relative; width:572px; height:448px; overflow:hidden;}
 .mainimg-wrap ul.mainimg {position:absolute;}
 .mainimg-wrap ul.mainimg li {float:left; width:572px;}
 
 ul.bt-roll {width:572px; margin:0; margin-top:0px;}
  ul.bt-roll li {float:left; margin-right:5px;}
   ul.bt-roll { list-style: none; display: inline-block;  margin: 0  padding: 0; }
ul.bt-roll {width:572px; margin:0 ; margin-top:-10px;}
 ul.bt-roll li {display: inline-block; margin-right:5px;}
  
</style>
</head>
<body>
<div class="mainimg-wrap">
 <ul class="mainimg clfix">
  <li><a href="#"><img src="../../sunflimg/mainimg01.png" alt="" width="572" height="448"></a></li>
  <li><a href="#"><img src="../../sunflimg/mainimg02.png" alt="" width="572" height="448"></a></li>
  <li><a href="#"><img src="../../sunflimg/mainimg03.png" alt="" width="572" height="448"></a></li>
  <li><a href="#"><img src="../../sunflimg/mainimg04.png" alt="" width="572" height="448"></a></li>
 </ul>
</div>
<div style="width: 100%x; valign: top ;0 text-align:center;">
<ul class="bt-roll">
 <li><a href="#"><img src="../../sunflimg/btn_circle_.png" alt=""></a></li>
 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
</ul>
</div>
<script type="text/javascript">
 var $list = $('ul.mainimg');
 var size = $list.children().outerWidth();
 var len =  $list.children().length;
 var speed = 2000;
 var timer = null;
 var auto = true;
 var cnt = 1;
 $list.css('width',len*size);
 if(auto) timer = setInterval(autoSlide, speed);
 $list.children().bind({
  'mouseenter': function(){
   if(!auto) return false;
   clearInterval(timer);
   auto = false;
  },
  'mouseleave': function(){
   timer = setInterval(autoSlide, speed);
   auto = true;
  }
 })
 $('.bt-roll').children().bind({
  'click': function(){
   var idx = $('.bt-roll').children().index(this);
   cnt = idx;
   autoSlide();
   return false;
  },
  'mouseenter': function(){
   if(!auto) return false;
   clearInterval(timer);
   auto = false;
  },
  'mouseleave': function(){
   timer = setInterval(autoSlide, speed);
   auto = true;
  }
 });  
 function autoSlide(){
  if(cnt>len-1){
   cnt = 0;
  }
  $list.animate({'left': -(cnt*size)+'px' },'normal');
  var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
  $('.bt-roll').children().find('img').attr('src',source2);
  var source = $('.bt-roll').children().find('img').attr('src').replace('.png','_.png');
  $('.bt-roll').children().eq(cnt).find('img').attr('src',source);
  cnt++;
 }
</script>
</body>
</html></td>
            <td valign="top"></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><img src="sunflimg/footer.gif" width="1200" height="57" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

같은소스로 작업한 홈페이지입니다.

http://designinvent.co.kr

이 질문에 댓글 쓰기 :

답변 2



	
		
			<div style="width: 100%x; valign: top ;0 text-align:center;">
		
	


 width: 100%x <= 오타가있는거 같습니다 

	
		
			 
			<ul class="bt-roll">
		
	



	
		
			 
			 <li><a href="#"><img src="../../sunflimg/btn_circle_.png" alt=""></a></li>
		
	



	
		
			 
			 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
		
	



	
		
			 
			 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
		
	



	
		
			 
			 <li><a href="#"><img src="../../sunflimg/btn_circle.png" alt=""></a></li>
		
	



	
		
			 
			</ul>
		
	



	
		
			 
			</div>
		
	


bt-roll에 고정 width 값을주고.. margin:0 auto 로 가운데로 보내면 될거같은데..

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT