Question

寻求有关如何在图像顶部组织表格的帮助和说明。我已经得到了我希望他们坐在页面上的桌子，但似乎无法将它们移到背景图像上。它们目前出现在背景图像上，但在底部。请看下面的图片，看看我指的是什么。

我还注意到我在最后一个表格中显示的图像大小不同，即使每个图像的尺寸代码都相同。

非常感谢任何帮助。时间紧迫，这导致我落后了。

期望的结果（最大宽度设置为 700 像素）

<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>
    
    <style>
        .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;
            padding-bottom: 5px;
            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 {
            font-family: "bebas-neue";
            color: #FFFFFF;
            text-align: center;
            font-weight: 200;
            font-size: 24px;
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        }
        .navbuttons {
        padding-left: 45px;
        }
    </style>

<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;">
<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="162" height="97"></a></div></td>
         <td><div class="col-resource-2"><a href="https://www.trevecca.edu/graduate" target="_blank"><img src="TNU GRAD PROGRMAS.png" alt="Link to Trevecca Gradate Programs" class="rounded" width="162" 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 Org. Leadership.png" alt="Trevecca's Organizational Leadership program" class="rounded" width="162" height="97"></a></div></td>
    </tr>
            </tbody></table></div>
<div id="footer">
<p class="small"><strong>Trevecca Nazarene University</strong></p>
<p class="small">Helpdesk Support Contact:<a href="https://trevecca.service-now.com/sp" target="_blank">Online Course Technical Support Site</a></p>
</div>
    
    
            </body>

这就是现在的样子。

页面布局帮助

0 个答案: