0

ページ メニュー バーの作成に使用しているスタイル シートに問題があります。ページに前ページまたは次ページがない場合、セルは空で、CSS は背景画像のみを適用します。このソリューションを実装しようとすると、メニュー バーを構成するセルが移動し、すべてが整列しなくなります。この問題を解決する方法を見つけ出すために、助けが必要です。

ここに画像の説明を入力

以下は、グレー表示された [戻る] ボタンとして画像に表示されている空のセルに適用されたクラスです。

td.menu-back-disabled {
    background-image: url('back_first.png');
    display: block;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 85px;    
}
li.menu-bar {
    list-style-type: none;
    background-image: url('top.png');
    background-repeat: repeat-x;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 100%;
}

これは、メニュー バーの html です。

<table class="menu">
<br>
<tr>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=environment" class="menu-home">
</a>
</td>
<td class="menu-edit-selected">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=upload&number=1&filter=1" class="menu-upload">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=comments" class="menu-comments">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=log&number=1" class="menu-log">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=stats&number=1" class="menu-stats">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=settings" class="menu-settings">
</a>
</td>
<td class="menu-bar">
</td>
<td class="menu-bar-right">
</td>
<td class="menu-back-disabled">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=edit&number=2&filter=1" class="menu-next">
</a>
</td>
</tr>
</table>
4

1 に答える 1

0

&nbsp;空のセルにプレースホルダーが含まれていることを確認してください。

また、テーブルを避けてください...

編集：

これが私のテーブルが現時点でどのように見えるかです。1 つの列しかないため、テーブルが新しい行に折り返される場所があってはなりません。width:100%;

CSS:

    <style type="text/css">
        #menu {
            width:100%;
        }
        #menu td {
            text-align:center;
        }
        .menu-bar {
            width:30%;
        }
    </style>

HTML:

    <table cellspacing="0" cellpadding="0" id="menu">
        <tr>
            <td>
                <a href="#" class="menu-home">Home</a>
            </td>
            <td class="menu-edit-selected">
                <a href="#" class="menu-home">Edit</a>
            </td>
            <td>
                <a href="#" class="menu-upload">Upload</a>
            </td>
            <td>
            <a href="#" class="menu-comments">Comments</a>
            </td>
            <td>
                <a href="#" class="menu-log">Log</a>
            </td>
            <td>
                <a href="#" class="menu-stats">Statistics</a>
            </td>
            <td>
                <a href="#" class="menu-settings">Settings</a>
            </td>
            <td class="menu-bar">&nbsp;</td>
            <td class="menu-bar-right">&nbsp;</td>
            <td class="menu-back-disabled">
                <a href="#" class="menu-next">Back</a>
            </td>
            <td>
                <a href="#" class="menu-next">Next</a>
            </td>
        </tr>
    </table>

これからの変更は、おそらくパディング、マージン、または幅の設定によるものです。td.menu-barand/orは、セルではなくテーブル/行の幅全体を意味するため、td.menu-bar-right設定できません。width:100%;

于 2012-07-23T16:42:40.483 に答える