0

私は自分のプロジェクトの 1 つで UI デザインを実装していますが、CSS に大きな問題があるようです。

私の知る限り、入力タイプのスタイルを指定しました：テキスト、CSSが受け入れる方法のボタン：

body input[type=text]{
    border:1px solid #208278;
    height:24px;
    padding-left: 5px;
}
body button{
    background-color: #279A8F;
    border:0px;
    color:white;
    height:24px;
}
body input[type=password]{
    border:1px solid #208278;
    height:24px;
    padding-left: 5px;
}
body input[type=submit], input[type=button]{
    background-color: #279A8F;
    border:0px;
    color:white;
    height:24px;
}

ログイン ページでは、フィールドの高さが 24 ピクセルに見えますが、ログインすると、すべてのフィールドが大きくなり、高さが 24 ピクセルを超えます。私は見当もつかない。1つのポイントは、ログイン後、フィールドがパディングとマージンを持つコンテナに存在することですが、これがフィールドにどのように影響するかについては理由がわかりません。この問題は私を夢中にさせています。誰か洞察を提供してもらえますか?

フォーム フィールドが配置されるコンテナは次のとおりです。

#container{
    width:1100px;
    margin: 0 auto;
}
#leftbar{
    float:left;
    width:200px;
    font-size:13px;
    background-color:#237971;
    color:white;
    padding:4px;
}
#rightbar{
    float:right;
    width:200px;
    font-size: 13px;
    background-color:#237971;
    color:white;
    padding:4px;
}
#middlebar{
    padding:5px;
    margin-left:3px;
    margin-right:3px;
    float:left;
    width:660px;
    border:1px solid black;
}

ログインページの HTML コード:

<html>
<head>
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
    <title>
        My Page
    </title>

</head>
<body>
<div id=header>
    &nbsp;&nbsp;&nbsp;Welcome
</div>
<?php echo validation_errors(); ?>


<?php echo form_open('login/verify'); ?>
<table>
    <tr>
        <td align="right"><label for="email">E-Mail:</label></td>
        <td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
    </tr>
    <tr>
        <td align="right"><label for="password">Password:</label></td>
        <td align="left"><input type="password" name="password" id="password"></td>
    </tr>
    <tr>
        <td></td>
        <td align="left"><input type="submit" name="submit" value="Login"></td>
    </tr>
</table>
 </form>
<br/>
<a href="<?php echo base_url();?>signup/signup">Sign up</a> for a new account<br/>
</body>

</html>

会員エリアのHTMLコード:

<!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>
    <script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
    <script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">



    </script>
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
    <title>Welcome</title>
</head>
<body>
<div id=container>
    <div id=header>
        &nbsp;&nbsp;&nbsp;Members area
    </div>


    <div id="leftbar">
        <div class=content><a href="<?php echo base_url();?>user/home/logout">Logout</a></div></div>
    <div id="rightcontainer">
        <div id="middlebar">
            <?php echo validation_errors();?>
            <?php echo form_open_multipart('home/create/validate'); ?>
            <table>
                <tr>
                    <td align="right"><label for="fullname">full Name:</label></td>
                    <td align="left"><input type="text" name="fullname"></td>
                </tr>


<tr>
                    <td></td>
                    <td><input type="submit" name="finish" value="Finish"></td>
                </tr>
            </table>

        </div>
        <div id="rightbar"></div>
    </div>
</div>

</body>

</html>

メンバーのエリアのすべてのフィールドが 24px より大きく表示されます。：（ 私を助けてください！

事前にどうもありがとうございました。

4

1 に答える 1

0

主な欠点を突き止めました。HTML コードで以下のステートメントを使用してログイン ページを標準化していませんでした。

<!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">
于 2013-04-20T16:06:52.197 に答える