窗口大小調整後佈局變形

我的網站出現問題。每當我嘗試重新調整瀏覽器窗口的大小時。我的所有文字，圖像和導航欄都會出現在屏幕上的任何地方。窗口大小調整後佈局變形

下面是一些截圖：

普通網站

變形網站

這裏是代碼。

<html> 
    <head> 
    <title> Photoshop Uploader </title> 
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"> 
    <style> 
     body { background-color: #6F6F6F; margin: auto; } 
     h1 { font-family: Verdana; } 
     img.headerImg { position: relative; padding-top: 8px; padding-left: 8px; float: left; } 
     #headerText { padding-top: 18px; padding-left: 15px; float: left; font-family: Verdana; color: #102261; font-weight: bold; } 
     h2.socialText { font-style: italic; font-weight: bold; font-family: Verdana; float: left; padding-top: 25px; padding-left: 250px; } 
     img.socialBar { position: fixed; } 
     #social img { margin-top: 10px; margin-right: 40px; position: fixed; } 
     #social img.facebook { float: right; padding-top: 23px; padding-right: 15px; position: relative; } 
     #social img.instagram { float: right; padding-top: 23px; padding-right: 15px; position: relative; } 
     #social img.youtube { float: right; padding-top: 20px; padding-right: 15px; position: relative; } 
     #social img.twitter { float: right; padding-top: 25px; padding-right: 15px; position: relative; } 
     #navBar ul { list-style-type: none; padding-top: 10px; padding-left: 10px; overflow: hidden; } 
     #navBar a:link, a:visited { text-align: center; display: block; width: 120px; text-decoration: none; color: white; font-weight: bolder; background-color: #102261; padding: 4px; } 
     #navBar a:hover, a:active { background-color: #0A153F; } 
     #navBar li { float: left; border-right: 5px solid #6F6F6F; font-family: Arial; } 
     h3.loginText { font-family: Verdana; font-weight: bold; float: right; padding-top: 35px; } 
     p.login { padding-left: 100px; } 
     p.usr_pass_text { color: #102261; font-weight: bold; font-family: Verdana; } 
     #loginReg { padding-left: 900px; } 
     a.clickReg { padding-left: 62px; color: #102261; text-decoration: none; } 
    </style> 
</head> 
<body> 
    <!-- Header image w/ text --> 
    <img class="headerImg" src="images/photoshop_icon.jpg" width="100px" height="100px"/> 
    <h1 id="headerText"> Photoshop Uploader </h1> 
    <!-- Social Media --> 
    <h2 class="socialText"> Follow Me On... </h2> 
    <div id="social"> 
     <img src="images/social_bar.png" class="socialBar" width="400" height="100"/> 
     <a href="https://www.facebook.com/hayes.derbyshire"><img class="facebook" src="images/facebook_logo.png" alt="Facebook" width="42" height="42"/></a> 
     <a href="http://www.instagram.com/hayesderbs"><img class="instagram" src="images/instagram_logo.png" alt="Instagram" width="42" height="42"/></a> 
     <a href="http://www.youtube.com/user/hiii582"><img class="youtube" src="images/youtube_logo.png" alt="YouTube" width="48" height="48"/></a> 
     <a href="https://twitter.com/Derby_Corn"><img class="twitter" src="images/twitter_logo.png" alt="Twitter" width="42" height="42"/></a> 
    </div> 
    <h3 class="loginText">Log In</h3> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <!-- Navigation Bar --> 
    <div id="navBar"> 
     <ul> 
      <li><a href="index_photoshop.html">Home</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <li><a href="registration.php">Registration</a></li> 
     </ul> 
    </div> 
    <div id="loginReg"> 
    <form action="index_photoshop.html" method="post"> 
     <p class="usr_pass_text"> Username: <input type="username" name="user"/></p> 
     <p class="usr_pass_text"> Password: <input type="password" name="pass"/></p> 
     <a class="clickReg" href="registration.php"> Click Here to Register </a> 
     <p class="login"><input type="submit" value="Login" name="login"/></p> 
    </form> 
    </div> 
</body> 
</html>

來源

2013-10-06 Hayes Derbyshire

包裝你所有的內容與容器的div：

<div class="container">the rest of your html</div>

然後給它一個寬度：

.container{ 
    width:1100px; 
    margin: auto; // add this if you want to center your container 
}

來源

2013-10-06 04:16:57 Jason

您還沒有設計div#social。給它一個足夠大的固定寬度以包含社交媒體圖像。

來源

2013-10-06 04:09:45 wetjosh

你爲什麼不使您的網站響應？

這樣做，將展現靈活的圖像和良好的顯示效果。

創建外部樣式表
- 我告訴你，你的設計的網站將容易得多。
請使用media queries

來源

2013-10-06 11:00:47

嘿，這是我的第一個網站，所以我不知道了一大堆關於使其「有求必應」，除了加入Java腳本，並使得它非常用戶網站responsive友善。我正在努力將註冊表單放入我的網站，並且使用mySQL和PhpMyAdmin做了很多工作，這對使用和特別設置都非常刺激。我真的會喜歡一些幫助，使它嵌入在我的HTML與PHP和使用Java腳本和其他語言，如AJAX。謝謝，這將非常感激，並且有人能夠流利地向我解釋域名是如何工作的，假設我已經瞭解了mySQL和phpmyadmin。 –

窗口大小調整後佈局變形

回答

相關問題