2012-01-26 96 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

我真的很困惑,我想這個問題困擾了我一個月。您的幫助深表謝意。

+0

對不起,我只是絕望...... –

+0

嚴重的是,不要在21世紀使用非表格數據。 – mreq

回答

0

我不會使用表格。使用div和相對定位。使用背景圖像來獲得筆記本外觀。

+0

謝謝,它開始工作... –

+0

@aladdin - 我使用的一個技巧是在開發過程中使用花哨的顏色爲divs - 所以你已經看到他們eaasily。 –

0

正如Ed Heal悲傷。不要使用表格。使用div或部分與background-image +相對位置並固定寬度和高度。那麼它應該工作。

表總是很難理解(單元格,列,邊框等)。