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 Alessandro Elkan
Alessandro Elkan
Courses Plus Student 7,447 Points

Positioning problem

Hello all,

I'm having trouble with an element on my website. Anytime I resize my browser it always gets out of position. """<!DOCTYPE html <html <head> <link rel="shortcut icon" href="img/favicon-3.ico"> <style> html {background: url('img/timelapse.jpg') repeat-x center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation: play 3s steps(10) infinite; -moz-animation: play 3s steps(10) infinite; -ms-animation: play 3s steps(10) infinite; -o-animation: play 3s steps(10) infinite; animation: play 3s steps(10) infinite; } 

#content { 

    max-width: 940px;
    margin: 0 auto;

} .hermes { position: absolute; top: 0; bottom:0; left: 0; right:0; margin: auto; -webkit-animation: hermes-run 3s ease infinite; }

@-webkit-keyframes hermes-run { 50%  { -webkit-transform: rotate(-5deg) translateY(-10px); 
}

} .link { background-position: center; position: absolute; -webkit-animation-name: change; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards; }

@-webkit-keyframes change { from {center} to {left: 30.625em; top:7.813em;} }

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

</style>

<title>Nous Academy</title> </head> <body>

<div id="content"> <a href="../olympus/gods.html"><img title="Nous Academy" class="link" src="img/CloakedRockLogo.gif"/></a> <img class="hermes" title="Stolen by Hermes the Thief" src="img/Hermes.gif"/> </div>

</body> </html>"""

The cloak never stays in one place, and based on the size of the browser it can basically end up anywhere. You can see it here www.nousacademy.com

2 Answers

. Ali
. Ali
9,799 Points

Hi there, You have given your link an absolute position i.e. image with out giving any positioning to its parent element. look at this example 

  <div id ="container">
    <div id="inner-container">
     <img src="/img/somepic.jgp" alt="">
     </div>
</div>

here we have a container and with inner-container. Now suppose if we have to position inner-container absolute, it need to be done relative to its parent i.e. container or if it is the link then relative to the inner-container. e.g. to have inner-div positioned absolutely the css would be as follow;

#conatiner {
    width: 800px;
    margin: 0 auto;
    position: relative;
}
#inner-container{
    width: 600px;
    position:absolute;
    left:100px;
    top:100px;
}

hope that helps. please let me know if u understand. cheers. Ali

Alessandro Elkan
PLUS
Alessandro Elkan
Courses Plus Student 7,447 Points
Alessandro Elkan
Alessandro Elkan
Courses Plus Student 7,447 Points

I got it thanks a lot! I had a feeling I had to do that.