stackoom
  简体   繁体   中英

How do I make it so my website zooms in and out without effecting the layout of the website from the center?

 原文  2018-03-18 19:02:27  8   2    html/ css

Question

When my website is on 100% zoom it looks alright but...

  • when I zoom in it all goes right
  • when I zoom out it all goes left

How do I make it so my website zooms in and out without effecting the layout of the website from the center?

eg Like this website http://www.johnlewis.com

I am a beginner at coding.

HTML and CSS is shown below.

HTML 

    <html>

    <head>
    <meta charset="utf-8"/>
    <title> Josh Taylor</title>

     <link rel="stylesheet" type="text/css" href="main.css">
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" 
    type='text/css'>
    <link rel="shortcut icon" href="Icon.png"/>

    </head>

    <body>


    <div id="nav-div">
        <ul>
            <h1>JOSH TAYLOR</h1>
            <li><a href="">Contact</a></li>
            <li><a href="">CV</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Home</a></li>
        </ul>
    </div>

    <div id="main-left">


     <h2> A BIT ABOUT ME </h2>
     <p> this crap is only here to show what it would look like mate I don't 
    want it sounding boring like my CV and needs some life so give it some josh 
    </p>

    <h3> INTERESTS</h3>


    </div>

    <div id="main-right">


        <img src="CopenhagenJosh.png">
    </div>
    <div id="main-social">
    </div>

    <div id="interests">
        <img src="CopenhagenJosh.png">
        <img src="CopenhagenJosh.png">
        <img src="CopenhagenJosh.png">
        <img src="CopenhagenJosh.png">
        <img src="CopenhagenJosh.png">
    </div>

    <div id="intereststitles">
     <p> Hello</p>
     <p> Hello</p>
     <p> Hello</p>
     <p> Hello</p>
     <p> Hello</p>
     </div>

    <div id="portfolio-left">
        <h2> PORTFOLIO</h2>
    </div>
    <div id="portfolio-right">
        <p> This is my creative work ayoooo below...</p>
    </div>

           <div id="portfolio-1">
            <img src="AppIcon.png">
           <img src="AppIcon.png">
           <img src="AppIcon.png">
            <img src="AppIcon.png">
           <img src="AppIcon.png">
           <img src="AppIcon.png">
        </div>

    <div id="CV">
    <div id="CV-left">
     <h2> CV </h2>
    </div>
    <div id="CV-right">
    </div>
    <div id="CV-img">
    <img src="CopenhagenJosh.png">
    </div>    
    <div id="contact">

    <div id="contact-left">
          <h2> CONTACT </h2>
    </div>
    <div id="contact-right">
    </div>

    </div>

    </body>

    </html>

