ここで新しく、ウェブサイトを作成していますが、画像を保持するために作成したテーブルとコンテンツを保持するために作成したテーブルに問題があるようです。右の左の画像のコンテンツ。Image テーブルを右にフロートさせると、コンテンツ テーブルが完全にその下に移動します。左にフロートすると、2の間にスペースが多すぎます。問題のコードは表と表3です。リンクボタンの横に画像ブロックを表示し、ボタンの下であるが画像の隣にコンテキストブロックを表示したいブロック。
2番目の問題は、背景画像を削除している画像であるロゴの見出しです。
HTML コード
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link href="Articlepage.CSS" rel="stylesheet" type="text/css">
<title>BEADLES BEADING</title>
</head>
<body id="wrap">
<h1><img src="logo.jpg" alt="logo"></h1>
<a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
<a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
<a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
<a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<table3>AD SPACE(Image)</table3>
<table>
<tr>
<td>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
<table2>
<tr>
<td>
FOOTER
</td>
<tr>
</table2>
</body>
</html>
CSS コード
div{
テキスト揃え:左;
位置:相対;
フォントサイズ:2.5em;
font-weight:太字;
}
div1{
テキスト揃え:左;
位置:相対;
フォントサイズ:1.5em;
text-shadow: 2px 2px 黒;
font-family:ジョージア、タイムズ、セリフ;
text-shadow: -1px -1px 黒、1px 1px;
}
h1{
テキスト揃え:左;
font-family:Arial、Helvetica、sans-serif;
text-shadow: 0.1em 0.1em 0.2em 黒;
フォントサイズ:2.0em;
フォントスタイル:斜体;
float:インライン;
境界線: 3 ピクセルの黒一色;
幅:800px;
高さ:196px;
パディング:0;
}
h2{
テキスト揃え:左;
位置:相対;
フォントサイズ:1.5em;
font-family:Verdana,Helvetica,sans-serif;
text-shadow: -1px -1px 黒、1px 1px;
}
p{
位置:相対;
テキスト揃え:左;
フォントサイズ:1em;
font-family:ジョージア、タイムズ、セリフ;
text-shadow: -1px -1px 黒、1px 1px;
}
李
{
位置:相対;
フォントサイズ:1em;
}
{
パディング:0;
フロート:左;
}
b{
境界線: 3 ピクセルの黒一色;
幅:180px;
高さ:10.5em;
パディング:10px;
フロート:左;
}
b1{
境界線: 3 ピクセルの黒一色;
位置:絶対;
幅:40px;
高さ:23em;
パディング:10px;
フロート:右;
位置: 相対;
}
b2{
境界線: 3 ピクセルの黒一色;
位置:絶対;
幅:40px;
高さ:23em;
パディング:10px;
位置: 相対;
}
体{
background-image:url('background.jpg');
背景サイズ: 100%;
余白:20px;
幅:800px;
パディング:30px;
位置: 相対;
}
.centeredImage
{
テキスト揃え:中央;
マージントップ:0px;
margin-bottom:0px;
}
テーブル{
表示:インラインブロック;
幅:640px;
マージン左: 自動;
マージン右: 自動;
境界線のスタイル:無地;
ボーダー幅:5px;
テキスト揃え:中央;
高さ:400px;
パディング:0;
}
テーブル2{
表示:インラインブロック;
幅:625px;
マージン左: 自動;
マージン右: 自動;
境界線のスタイル:無地;
ボーダー幅:5px;
テキスト揃え:中央;
高さ:50px;
}
td{
text-shadow: 0.1em 0.1em 0.2em 黒;
font-family:"Times New Roman", Times, serif;
}
テーブル3{
フロート:右;
幅:150px;
境界線のスタイル:無地;
ボーダー幅:5px;
テキスト整列:右;
高さ:490px;
パディング:0;
}
p2{
境界線:10 ピクセルの黒一色;
フロート:権利;
}
選択する{
幅:200px
}
＃包む{
幅: 900px;
マージン: 0 自動;
}
画像リンク. ほら、あなたはそれがどのように見えるべきかを理解できると確信しています。さらに、白い背景には、背景として本体に配置した薄紫色の画像が必要です。
