2012-01-26 12 views
0

は次のようになります。ここでは 私はCSSスタイルに問題がある、私は自分のページを作成しようとしています

the image

は私がカットしたもののアルバムです...

https://plus.google.com/photos/107900027460905004143/albums/5701903548070918369?authkey=CNjam-nOwZzxSg

ここに私のCSSがあります(サブテーブルは最上部です)

body 
{ 
    font-family : Segoe UI; 
} 

.main_table 
{ 
    width : 702px; 
    border:0px; 
    border-spacing:0px; 
    border-width:0px; 
    border-style:none; 
    border-collapse:collapse; 
    padding:0px; 
} 


.sub_table 
{ 
    background-image:url('../images/header_l.png'); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    width:47.5%; 
    } 

.sub_table_r 
{ 
    background-image:url('../images/header_r.png'); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    width:47.5%;  
} 

.content_table 
{ 
    background-image:url('../images/content_left.png'); 
    text-align:center; 
    background-attachment:scroll; 
    background-position:left; 
    width:47.5%; 
} 

.content_table_r 
{ 
    background-image:url('../images/content_right.png'); 
    text-align:center; 
    background-attachment:scroll; 
    background-position:left; 
    width:47.5%; 
} 

.centre_col 
{ 
    background-image:url('../images/centre.png'); 
    background-repeat:repeat-y; 
    width:5%; 
    background-position:center; 
} 
.centre_top 
{ 
    background-image:url('../images/top_centre.png'); 
    background-repeat:no-repeat; 
    width:5%; 
    background-position:bottom; 
} 

.centre_bottom 
{ 
    background-image:url('../images/centre_bottom.png'); 
    background-repeat:no-repeat; 
    width:5%; 
    background-position:top;  
} 

.Day 
{ 
    font-weight:bolder; 
    text-align:left; 
    font-size:large; 
} 
.Year 
{ 
    font-weight:bolder; 
    text-align:center; 
    font-size:large; 
    color:Orange; 
} 

.Week 
{ 
    font-weight:bold; 
    text-align:left; 
    font-size:large; 
} 

.Today 
{ 
    font-weight:bolder; 
    text-align:center; 
    font-size:x-large; 
    color:Navy; 
    vertical-align:middle; 
} 

.bottom 
{ 
    background-image:url("../images/bottom.png"); 
    background-repeat:no-repeat; 
    background-position:top; 
    width:47.5%; 

} 

.bottom_r 
{ 
    background-image:url("../images/bottom_r.png"); 
    background-repeat:no-repeat; 
    background-position:top; 
    width:47.5%; 
} 

そして、ここでは私のHTMLマークアップ

<table class = "main_table"> 
     <tr> 
      <td align="right" colspan="3"> 
       <asp:Button ID="Button1" runat="server" Text="Create Events" 
        onclick="Button1_Click" /> 
      </td> 
     </tr> 
     <tr> 
      <td align="right" class="sub_table"> 
       <table > 
        <tr> 
         <td rowspan="4" class="Today"> 
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td> 
         <td rowspan="4" class="Today"> 
          <br /> 
          <asp:Label ID="Today" runat="server"></asp:Label> 
         </td> 
         <td class="Day"> 
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 
          <br /> 
          <br /> 
         </td> 
        </tr> 
        <tr> 
         <td class="Day"> 
          <asp:Label ID="Month" runat="server"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td class="Week"> 
          <asp:Label ID="Week" runat="server"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td class="Year"> 
          <asp:Label ID="Year" runat="server"></asp:Label> 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td class="centre_top"> 
       &nbsp;</td> 
      <td align="left" class="sub_table_r"> 
       <table> 
        <tr> 
         <td rowspan="4" class="Today"> 
          &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td> 
         <td rowspan="4" class="Today"> 
          <asp:Label ID="Tomorrow" runat="server"></asp:Label> 
         </td> 
         <td class="Day"> 
          <br /> 
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <br /> 
          </td> 
        </tr> 
        <tr> 
         <td class="Day"> 
          <asp:Label ID="Month0" runat="server"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td class="Week"> 
          <asp:Label ID="Week0" runat="server"></asp:Label> 
         </td> 
        </tr> 
        <tr> 
         <td class="Year"> 
          <asp:Label ID="Year0" runat="server"></asp:Label> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td class="content_table" align="right"> 
          <asp:Label ID="Content" runat="server" Width="300px"></asp:Label> 
      </td> 
      <td class="centre_col"> 
         </td> 
      <td class="content_table_r"> 
          <asp:Label ID="Content0" runat="server" Width="300px"></asp:Label> 
      </td> 
     </tr> 
     <tr> 
      <td class="bottom" align="right"> 
          <br /> 
          <br /> 
          <br /> 
          <br /> 
          <br /> 
      </td> 
      <td class="centre_bottom" align="center"> 
          </td> 
      <td class="bottom_r"> 
      </td> 
     </tr> 
    </table> 

そして、この出力されます(コンテンツなし)私は本当に困惑しています

Before content

after content

Preview in Expression web

、と私は考えますこの問題は1ヶ月間私を困らせていました。あなたの助けを深く感謝します。

+0

申し訳ありませんが、私はちょうど必死です... –

+0

真剣に、21世紀の非表データのテーブルを使用しないでください。 – mreq

答えて

0

私はテーブルを使用しません。 divと相対位置を使用してください。背景画像を使用してノートブックの外観を取得します。

+0

ありがとう、それは仕事を始めています... –

+0

@aladdin - 私が使用する1つのトリックは、開発中にdivsのために華やかな色を使用することです - あなたはそれらを熱心に参照してください。 –

0

エドヒールの悲しみとまったく同じです。テーブルを使用しないでください。 divまたはsectionをbackground-image + position相対で使用し、幅と高さを固定します。それはうまくいくはずです。

テーブルは常に理解するのが難しい(セル、列、境界線など)。

関連する問題