一連の画像をページの境界線として使用したいのですが、表が長方形です。各画像は 10px x 10px です。トップ、ボトム、サイド、コーナーの画像があります。側面の画像を除いてすべての画像が正常に機能し、% 変数が機能していません。ls は左側です。また、rs、右側、上部、下部、隅の画像も正常に機能します。ここに私のコードスニペットがあります:
私の ASP ページ コード:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>Home Page</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="container">
<!-- Page Table Set Format -->
<table cellpadding="0" cellspacing="0" class="MainTable">
<tr>
<td class="LeftPageIndent" rowspan="5">
</td>
<td class="HeadSpace" colspan="3">
</td>
<td class="RightPageIndent" rowspan="5">
</td>
</tr>
<tr>
<td class="tlc">
<img src="Images/tlc.jpg" alt="top left corner" />
</td>
<td class="tp">
<img src="Images/tp.jpg" alt="top" class="BorderTop" />
</td>
<td class="trc">
<img src="Images/trc.jpg" alt="top right corner" />
</td>
</tr>
<tr>
<td>
<img src="Images/ls.jpg" alt="left side" class="LSideBdrImage" />
</td>
<td class="pageContent">
<!-- Page Form inside Main Content START -->
<form id="Form1" runat="server">
<table class="ContentTable" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td>
<p align="center">
<img src="Images/Logo.jpg" alt="Logo" width="341" height="63" border="0" /></p>
</td>
</tr>
<tr>
<td>
<hr class="hrPageSeperator" color="#FF9900" />
</td>
</tr>
<tr>
<td>
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<hr class="hrPageSeperator" color="#FF9900" />
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
</Items>
</asp:Menu>
</div>
<hr class="hrPageSeperator" color="#FF9900" />
</td>
</tr>
</table>
</form>
<!-- Page Form inside Main Content END -->
</td>
<td>
<img src="Images/rs.jpg" alt="right side" class="RSideBdrImage" />
</td>
</tr>
<tr>
<td class="blc">
<img src="Images/blc.jpg" alt="bottom left corner" />
</td>
<td class="btm">
<img src="Images/btm.jpg" alt="bottom" class="BorderBottom" />
</td>
<td class="brc">
<img src="Images/brc.jpg" alt="bottom right corner" />
</td>
</tr>
<tr>
<td class="FootSpace" colspan="3">
</td>
</tr>
</table>
<!-- Page Table Set Format -->
</div>
</body>
</html>
私のCSSコード:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #000000;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
height: 100%;
}
#container
{
min-height: 100%;
}
* html #container
{
height: 100%;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* Page Border Setup...
----------------------------------------------------------*/
.MainTable
{
width:100%;
height:100%;
}
.HeadSpace
{
height:4px;
}
.LeftPageIndent
{
width: 12%;
}
.tlc
{
width:10px;
height:10px;
border:0px;
}
.tp
{
height:10px;
border:0px;
}
.trc
{
width:10px;
height:10px;
border:0px;
}
.ContentTable
{
width:100%;
height:100%;
border:0px;
}
.blc
{
width:10px;
height:10px;
border:0px;
}
.btm
{
height:10px;
border:0px;
}
.brc
{
width:10px;
height:10px;
border:0px;
}
.RightPageIndent
{
width: 12%;
}
.FootSpace
{
height:2px;
}
/* Boarder Image Setup...
-----------------------------------------------*/
.BorderTop
{
width: 100%;
height: 10px;
border: "0";
}
.LSideBdrImage
{
width: 10px;
height: 100%;
border: "0";
}
.RSideBdrImage
{
width: 10px;
height: 100%;
border: "0";
}
.BorderBottom
{
width: 100%;
height: 10px;
border: "0";
}
/* HEADINGS
----------------------------------------------------------*/
.hrPageSeperator
{
color:#FF9900;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 100%;
background-color: #000000;
margin: 1px auto 0px auto; /* border: 1px solid #496077; */
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 0px;
min-height: 100%;
width: 100%;
}
私の問題は、画像の高さを px で設定できますが、画像の高さを % で設定できないことです。私はこれを調査しましたが、多くの情報がありますが、私のやり方でエラーを確認するのに十分ではありません. 誰かが私を助けてくれませんか。
前もって感謝します。
クリス
PS 各画像は 10px x 10px のままで、変更されません。