Div's moving when resized

Discussion in 'HTML & Website Design' started by michael morris, May 15, 2016.

0
  1. #1
    All of my divs move when I resize the window. I have a link to my treehouse work space so you can see what i'm talking about. Just click preview workspace in the upper right hand corner. I'll also post my code below. https://w.trhou.se/054p1vz3tv

    <!doctype html>

    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" type="text/css" href="Main.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    </head>

    <body>

    <div class="wrapper">
    <div class="michael">
    <p class="m">Michael</p>
    </div>
    <div class="ringhead">
    <img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
    </div>
    <div class="christina">
    <p class="c">Christina</p>
    </div>
    <div class="weddingWebsite">
    <img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" width="350" height="50">
    </div


    </body>
    </html>

    .wrapper {
    width: 497px;
    height: 100px;
    margin: 0 auto;
    /* padding: 0 5%; */
    display: block;



    }

    .michael {
    color: #EEE8AA;
    position: relative;
    text-transform: uppercase;
    font-size: 30px;

    float: left;
    display: inline-block;
    border: 1px white;
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* left: 30%; */
    /* top: 0%; */

    }

    .m{
    max-width: 100%;
    max-height 100%;

    }


    .michael{


    }


    .ringhead {
    position: relative;
    /* max-width: 100%; */
    /* max-height: 100%; */
    float: left;
    bordr: 1px solid black;
    display: inline-block;
    /* left: 50%; */
    /* top: 4%; */
    }

    .ring{
    max-width: 80%;
    max-height: 60%;
    }

    .christina {
    color: #EEE8AA;
    position: relative;
    float: left;
    borer: 1px solid black;
    /* top: 0%; */
    text-transform: uppercase;
    font-size: 30px;
    padding-left: 10%;
    /* max-width: 100%; */
    /* max-height: 100%; */

    }

    .c{
    max-width: 80%;
    max-height: 60%;

    }

    body{
    background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
    background-size: 100% 10%, 100% 15%, 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    }
    .weddingWebsite{

    position: fixed;
    top: 55%;
    left: 55%;
    transform: translateX(-55%) translateY(-55%);
    max-width: 80%;
    max-height: 60%;

    }

    .wedding{

    max-width: 80%;
    max-height: 60%;
    }
     
    michael morris, May 15, 2016 IP
  2. Rahul Vaishnav

    Rahul Vaishnav Active Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    63
    #2
    I don't know why but i didn't find "preview workspace" link in right corner.
     
    Rahul Vaishnav, May 16, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    I'm guessing that is something that shows up if you're either logged in OR if it's _your_ workspace. I suggest putting up an actual working test somewhere like jsfiddle or something. Or just link to wherever it's hosted.
     
    PoPSiCLe, May 16, 2016 IP
    kk5st likes this.
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    For debugging a web page front end, my preference is a real page on a real host. Hard to work with variably sized viewports on jsfiddle-faddle.

    cheers,

    gary
     
    kk5st, May 16, 2016 IP