0

我正在尝试用 HTML 和 CSS 做一个投资组合，我的布局在我的 1920 * 1080 分辨率上看起来非常好，但是当我改变分辨率时，一切都在移动，一切看起来都很糟糕。

任何人都可以向我指出我的代码哪里出错并为我提供解决问题的方法吗？

--- 编辑新代码

它在 1920 * 1080 上的样子：http: //screencast.com/t/mq8H3baBxIi

所以我已经改变了建议的东西，但我仍然得到了这个，例如，当我从我的屏幕分辨率 1920 * 1080 更改为 1280 * 1024 以测试它的外观时，评论区域拉到灰色的顶部“联系我” ' 框，以便它最终像我在此链接上的图片：http: //screencast.com/t/xZEwSgwdqP

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
    </head>
        <body>
             <div id="pageTitleContact"> CONTACT ME</div>
             <div id="sideBar">             </div>
             <div id="commentSideBar"> </div>
    <div id="logos">
    <ul>
      <div id="home"><li><a href="portfolioHome.html"><img src="home.png" alt="list item 1" /></a></li></div>
      <div id="aboutMe"><li><a href="portfolioAboutMe.html"><img src="aboutMe.png" alt="list item 2" /></a></li></div>
      <div id="achievements"><li><a href="portfolioAchievement.html"><img src="achievement.png" alt="list item 3" /></a></li></div>
      <div id="hobbies"><li><a href="portfolioHobbies.html"><img src="Hobbies.png" alt="list item 4" /></a></li></div>
      <div id="contactMe"><li><a href="portfolioContactMe.html"><img src="contactMeHighlighted.png" alt="list item 4" /></a></li></div>
    </ul>
    </div>
            <textarea id="contactMeTextarea">





            </textarea>

    <div id="Commentsection">
            <form action="postcommentandreturn.php" method="post">

            <div id="nameAreaTitle">
            Name:</div><input type="text" id="nameArea" name="name" />
            <br>

            <textarea placeholder="Insert Comment Here..." type="text" id="commentArea"  name="comment"></textarea>
            <div id="submitLocation"><input type="submit" id="submitComment"  value="Submit"/></div>

            </form>
    </div>
<!--comment section-->

<div id="postedComments">



  <tr>

  <td><div id="postersName"> </div>
  </td>
   </tr>

  <tr>

  <td><div id="commentDate"></div></td>

  </tr>

  <tr>

  <td>
  <textarea id="postersComment"></textarea></td>

  </tr>

</table>
</div>


        </body>
</html>

CSS：

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#sideBar {
    background-color: #111111;
    width:100px;
    height:100%;
    position:fixed;
    z-index:-1;

}

#commentSideBar {
    background-color: #111111;
    width:300px;
    height:100%;
    position:fixed;
    z-index:-1;
    right:0;

}
#logos {
    position:absolute;
    margin-left:-20px;
}

#home {
    margin-top:50px;
}

#homeInfo {
    resize: none;    
    position:fixed;
    display: block;
    height:400px;
    width:800px;
    overflow:hidden;
    outline:none;
    background-color:#3f3f3f;
    color:white;
    font-family:Arial;
    font-size:30px;
    border-radius:10px;
    font-weight:700;
    text-align:left;
    padding-right:20px;
    padding-left:40px;

    top: 50%;
    left: 50%;
    max-width:800px;
    margin-left:-350px;
    margin-top:-200px;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}


#pageTitleContact {
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top:-400px;
    margin-left:-400px;
    color:limegreen;
    font-size:100px;
    font-family:Arial;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    padding-left:20px;
    padding-right:20px;
}

#aboutMe {
    margin-top:100px;

}

#achievements {
    margin-top:100px;
    margin-left:-7px;
}

#hobbies {
    margin-top:100px;
}

#contactMe {
    margin-top:100px;
    margin-bottom:50px;
}


#contactMeTextarea {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    resize: none;    
    position:fixed;
    display: block;
    height:600px;
    width:1000px;
    max-width:1000px;
    outline:none;
    background-color:#3f3f3f;
    color:whitesmoke;
    font-family:Arial;
    font-size:30px;
    border-radius:10px;
    text-align:left;
    padding-right:20px;
    padding-left:40px;
    top: 50%;
    left: 50%;
    margin-left:-500px;
    margin-top:-300px;
    padding-top: 50px;
}

#Commentsection {
    position:fixed;
    top:50%;
    margin-left:140px;
    margin-top:-300px;

}

#nameAreaTitle {
    font-family:Arial;
    color:black;
    font-weight:bold;
}
#nameArea {
    font-family:Arial;
    color:black;
    width:300px;
    height:40px;
    font-size:30px;
}

#commentArea {
    font-family:Arial;
    color:black;
    width:300px;
    height:300px;
    resize: none; 
    margin-top:10px;
    font-size:20px;  
}

#submitComment {
    width:100px;
    font-size:20px;

}

#postedComments{
    position:absolute;
    right:0px;
    margin-top:10px; 
    margin-right:10px;
    width:280px;
    background-color:grey;

}
#postersName {

    width:260px;
    height:25px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
    font-weight:bold;
    margin-top:10px;
}

#commentDate {
    width:260px;
    height:25px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
}
#postersComment {
    width:275px;
    height:200px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
    resize:none;
}

li {
    list-style-type:none;
}
4

1 回答 1

1

如果不仔细看，您可能可以添加一个容器 div 或包装所有代码的东西，然后分配一个min-width属性以确保它永远不会小于给定大小。
您的布局似乎依赖于您的宽度，body并且随着窗口大小的变化，您的身体宽度也会发生变化。使用带有min-widthor 声明的包装器width将使其在用户的窗口小于容器宽度时出现水平滚动条。

就像其他人所说的那样，你有一些嵌套问题。一般页面布局将如下所示： 

<html>
  <head>
    <!-- Head Content -->
  </head>

  <body>
    <!-- Page Content -->
    <ul>
      <li><!-- List Item --></li>
      <li><!-- List Item --></li>
    </ul>
  </body>
</html>
于 2013-04-08T20:12:37.497 回答