CMS表单无法按css正确显示

时间:2010-07-05 22:33:36

标签: php html css

我正在使用CMS系统,该系统具有用于生成表单的模板,具有预定义的CSS。

正在使用的CSS文件是here

我目前使用的表格是:

<div class="bodyline">
    <?php $theform->startForm($pageTitle)?>

    <div id="rightSideDiv">
        <fieldset>
            <legend><label for="report">Report</label></legend>
            <p>
                <?php $theform->showField("towel")?>
            </p>
        </fieldset>
    </div>

    <div id="leftSideDiv">
        <fieldset>
            <legend><label for="name">Info</label></legend>

            <p class="big"><?php $theform->showField("firstname"); ?></p>
            <p class="big"><?php $theform->showField("lastname"); ?></p>
            <p class="big"><?php $theform->showField("country"); ?></p>
            <p class="big"><?php $theform->showField("passport"); ?></p>
            <p class="big"><?php $theform->showField("email"); ?></p>
            <p class="big"><?php $theform->showField("roomnumber"); ?></p>
            <p class="big"><?php $theform->showField("hostel"); ?></p>
            <p class="big"><?php $theform->showField("checkin"); ?></p>
            <p class="big"><?php $theform->showField("checkout"); ?></p>
            <p class="big"><?php $theform->showField("locker"); ?></p>
            <p class="big"><?php $theform->showField("towel"); ?></p>
            <p class="big"><?php $theform->showField("tabno"); ?></p>

        </fieldset>

    </div>

</div>

理论上,这应该在左侧显示一个方框,在右侧显示一个方框。相反,rightSideDiv显示在leftSideDiv的上方或下方,占据了表单的整个宽度。

生成的HTML是

<form action="/1/phpbms/modules/micro%20hospitality/guests_addedit.php?id=1" method="post" name="record" onsubmit="return validateForm(this);"><div id="dontSubmit"><input value=" " onclick="return false;" type="submit"></div>        <div id="topButtons"><div class="saveCancels"><input accesskey="s" title="Save (alt+s)" id="saveButton1" name="command" value="save" class="Buttons" type="submit"><input id="cancelButton1" name="command" value="cancel" class="Buttons" onclick="this.form.cancelclick.value=true;" accesskey="x" title="(access key+x)" type="submit"></div></div>
        <h1 id="h1Title"><span>Guests</span></h1>
    <div id="rightSideDiv">
        <fieldset>
            <legend><label for="report">Report</label></legend>
            <p>
                <input id="towel" name="towel" value="1" class="radiochecks" type="checkbox"> <label id="towelLabel" for="towel">Towel</label>          </p>

        </fieldset>
    </div>

    <div id="leftSideDiv">
        <fieldset>
            <legend><label for="name">Info</label></legend>

            <p class="big"><label for="firstname" class="important">First Name</label><br><input id="firstname" name="firstname" value="Jason" size="32" maxlength="64" class="important" type="text"></p>

        </fieldset>

    </div>

        </form>

现在,包含的表单工作正常,我无法找出原因。

适用页面的随附表单代码:

<div class="bodyline">
    <?php $theform->startForm($pageTitle)?>

    <div id="rightSideDiv">
        <fieldset>
            <legend><label for="importance">importance / privacy</label></legend>
            <p>
                <?php $theform->showField("importance")?>
                <?php $theform->showField("private")?>
            </p>
        </fieldset>
    </div>

    <div id="leftSideDiv">
        <fieldset>
            <legend><label for="content">memo</label></legend>
            <p id="timeStampP">
                <button id="timeStampButton" type="button" class="graphicButtons buttonTimeStamp" accesskey="t" title="Add time stamp to memo (Access Key - t)">time stamp</button>
            </p>
            <p>
                <textarea name="content" cols="45" rows="23" id="content"><?php echo htmlQuotes($therecord["content"])?></textarea>
                <input id = "username" type="hidden" value="<?php echo formatVariable(trim($_SESSION["userinfo"]["firstname"]." ".$_SESSION["userinfo"]["lastname"]))?>" />
            </p>
        </fieldset>
    </div>

</div>

和结果HTML

<form action="/1/phpbms/modules/base/notes_addedit1.php" method="post" name="record" onsubmit="return submitForm(this)" id="record"><div id="dontSubmit"><input value=" " onclick="return false;" type="submit"></div>        <div id="topButtons"><div class="saveCancels"><input accesskey="s" title="Save (alt+s)" id="saveButton1" name="command" value="save" class="Buttons" type="submit"><input id="cancelButton1" name="command" value="cancel" class="Buttons" onclick="this.form.cancelclick.value=true;" accesskey="x" title="(access key+x)" type="submit"></div></div>
        <h1 id="h1Title"><span>Note/Task/Event</span></h1>

    <div id="rightSideDiv">
        <fieldset>
            <legend><label for="importance">importance / privacy</label></legend>
            <p>
                <select name="importance" id="importance"> <option value="3">Highest</option>

<option value="2">High</option>
<option value="1">Medium</option>
<option value="0" selected="selected">Normal</option>
<option value="-1">Low</option>
<option value="-2">Lowest</option>
</select>
                        <input id="private" name="private" value="1" class="radiochecks" checked="checked" type="checkbox"> <label id="privateLabel" for="private">private</label>          </p>
        </fieldset>

    </div>

    <div id="leftSideDiv">
        <fieldset>
            <legend><label for="content">memo</label></legend>
            <p id="timeStampP">
                <button id="timeStampButton" type="button" class="graphicButtons buttonTimeStamp" accesskey="t" title="Add time stamp to memo (Access Key - t)">time stamp</button>
            </p>

            <p>
                <textarea name="content" cols="45" rows="23" id="content"></textarea>
                <input id="username" value="Administrator" type="hidden">
            </p>
        </fieldset>
    </div>

        </form>

我描述的行为有什么理由吗?

1 个答案:

答案 0 :(得分:0)

leftSideDiv没有浮动。要么在css中重新定义它,要么将其设置为内联样式:

float:left

http://phpbms.org/browser/trunk/phpbms/common/stylesheet/mozilla/pages/base/notes.css#L26

根据容器的宽度,它还需要一个宽度。这可能会有所帮助:

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/