CSS，求赐教！！！

现在有个页面是这样的 代码如下，  有这么几个需求
1，<div id="main_bg"> 上下左右居中于<div id="main_bg">   并且两个div 会随着浏览器的大小 自动相对变化
2，<div id="main_bg">这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px  
麻烦大神赐教，如何修改当前的页面！
<!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" />
  <title>
   {$PLUGIN_TITLE}
  </title><script language="php">
   $templateVersion = 2; // Template version   // $fieldRowLayout determines the layout of the form fields
   // Options are 'fieldset' and 'table'
   // fieldset: displays fieldnames above the input box
   // table:    displays fieldnames in front of the input box
   $fieldRowLayout = 'table';   // This JS file checks the form for required fields and correct syntax:
   print '<scr' . 'ipt src="/x/plugin/plugin.js.php?' . htmlspecialchars($_SERVER['QUERY_STRING']) . '" type="text/javascript"></scr' . 'ipt>';
</script>
  <style type="text/css">
html {
height: 100%;
width: 100%;
background: #FFFFFF; /* Old browsers */
font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; 
}body {
height: 100%;
width: 100%;
margin: 0;
border: 0;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
font-size:12px; 
font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif;  
color:#333333; 
}
body.box{
background-image: url(images/bg1.jpg);
background-color:#adc8db;
}
#main_bg{
position: absolute;
top: 40%;
left: 50%;
width: 20%;
height:10%;
text-align: left;
background-color: rgba(255, 255, 255, 0.8);
    color: #333333;
margin:0 0 0 -176px; 
-webkit-box-shadow:0px 1px 2px #7d7d7d;
    -moz-box-shadow:0px 1px 2px #7d7d7d;
    box-shadow:0px 1px 2px #7d7d7d;
padding:50px;
background-color:#ECEFF1;
}
#logo{
position:absolute;
top: 32%;
left: 50%;
width: 172PX;
height: 43px;
    margin:0 0 0 -176px; 
}
#headerDiv,#titleDiv,#contentDiv,#footerDiv{
background-color: rgba(255, 255, 255, 0.8); 
    border:none;}
td input{ width:234px;}
label.req{display:none; width:0px;}
div.explanation{display:none;}
.input input{ background-image:url(/mailings/268/tmpl/438/images/input.jpg); 
                  width:70%; 
  height:36px; 
  font-size:14px; 
  font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; 
  color:#999999; 
  border:none; 
  padding-left:10px;}
textarea{ background-color:#25282b; width:222px;  height:136px; border:none;}
.buttons button{background-image:url(/mailings/268/tmpl/438/images/aniu1.png);
                       width:97px; 
       height:39px;
   border:none;}
p.buttons{ text-align:right;}    

fieldset.odd, fieldset.even {
    padding: 0px; 
margin:0px;
text-align:left;}
</style>
 </head>
 <body class="box">
  <div id="logo">
   <img src="images/logo.png" alt="" />
  </div>
  <div id="main_bg">
   <div class="editable">
    plugin content goes here
<input type=text>
   </div>
  </div>
 </body>
</html>
CSS

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script>
    $(document).ready(function(){
    $("input").keyup(function(){
    alert(($("input").val()).length);
    if(($("input").val()).length<10)
    return 1;
    else{
    var s = $("input").attr("size");
    alert(s);
    s = parseInt(s) + 1;
    $("input").attr("size", s);
    }
      });
    });
      </script>
     </head> <body>
    <div style="width:95%; height:100px; background:#eee; margin:0 auto"><input type="text" size="10" id="input"></input></div>
     </body>
    </html>
    写了个类似的，不拿你那个了
      

  2.   


    js是可以了，  但是只能用css！  
    不知道css如何去实现！
      

  3.   

    谢谢先~   css怎么去实现呢？
      

  4.   


    css如何实现第一个需求呢？<div id="main_bg"> 上下左右居中于<div id="main_bg">   并且两个div 会随着浏览器的大小 自动相对变化
      

  5.   


    css如何实现第一个需求呢？<div id="main_bg"> 上下左右居中于<div id="main_bg">   并且两个div 会随着浏览器的大小 自动相对变化
    <div id="main_bg"> 上下左右居中于<div id="main_bg">  不都是main_bg？水平居中可直接在外部DIV样式设置align:center
    但是vertical-align可能无效  加一个和外DIV重叠的单格TABLE，TD的VALIGN可控制竖直居中