Search code examples
csscss-positioncss-tables

How to position a table over a background using CSS?

I am in need of moving a set of tables up in my current document.

I have tried adjusting the margins in the CSS but cannot seem to get it right.

This is what I have: Current

This is what I am trying to achieve: Desired Result

The max-width must be 700 px. I have it all set up, apart from the positioning of the tables (images) needing to be moved up onto the background image.

@charset "UTF-8";
/* CSS Document */
body {
    margin-top:0;
    padding-top:0;
    background:#fff;
    /*JTL ADDED - Limit container max width within BB Content Area*/
    max-width:700px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    
    /*End JTL */}
.background-pic {
            background-image: url("Image Background.png");
            height: 450px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin-bottom: -100px;
            max-width: 700px;
}
        h1{
            padding-top: 50px;
            text-align: center;
            font-family: "bebas-neue";
            font-weight: normal;
            font-size: 50px;
            color: #fff;
        }
        .col-welcome-1 {
            float:left;
            margin-left: 25px;}

        .col-navmenu-1 {
            float:right;
            width: 250;
            height: 255;
            margin-right: 25px;
            border-radius: 10px;
            background: #252525;}
        
        h2 {
            color: #FFFFFF;
            text-align: center;
            font-weight: 200;
            font-size: 24px;
            font-family: Gotham, "Helvetica Neue", Arial, "sans-serif";
        }
        .navbuttons {
        padding-left: 45px;
        }

#footer {clear:both;text-align:left;padding:0 12px 2px 12px;background:#eee;
  border-top:1px solid #502e74}
.redline {
    border-bottom-style: solid;
    border-bottom-color: #502e74;
    border-bottom-width: 1px;
}
table { border-spacing: 0px; }  /*JTL Added whole section*/

th, td {                        /*JTL Added whole section*/
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px; 

}  /*JTL Added whole section*/

a:link {color:#502e74}
a:visited {color:#036}
a:active {color:#502e74}
a:hover {color:#000;background:#ffc;text-decoration:none}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html PUBLIC>
<html lang="en">
<link href="Professional Development Getting Started Template Style.css" rel="stylesheet" type="text/css">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://use.typekit.net/mlt2oco.css">
    <title>Professional Development Overview Template</title>
</head>
<body>
        <div class="main-content">
            <div id= "banner">
            <div class="background-pic">
            <h1>Professional Development<br>Overview</h1></div> 
            
<table style="margin-left:auto; margin-right: auto; padding-bottom: 25px;">
<tbody>
    <tr>
<td><div class="col-welcome-1"><a href="UNDER CONSTRUCTION PAGE.png"><img src="Welcome Video.png" alt="welcome video" class="rounded" width="320" height="255"></a>
    </div></td>
<td>
    <div class="col-navmenu-1">
           <blockquote>
             <h2>NAVIGATION</h2>
           </blockquote>
           <div class= "navbuttons">
             <a href="UNDER CONSTRUCTION PAGE.png" target="_blank"><img src="How to Navigate button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a> 
             <a href="https://trevecca.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_63485_1&tool_id=_158_1&tool_type=TOOL&mode=cpview&mode=reset" target="_blank"><img src="track my progres button.png" alt="Track My Progress" class="rounded" width="175" height="45"></a>
            <a href="UNDER CONSTRUCTION PAGE.png" target="_blank"><img src="faq button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a>
            <a href="https://trevecca.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_63485_1&tool_id=_158_1&tool_type=TOOL&mode=cpview&mode=reset" target="_blank"><img src="access modules button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a>
            </div>  
    </div>
    </td>
</tr>
    </tbody></table>
</div>
    </div>  
    <div class="resource-content">
        <table style="margin-left:auto; margin-right: auto;">
<tbody>
    <tr>
<td>
        <div class="col-resource-1"> <a href="https://www.youtube.com/watch?v=YPgVFj5okC0&t=1s" target="_blank"><img src="FightforFreedom.png" alt="Salvation Army Justice Action Plan" class="rounded" width="165" height="97"></a></div></td>
         <td><div class="col-resource-2"><a href="https://www.trevecca.edu/graduate" target="_blank"><img src="TNU Graduate Programs.png" alt="Link to Trevecca Gradate Programs" class="rounded" width="165" height="97"></a></div></td>
        <td><div class="col-resource-2"> <a href="https://www.trevecca.edu/programs/organizational-leadership?tab=overview-online" target="_blank"><img src="Trevecca's Master's in Organizational Leadership Program.png" alt="Trevecca's Organizational Leadership program" class="rounded" width="165" height="97"></a></div></td>
    </tr>
            </tbody></table></div>
<div id="footer">
  <p class="xsmall"><strong>Trevecca Nazarene University</strong></p>
<p class="xsmall">Helpdesk Support Contact:<a href="https://trevecca.service-now.com/sp" target="_blank">Online Course Technical Support Site</a></p>
</div>
    
    
            </body>

</html>

Solution

  • what I see is that your table content is outside your div class="main-content". I would suggest you to

    1. put the table content inside class="main-content" by removing a closing div after h1 tag Professional Development
      Overview

    2. delete closing div before class="resource-content".

    3. rename css .background-pic to .main-content - that styling will make more sense.

    But overall I think you have trouble with proper divs - thats causing a lit of trouble in your site and headache in styling process.