0

私は最近、単純な Web ページに取り組んでいます。ほとんどすべてのスタイル情報を CSS ファイルに配置したいと考えています。ページのメイン レイアウトは表です。私はこのように見えます： 

<body>
<table class="glowna">
<tr>
  <td colspan="2">...</td>
</tr>
<tr>
  <td id="glowna_top" colspan="2">
    <ul class="menu_gorne">
      <li>..</li>
    </ul>
  </td>
</tr>
<tr>
  <td id="glowna_menu_lewe">
    <ul class="menu_lewe">
      <li>...</li>
    </ul>
  </td>
  <td id="glowna_main">
      ...
  </td>
</tr>
</table>
</body>

CSSは次のようになります。

ul.menu_lewe, ul.menu_gorne {
  display:block; list-style:none;margin:0;}
ul.menu_lewe { 
  width:200px; padding:2px 20px 2px 2px;
  background-color:#9ce;border:none; vertical-align:top;}
ul.menu_lewe li { 
  border-bottom:1px solid #9ce; }
ul.menu_lewe a:link, ul a:visited { 
  display:block;width:176px;text-decoration:none;padding:7px;font-  weight:bold;background-color:#27c;color:#def;border-right:10px solid #25b;border-left:5px solid #25b; }
ul.menu_lewe a:hover { 
  width:176px;background-color:#28e;color:#fff;border-right:20px solid #26d; }
ul.menu_gorne { 
  position:absolute; }
ul.menu_gorne li { 
  float:left;padding:2px 2px 2px 2px;background-color:#9ce;border:none; }
ul.menu_gorne a:link, ul a:visited { 
  text-decoration:none;display:block;width:200px;text-align:center;padding:5px 0;font-weight:bold;background-color:#27c;color:#def;border-top:10px solid #25b; }
ul.menu_gorne a:hover { 
  background-color:#28e;color:#fff;border-top:20px solid #26d; }
ul.lista_dostawcow {
  width:800px;}
table.glowna { 
  background-color:#9ce;table-layout:fixed;width:1024px;margin-left:auto;margin-right:auto; }
td#glowna_top { 
  height:55px; vertical-align:top;}
td#glowna_main { 
  width:824px; text-align:left;}
td#glowna_menu_lewe { 
  width:200px;}

問題は次のとおり
です。すべての幅を設定しても、テーブル セルが表示されます。セル「glowna_menu_lewe」を200pxまたは sth 近くにして、他のセルで残りのスペースを埋めることができます。

2 . リスト「 menu_lewe」をそのセルの上に配置したいと思います。verical-align属性を top に設定しても、垂直方向に中央揃えになりました。

非常に多くのコードを投稿して申し訳ありませんが、何が問題を引き起こしているのかわかりませんでした。

4

1 に答える 1

1

1 - 変更:

table.glowna { 
  background-color:#9ce;
  table-layout:fixed;
  width:1024px;
  margin-left:auto;
  margin-right:auto; 
}
td#glowna_main { 
  width:824px;
  text-align:left;
}

これに：

table.glowna { 
  background-color:#9ce;
  width:1024px;
  margin-left:auto;
  margin-right:auto;
}
td#glowna_main { 
  text-align:left;
}

2-代わりにvalign="top"属性を使用してtdタグ付けしますvertical-align:top;

于 2012-11-11T15:08:47.407 に答える