如何使用 CSS 在背景上放置表格？

编程问答 2022-05-26

问题描述

我需要将当前文档中的一组表格向上移动。

我曾尝试调整 CSS 中的边距，但似乎无法正确调整。

这是我所拥有的：

Current

这就是我想要实现的目标：

Desired Result

最大宽度必须为 700 像素。我已经完成了所有设置，除了需要向上移动到背景图像上的表格（图像）的位置。

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

解决方法

我看到的是你的表格内容在你的 div class="main-content" 之外。我建议你

  1. 通过删除 h1 标签后的关闭 div 将表格内容放入 class="main-content" 专业开发
    概述

  2. 删除 class="resource-content" 之前的关闭 div。

  3. 将 css .background-pic 重命名为 .main-content - 这样样式会更有意义。

但总的来说，我认为您在使用适当的 div 时遇到了问题 - 这会导致您的网站出现一些问题，并在样式过程中令人头疼。

,

如果您希望您的表格位于其他内容之上，一个选项是将位置更改为绝对位置并根据需要调整顶部/右侧/底部/左侧。例如：

.col-navmenu-1 {

        position: absolute;
        bottom: 20px;
        left: 500px;
        float:right;
        width: 250;
        height: 255;
        margin-right: 25px;
        border-radius: 10px;
        background: #252525;}

请记住，您必须调整媒体查询。

css-positioncss-tables