Question

我的网站在不同的显示器上显示不同。桌面： desktop 笔记本电脑： Laptop

HTML

<body>
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>





<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

</body>

CSS

    body
{

        background-image:url(Pictures/background.jpg);
        background-repeat:no-repeat;
        background-size:100%;

}
    #mainText
    {

    position: absolute;
    width: 70%;
    float: left;
    left: 14em;

}
#conTable
{

    left:14em;
    top:8em;
    position:absolute;
}

#Banner
    {
            position:absolute;
            padding-left:40%;
    }
#Links
    {
            position:absolute;
            float:left;
            width:50px;

    }

任何人都可以告诉我为什么我的笔记本电脑上的内容会有所不同，然后它会在我的桌面上显示，以及如何修复它。从图片中可以看出，笔记本电脑上的所有内容都向左移动。

Answer 1

尝试在所有“绝对”div周围包装“Relative”#container。我已经调整了下面的代码：

<body>
<div id="container">
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>


<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>
</div>
</body>

CSS：

body
{

        background-image:url(Pictures/background.jpg);
        background-repeat:no-repeat;
        background-size:100%;

}
    #mainText
    {

    position: absolute;
    width: 70%;
    left: 14em;

}
#conTable
{

    left:14em;
    top:8em;
    position:absolute;
}

#Banner
    {
            position:absolute;
            padding-left:40%;
    }
#Links
    {
            position:absolute;
            top: 0;
            left: 0;
            width:50px;

    }
    #container {position: relative; width: 100%}

网站监控显示问题

1 个答案: