Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Morris
Michael Morris
675 Points

Moving divs

All of my divs are moving down over my middle background when I resize. Can't figure this one out.

<!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%;
  }
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Without the images, it's hard to see anything happening when re-sizing. To make your images and backgrounds available, you might want to make a workspace snapshot and provide the link.

Michael Morris
Michael Morris
675 Points

Were would I post a workspace snapshot at. The webpage only has three headings which are the divs. Michael, ring image, Christina. these images are 4 spaces from the top in full screen but move down another four spaces when resize down to the size of a standard smartphone.

Michael Morris
Michael Morris
675 Points

Here is my workspace.

https://w.trhou.se/054p1vz3tv

3 Answers

Kaitlyn Threndyle
Kaitlyn Threndyle
18,204 Points
Kaitlyn Threndyle
Kaitlyn Threndyle
18,204 Points

You have some spelling errors and a missing ">" in your code. It may not be related but you might want to fix those anyways. They could lead to other issues.

  1. in your html the last </div> needs the closing bracket
  2. I think there should actually be another closing </div> as well before the closing </body> tag.
  3. You spelled "border" wrong twice in your CSS.
Michael Morris
Michael Morris
675 Points
Michael Morris
Michael Morris
675 Points

Yeah that is just copying over to treeshouse. they are correct in my working code.

Kaitlyn Threndyle
Kaitlyn Threndyle
18,204 Points

ok sorry

Michael Morris
Michael Morris
675 Points
Michael Morris
Michael Morris
675 Points

i've left a workspace link for everyone.