HTML Website Going Crazy when Zoomed out

2019-09-27 15:55发布

站内问答 / JavaScript
1481 3 5

I don't know why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code. 

body {
	background-image: url(gradient.png);
	background-repeat: no-repeat;
	background-size: cover;
}

h1.heading {
	color: #046289;
	font-size: 50px;
	margin-top: 100px;
	text-align: center;
	font-family: 'Poppins', sans-serif;
} 

p.heading {
	color: #046289;
	font-family: 'Poppins', sans-serif;
	font-size: 20.8px;
	font-weight: 600;
	position: relative;
	margin-left: 70px;
	top: 60px;
}

p.heading1 {
	color: #046289;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	position: relative;
	margin-left: 70px;
	top: 50px;
}

img.aml {
	width:280px;
	height:280px;
	position: absolute;
	margin-left: 360px;
	bottom: 30px;

}

iframe.livevid {
	position: absolute;
	margin-left: 840px;
}

p.vid {
	color: #046289;
	font-family: 'Poppins', sans-serif;
	font-size: 20.8px;
	font-weight: 600;
	position: absolute;
	margin-left: 840px;
	top: 313px;
}

p.vid1 {
	color: #046289;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	position: absolute;
	margin-left: 840px;
	top: 363px;
}

a {
	text-decoration: none;
}

p a:link {
	color: #4204a5;
}

p a:visited {
	color: #4204a5;
}

p a:hover {
	color: #71a3f2;
}

/*
BELOW - NAVIGATION BAR
*/

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;	
}

li {
	float: left;
}

.spacefornav {
	margin-left: 462px;
}

li a:hover {
	color: #71a3f2;
}

div.nav {
	color: #046289;
}