CSS 

    body {
     font-family: 'Lato', sans-serif;
     font-style:italic
     }

    html{
    padding: 0px;
    margin: 0px;
    background: url(sky.jpg);
    background-size:contain;
    background-repeat:no-repeat;
    display: inline-block;
    }

    /* FOOTER NAVIGATION */

    #nav-div {
    opacity: 1;
    font-size: 15px;
    }

    #nav-div h1{
    color: lightskyblue;
    cursor: pointer;
    width: px;
    float: left;
    margin-left: 600px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    font-size: 25px;
    }

    #nav-div h1:hover{
    color: white;
    transition:all 0.40s;
    }


    #nav-div ul{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 80px;
    background: ;
    line-height: 80px;
    float:right;
    border-bottom: px solid black;
    margin-right: 300px;
    }

    #nav-div ul a{
    text-decoration: none;
    color: lightskyblue;
    padding: 25px;
    }

    #nav-div ul a:hover{
    color:white;
    transition:all 0.40s;
    font-style:italic;
    }

    #nav-div ul li {
    list-style-type: none;
    display: inline-block;
    float: right;
    font-style:normal; 
    font-size: 15px;
    }

    #main-left{
    float: left;
    display: inline-block;
    width: 40%;
    height: 250px;
    margin-top: 100px;
    }

    #main-right{
    float: left;
    padding: px;
    display: inline-block;
    width: 22%;
    height: 175px;
    margin-top: 100px;
    }

    #main-right img{
    float: left;
    margin-left ;
    width: 150px;
    height: 150px;
    padding: 10px;
    display: inline-block;
    }

    #main-social{
     float: left;
    display: inline-block;
    margin-left: 7%;
    width: 10%;
    height: 250px;
    margin-top: 100px;
    }

    #main-left h2{
    width: 300px;
    height: 50px;
    font-size: 35px;
    color: white;
    display: inline-block;
    margin-left: 300px;
    margin-right: %;
    margin-top: 0;
    margin-bottom:0;
    float: left;
    }

    #main-left p{
    width: 250px;
    height: 100px;
    margin-top: px;
    margin-left: 300px;
    margin-right: 5%;
    font-size: 17px;
    color: darkgrey;
    display: inline-block;
    position: relative;
    }

    #main-left h3{
    margin-top: px;
    width: 150px;
    height: 30px;
    margin-left: 300px;
    font-size: 20px;
    color: white;
    display: inline-block;
    float: left;
    }

    #interests {
    width: 100%;
    height:125px;
    margin-top:px;
    margin-left: 300px;
    display: inline-block;
    }

    #interests img{
    padding: 14px;
    Height: 100px;
    Width: 100px;
    margin-bottom: 0px;
    }

    #intereststitles{
    width: 100%;
    height:100px;
    margin-top:0px;
     margin-left: 300px;
    display: inline-block;
      color: white;
    }

    #intereststitles p{
    padding: 14px;
    margin-top:0px;
    Height: 10px;
    Width: 100px;
    font-style: normal;
    display: inline-block;
    text-align: center
    }

     #portfolio {
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 1;
    }

    #portfolio-left{
    background-color: gray;
    float: left;
    width: 25%;
    height: 100px;
     }

    #portfolio-left h2{
    width: 200px;
    height: 50px;
    font-size: 35px;
    color: white;
    display: inline-block;
    margin-left: 200px;
    margin-right: ;
    margin-top: 25px;
    margin-bottom:0;
    float: left;
    }

    #portfolio-right{
    background-color: gray;
    float: right;
    width: 75%;
    height: 100px;
    margin-top: 0px;
    }

    #portfolio-right p{
    font-size: 20px;
    color: white;
    display: inline-block;
    margin-left: 0%;
    margin-right: %;
    margin-top: 36px;
    margin-bottom:0;
    padding: 0px;
    float: left;
    }

    #portfolio-1{
    margin-left: 0%;
    width: 100%;
    display: inline-block;
    text-align: center;
    padding:0%;
    margin:0;
    background-color: gray;
    }

    #portfolio-1 img{
    display: inline-block;
    padding: 0px;
    width:33%;

    }

    #CV {
    width: 100%;
    height: 900px;
    background-color: skyblue;
    opacity: 1;
    }

    #CV-left{
    float: left;
    width: 430px;
    height: 100px;
    }

    #CV-left h2{
   font-size: 35px;
    color: white;
    display: inline-block;
    margin-left: 200px;
    margin-right: ;
    margin-top: 25px;
    margin-bottom:0;
    float: left;
    }

    #CV-right{
    float: right;
    width: 75%;
    height: 100px;
    margin-top: 0px;
    }

    #CV-right p{
    font-size: 20px;
    color: white;
    display: inline-block;
    margin-left: 0%;
    margin-right: %;
    margin-top: 40px;
    margin-bottom:0;
    padding: 0px;
    float: left;
    }

    #contact {
    width: 100%;
    height: 500px;
    background-color: mediumpurple;
    opacity: 1;
    }

    #contact-left{
    float: left;
    width: 50%;
    height: 900px;
    }

     #contact-left h2{
    font-size: 35px;
    color: white;
    display: inline-block;
    margin-left: 200px;
    margin-right: ;
    margin-top: 25px;
    margin-bottom:0;
    float: left;
    }

    #contact-right{
    float: right;
    width: 50%;
    height: 900px;
    }

2 answers

solution1
 2  2018-03-18 19:12:44

You need a div as a wrapper for your webpage, and set a fixed width or max-width if you want the content to be able to become smaller on smaller screens with margin set as auto for margin-left and margin-right to keep the page centered.

Which is precisely what the webpage you mentioned does - 包装纸

solution2
 0  2018-03-18 19:24:10

You can center center content horizontally in CSS by putting it inside a block-level element (like a div ), with left and right margins set to "auto". Take a look at Centering in CSS: A Complete Guide > Horizontally > Block level element . In your case, you would probably want to add a div around all the content you currently have in the body , give it a set width, and add margin: 0 auto . Note that you probably want to use max-width instead of just width to support smaller browsers (see CSS Layout - width and max-width ).

In the example site you mentioned, there's a div with an id of "wrapper" that contains all the centered content.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I maintain same website layout at all zooms and browsers? Website elements go haywire when the user zooms in or out. How do I keep them from moving? How do I center my canvas without it effecting the drawing How do I change my VS Report layout so that when it renders in my website it is centered and fills the screen? How can I make my website zoom out like this website? How do I center my buttons on my website? How do I center my navigation bar on my website? How do I make my website scalable? How do I make a website work so that "index.html" does not appear on my home page's link after the website name? How do I make a javascript loading screen for my website which will fade out once my sites loaded
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM