删除2个表格之间的空格HTML CSS和图像删除背景图像

2018-06-15 09:17:09

我在这里新建一个网站，似乎有一张桌子出现问题，我拿着一张图片和一张桌子来放置内容。内容在左侧的图像。当我将图像表格向右浮动时，内容表格完全移动到其下面。当我将它浮起时，2之间的空间太多。所讨论的代码是表格和表格3.我希望它显示链接按钮旁边的图像块以及按钮下方但图像旁边的上下文块块。

第二个问题是我的标志标题是图像正在移除背景图像。

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{
    text-align:left;
    position:relative;
    font-size:2.5em;
    font-weight:bold;
    }
    div1{
    text-align:left;
    position:relative;
    font-size:1.5em;
    text-shadow: 2px 2px black;
    font-family:Georgia, Times, serif;
    text-shadow: -1px -1px black, 1px 1px;

    }
    h1{
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
    text-shadow: 0.1em 0.1em 0.2em black;
    font-size:2.0em;
    font-style:italic;
    float:inline;
    border:3px solid black;
    width:800px;
    height:196px;
    padding:0;

    }

    h2{
    text-align:left;
    position:relative;
    font-size:1.5em;
    font-family:Verdana,Helvetica,sans-serif;
    text-shadow: -1px -1px black, 1px 1px;
    }

    p{
    position:relative;
    text-align:left;
    font-size:1em;
    font-family:Georgia, Times, serif;
    text-shadow: -1px -1px black, 1px 1px;
    }

    li
    {
    position:relative;
    font-size:1em;

    }
    a{
    padding:0;
    float:left;
    }

    b{
    border:3px solid black;
    width:180px;
    height:10.5em;
    padding:10px;
    float:left;
    }
    b1{
    border:3px solid black;
    position:absolute;
    width:40px;
    height:23em;
    padding:10px;
    float:right;
    position: relative;
    }
    b2{
    border:3px solid black;
    position:absolute;
    width:40px;
    height:23em;
    padding:10px;
    position: relative;
    }
    body{
    background-image:url('background.jpg');
    background-size: 100%;
    margin:20px;
    width:800px;
    padding:30px;
    position: relative;

    }

    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;

    }


    table{ 
    display:inline-block;
    width:640px;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width:5px;
    text-align:center;
    height:400px;
    padding:0;
    }
    table2{ 
    display:inline-block;
    width:625px;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width:5px;
    text-align:center;
    height:50px;

    }
    td{
    text-shadow: 0.1em 0.1em 0.2em black;
    font-family:"Times New Roman", Times, serif;
    }
    table3{ 

    float:right;
    width:150px;
    border-style:solid;
    border-width:5px;
    text-align:right;
    height:490px;
    padding:0;

    }

    p2{
    border:10px solid black;
    float:rights;

    }
    select{
    width:200px

    }

    #wrap{ 
        width: 900px; 
        margin: 0 auto; 
    }

图片链接。看，我确信你得到它应该看起来像什么。另外，白色的背景应该有一个淡紫色的图像，我放入身体作为背景。

我认为两个主要问题是：

您正在使用不存在的标签

设置尺寸时，您没有考虑边框的宽度

您将主体的宽度设置为800px，将第一个表格设置为640px，将table3设置为150px。但是两者的边界都是5px宽。 640 + 10（第一张桌子的左右边框）+10（第二张桌子的左右边框）+ 150 = 810.即使标签正确，它们也太宽了，不能彼此相邻。

更改

<table3>Ad Space</table3>

和

<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>

至

<div id="adCol">Ad Space</div>

和

<div id="#imgDiv">
  <img />
  <img />
  <img /><br />
  <img />
  <img />
  <img />
</div>

在你的CSS中将“#imgDiv img”，“table”改为“#imgDiv”，将“table3”改为“#adCol”。然后减小边框的宽度或者使其中一个宽度至少减小10px。

不要忘记也删除table2标签，并改变你称之为b1和b2的任何名称，以使用真实的HTML标签，并将CSS中的b1和b2更改为类名或ID。

另外，请考虑不设置身体的宽度。你可能不需要那个。

在这种情况下，我会看到你想要完成的事情，但是你应该真的使用div来让它更容易。

但是，为什么你不用下面的布局构建（1）表并将它放置/放置在内容中。而不是创建多个表。你仍然可以使用CSS来添加你的效果。

<div id="apDiv3">
  <table width="100%" height="335" border="1">
    <tr>
      <td width="87%" height="207">CONTENT</td>
      <td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
    </tr>
    <tr>
      <td height="50">Footer</td>
    </tr>
  </table>
</div>

链接地址: http://www.djcxy.com/p/43669.html

上一篇: Remove space between 2 tables HTML CSS and image removes background image

下一篇: Creating a two