ロールオーバーのある 3x3 グリッドの写真を使用しています。2 行目の 3 つの画像は、サイトのページへの href です。インデックスの 1024x600 で中央揃えの形式ですべての列と行に 4px のパディングが必要です (新しい画像のサイズ変更を行っていないため、画像は現在 200x200 に配置されています。最初にスタイリングの問題を処理したかったのです) ）。この問題は 2 つのページで一貫しています。2 つ目は私の写真ページで、lightbox2 ギャラリーがあるため、CSS にあると想定する必要があります。私は HTML とトラブルシューティングに比較的慣れていないため、フォーラムや本などを無駄に洗い流しました。コーディングをクリーンアップしてセルの間隔を正しくすることを期待してこれに参加しましたが、そうでないよりも多くの問題が発生しているようです。
インデックスの HTML:
<html>
<head>
<title>McKay Pruitt Home</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<script type="text/javascript">
<!---Rollover script here--->
</script>
</head>
<div class=".phototable">
<table width="1020px">
<tr>
<th width="1020" class=".bigname" scope="col"><a href="index.html">McKay Pruitt</a></th>
</tr>
</table>
<table>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/index/sm/McKayPruitt_index-1.jpg',1)"><img src="img/index/lg/McKayPruitt_index-1.jpg" width="200" height="200" id="Image1"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/index/sm/McKayPruitt_index-2.jpg',1)"><img src="img/index/lg/McKayPruitt_index-2.jpg" width="200" height="200" id="Image2"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/index/sm/McKayPruitt_index-3.jpg',1)"><img src="img/index/lg/McKayPruitt_index-3.jpg" width="200" height="200" id="Image3"></a></td>
</tr>
<tr>
<td><a href="photos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/index/sm/McKayPruitt_index-4.jpg',1)"><img src="img/index/lg/McKayPruitt_index-4.jpg" width="200" height="200" id="Image4"></a></td>
<td><a href="multimedia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/index/sm/McKayPruitt_index-5.jpg',1)"><img src="img/index/lg/McKayPruitt_index-5.jpg" width="200" height="200" id="Image5"></a></td>
<td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img/index/sm/McKayPruitt_index-6.jpg',1)"><img src="img/index/lg/McKayPruitt_index-6.jpg" width="200" height="200" id="Image6"></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','img/index/sm/McKayPruitt_index-7.jpg',1)"><img src="img/index/lg/McKayPruitt_index-7.jpg" width="200" height="200" id="Image7"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','img/index/sm/McKayPruitt_index-8.jpg',1)"><img src="img/index/lg/McKayPruitt_index-8.jpg" width="200" height="200" id="Image8"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','img/index/sm/McKayPruitt_index-9.jpg',1)"><img src="img/index/lg/McKayPruitt_index-9.jpg" width="200" height="200" id="Image9"></a></td>
</tr>
</table>
</div>
</body>
付随するCSSも次のとおりです。
.bigname {
font-family: 'Source Sans Pro', sans-serif;
width: 1000px
font-size: 50px;
font-weight: bold;
}
.phototable {
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
align: center;
width: 1020;
margin:0 auto;
border: 0;
cellpadding: 0;
cellspacing: 100px;
}