자꾸 같은문제로 죄송합니다.
본문
도와주세요
사이트를 만들고 있는데 같은 문제로 계속 문제가 샐깁니다.
수정해야할 버튼은 bt-roll입니다 동그란버튼을 중앙으로 오게해야 하는데
<div style="width: 100%x; valign: top ; margin:0 text-align: center;">로 해도 안됩니다
<!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>
같은소스로 작업한 홈페이지입니다.
답변 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>
수정되어 있었습니다 100%로
bt-roll에 고정 width 값을주고.. margin:0 auto 로 가운데로 보내면 될거같은데..
글 감사합니다 이미 해봤지만 안됩니다
답변을 작성하시기 전에 로그인 해주세요.