li a {
	display: inline-block;
	color: #046289;
	text-align: center;
	padding: 8px 10px;
	text-decoration: none;
	font-family: 'Poppins'; sans-serif;
	margin: 0px 20px;
	font-weight: 500;
	cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Childish Gambino</title>
	<meta charset="UTF-8">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&amp;subset=devanagari,latin-ext" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<h1 class="heading">CHILDISH GAMBINO</h1>
		<ul>
		<div class="nav">
				<li class="spacefornav"><a href="home.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="music.html">Music</a></li>
				<li><a href="contact.html">Contact</a></li>
		</div>
		</ul>
	<p class="heading">"AWAKEN MY LOVE!"</p>
	<p class="heading1">
	Childish Gambino's latest
	<br>
	and freshest album is
	<br>
	AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
	<br>
	<a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
	</p>
	<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art" alt="'Awaken My Love' album art">
	<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
	<p class="vid">Watch Now!</p>
	<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>

3条回答
老娘就宠你
2楼-- · 2019-09-27 16:11 

html, body{
    margin: 0px;
}
body{
    background-color: rgb(74, 107, 174);
    background-image: url("../images/bg.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 100%;
    width:100%;
    height:100%;
}

.inner-body{
    margin: 0px auto;
    width:960px;
    height:970px;
    background-color:rgba(255,255,255,0);
}

.login{
    text-align: center;
    margin-left: 641px;
    background-color: rgba(59,90,137,0.7);
    width: 315px;
    height:20px;
    padding-top:3px;
    padding-left:4px;
    word-spacing: 0.3px;
    letter-spacing:0.3px;
    color: white;
    font-family: Calibri;
    font-size:12.5px;
}

.menu-outer{
    margin-top:30px;
    background-color: rgba(10,30,50,0.8);
    padding:5px;
    height:60px;
}

.menu{
    border-style: solid;
    height:60px;
    border-width:0.5px;
    border-color: rgb(100,100,150);
    
}

.menu-image{
    position: absolute;
    margin-top:-50px;
    margin-left:18px;
    background-image: url("../images/logo.png");
    height: 150px;
    width:220px;
}

.menu-inner{
    margin-top:13px;
    height: 55px;
    margin-left: 234px;    
    color: rgb(164,211,241);
    font-family:Trebuchet MS;
    font-size:18.5px;
}

.zone-outer{
    background-color: rgba(26,30,50,0.9);
    height:632px;
}

.zone{
    margin-left: auto;
    margin-right: auto;
    border-bottom-style: solid;
    border-bottom-color: rgb(100,100,150);
    height: 625px;
    width:950px;
    border:1px solid;
    border-image: linear-gradient(to bottom,rgba(100,100,150,0),rgb(100,100,150) );
    border-image-slice: 1;
}

.mini-zones{ 
    float:left;
    margin-top:25px;
    margin-left:30px;
    width:280px;
    font-family:Trebuchet MS;
    color:white;
    line-height:22.9px;
}

.footer{
    text-align: center;
    margin-top:5px;    
    padding-top:10px;
    background-color: rgba(26,30,50,0.5);
    width:960px;
    height:35px;
    padding:0.1px;
    font-family:Trebuchet MS;
    font-size:14px;
    color:white;
}
ul.login{
    margin-right: 10px;
    background-color: rgba(59,90,137,0.1);
    display: inline;
    padding-left:0px;
    margin-left: 5px;
    color:white;
}


li.log{
    display:inline;
}

a:visited,a:link {
    color: rgb(164,211,241);
    text-decoration: none;
}

li:hover {
    background-color:rgb(73,103,129);
    text-decoration: none;
    color:white;
}

ul.menu-in{
    margin-top:0px;
    margin-left:50px;
    padding:4.5px 3.5px 0px 3.5px;
}
ul.menu-in li{
    display: inline;
    margin-left: auto;
    padding: 14px;
    border-radius: 4px;
}
ul.menu-in li+li:before{
    position: absolute;
    margin-left: -22px;
    content: "|";
    display: inline-block;
    padding-right: 7px;
    color: rgb(164,211,241);
    font-size: 20px;
    text-decoration: none;
}


ul.login li{
    display:inline;
}
ins{
    color:rgb(164,211,241);
}

.transperent{
        padding-left: 30px;
        padding-top:0.8px;
        background-color: rgba(0,0,0,0.3);
        height: 175px;
        color: white;
        font-family:Trebuchet MS;
        font-size: 42px;
        word-spacing:1px;
        letter-spacing:9px;
}

.contrast{
        filter: brightness(180%);
}
<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\main-style.css">
            <link rel="stylesheet" href="css\home-page.css">
        </head>
        <body>
            <div class="inner-body">
                <div class="login">
                    <ul class="login">
                        <li>Request a Quote</li>
                        <li>&#9474;</li>
                        <li>Client Login</li>
                        <li>&#9474;</li>
                        <li>Vehicle Export Portal</li>
                    </ul>     
                </div>
                <div class="menu-outer">       
                    <div class="menu">
                        <div class="menu-image">
                        </div>
                        <div class="menu-inner">
                            <ul class="menu-in">
                                <li><a href="index.html">HOME</a></li>
                                <li><a href="https://www.w3schools.com">ABOUT FTZWS</a></li>
                                <li><a href="services.html">OUR SERVICES</a></li>
                                <li><a href="https://www.w3schools.com">OUR CLIENTS</a></li>
                                <li><a href="https://www.w3schools.com">CONTACT US</a></li>
                            </ul>
                        </div>                          
                    </div>
                </div>
                <div class="transperent">
                        <p>BRINGING TECHNOLOGY<br>AND OPERATIONAL EXCELLENCE.</Pre>
                </div>
                <div class="zone-outer">
                    <div class="zone">
                        <div class="mini-zones">
                            <img class="contrast" src="images/tile1.png">  
                            <p>Imagine an international gateway where good and merchandise flow across borders. Where countries lower taxes, reduce red tape, and eliminate road blocks. Where companies import goods and merchandise directly into a Free Trade Zone - and then ship products out duty free.</p>
                            <p>The Miami Free Trade Zone connects North America, Europe and Asia to Latin America and Caribbean via direct air and sea transportation links, plus rail and expressway. Operatred by FTZ World SERVICES, the 47-acre Zone (#372) saves companies money and time.</p>
                            <p><ins><a href="https://www.w3schools.com">More about Free Trade Zone ></a></ins></p>
                        </div>
                        <div class="mini-zones">
                            <img src="images/tile2.png"> 
                            <p>FTZ World Services is your ticket to the world. We're the licensed operator of the Miami Free Trade Zone, the "Gateway to the Americas." We process as much as $1 billion in goods from more than 70 countries each year.</p>
                            <p>A leader in free trade zone operations, FTZWS works magic behind the scenes, offering logistical and operational excellence. FTZWS's many services include technology, public warehousing, yard storage and on-site U.S. Customs. Other U.S. free trade zones also benefit from our technological support and operational consulting.</p>
                            <p><ins><a href="https://www.w3schools.com">Request a quote ></a></ins></p>  
                        </div>
                        <div class="mini-zones">
                            <img src="images/tile3.png">
                            <p>FTZ World Service has the unique advantage of being the licensed operator of the Miami Free Trade Zone. We offer state-of-the-art facilities and a stellar track record in zone management, plus technological support, warehousing, and storage. Because FTZWS understands U.S. Customs rules, we can use our software and logistical expertise to speed up your paperwork, remove road blocks, and get products to market cheaper and faster. We save companies across multiple industries thousands of dollars per month in fees. We'll give you less to manage and more dollars to keep in your pocket.</p>
                            <p><ins><a href="https://www.w3schools.com">More about what we offer ></a></ins></p> 
                        </div>
                    </div>
                </div>
                <div class="footer">
                        <p style="margin-top:10px">Copyright ©2014 FTZ World Services. All Rights Reserved. <ins>Contact Us</ins> | <ins>Request a Quote</ins></p>    
                </div>
            </div>
        </body>

from the description, you gave I understood that when the width and height of your page are altered then divs coincide or overlap on other divs if this is your problem then you better first understand about position absolute and position relative and also giving widths heights margins borders padding etc in pixels and percentages there are so many websites available like w3schools for you to go through.Also, go through the following links CSS - Percentages or Pixels?

Why shouldn't I use position:absolute for positioning everything?

the following example will be useful as a reference.

查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2019-09-27 16:23

I'm assuming that you want your website to fit multiple different screen sizes by the sounds of it. Use media queries.

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2019-09-27 16:30

You should check out Div Tags

body {
  background-image: url(gradient.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  position: absolute;
  height: 500px;
  width: 1000px;
}

h1.heading {
  color: #046289;
  font-size: 50px;
  margin-top: 100px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

p.heading {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: relative;
  margin-left: 70px;
  top: 60px;
}

p.heading1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: relative;
  margin-left: 70px;
  top: 50px;
}

img.aml {
  width: 280px;
  height: 280px;
  position: absolute;
  margin-left: 360px;
  bottom: 30px;
}

iframe.livevid {
  position: absolute;
  margin-left: 840px;
}

p.vid {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: absolute;
  margin-left: 840px;
  top: 313px;
}

p.vid1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: absolute;
  margin-left: 840px;
  top: 363px;
}

a {
  text-decoration: none;
}

p a:link {
  color: #4204a5;
}

p a:visited {
  color: #4204a5;
}

p a:hover {
  color: #71a3f2;
}


/*
BELOW - NAVIGATION BAR
*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

li {
  float: left;
}

.spacefornav {
  margin-left: 462px;
}

li a:hover {
  color: #71a3f2;
}

div.nav {
  color: #046289;
}

li a {
  display: inline-block;
  color: #046289;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-family: 'Poppins';
  sans-serif;
  margin: 0px 20px;
  font-weight: 500;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Childish Gambino</title>
  <meta charset="UTF-8">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&amp;subset=devanagari,latin-ext" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <h1 class="heading">CHILDISH GAMBINO</h1>
    <ul>
      <div class="nav">
        <li class="spacefornav"><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="contact.html">Contact</a></li>
      </div>
    </ul>
    <p class="heading">"AWAKEN MY LOVE!"</p>
    <p class="heading1">
      Childish Gambino's latest
      <br> and freshest album is
      <br> AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
      <br>
      <a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
    </p>
    <img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art" alt="'Awaken My Love' album art">
    <<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
      <p class="vid">Watch Now!</p>
      <p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
  </div>
</body>

</html>

Just added a fixed wrapper. (A Div) and gave it a fixed size. (Not recommended)

.wrapper {
  position: absolute;
  height: 500px;
  width: 1000px;
}

You might want to learn about div tags and then add div tags to your content.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)