我的网站有问题。每当我尝试重新调整浏览器窗口大小时。我所有的文本、图像和导航栏都在屏幕上无处不在。
下面是一些截图:
普通网站
变形的网站
这是代码。
<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>
最佳答案
用容器 div 包装您的所有内容:
<div class="container">the rest of your html</div>
然后给它一个宽度:
.container{
width:1100px;
margin: auto; // add this if you want to center your container
}
关于html - 调整窗口大小时布局变形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19205249/