Remove space between 2 tables HTML CSS and image removes background image

5
votes

New here, I am creating a website and there seems to be a problem with a table I made to hold an image and a table I made to hold content. Content on left image on right. When I float the Image table right the content table moves completely underneath it. When I float it left there is too much space in between the 2. The code in question is table and table 3. I want it to display the image block next to the link buttons and the context block underneath the buttons but next to the image block.

The second problem is my logo heading which is an image is removing the background image.

HTML Code

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


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

Image link. Look I am sure you get the just of what it should look like. Plus the white background should have a lilac image I placed into the body as background.

3
htmlcssimage
A word of advice, don't use tables for layout. Use tables for tabular data. – j08691
Tables are better used for things like Restraunt menus or E-Mail Marketing. I would suggest using divisional tag <DIV> or heck even using lists to organize data in a liquid order. – Cam
Can you post a link to a live example? @j08691 , sadly nowadays teachers and some institution teaches their student to use borderless table to make layouts - esp. on making forms – Willy Pt
Also <table3> isnt a correct tag unless you are using XML you cant create custom tags. – Cam
You have a few other problems in your code. Not only is <table3> not a valid tag, you can't use a table tag without any rows or columns. – BSMP

3 Answers

6
votes

I think the two main problems are:

  1. You are using tags that don't exist and
  2. You aren't considering the width of the borders when setting your sizes

You set the width of the body to 800px, the first table to 640px, and that table3 to 150px. But the borders on both are 5px wide. 640 + 10 (left and right border of the first table) +10 (left and right border of the second table) + 150 = 810. Even if the tags were correct they're too wide to go next to each other.

Change

<table3>Ad Space</table3>

and

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

To

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

and 

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

In your CSS change "b" to "#imgDiv img", "table" to "#imgDiv", and "table3" to "#adCol". Then either reduce the width of the borders or make one of them at least 10px smaller in width.

Don't forget to also remove the table2 tag and change whatever you've called b1 and b2 to use real HTML tags and change b1 and b2 in your CSS to class names or ids.

Also, consider not setting the width of the body. You probably don't need that.

6
votes

In this case I see what your trying to accomplish but you should really use divs it would make it easier.

But why don't you just build (1) table with a layout like this below and place / position it in your content. Instead of creating multiple tables. You can still use CSS to add your effects.

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

  1. We don't have tag <table2>. You should use <table>.

  2. If you want to bring two elements near each other, you have to create a div and set the display to flex and bring 2 or more elements into it. You have to set the width of elements to 50% if you want to bring 2 elements. If you want more, you must divide 100 to the number of elements. For example, if you want 5 elements next to each other you must set the width of elements to 20%.