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 Thania Abrahams
Thania Abrahams
972 Points

Image Placement within div element

I am really struggling to understand why it is that certain things are placed in a certain way after I click save. Please could you answers my questions below: 1) Why is the wrapper centred once I click save? 2) And why, even after, I have removed the unordered list tags (removed the bullet points) are the images not centred on the wrapper? Or even flush against the left side of the wrapper? I understand that having bullet points would push the images towards the right of the page as it does in most text editors but this does not make sense to me

Please find below my html and css code:

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Thania Abrahams | FED</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thania Abrahams</h1> <h2>Front End Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/thaniabrahams"><img src="img/twitter-wrap.png" alt"Twitter Logo"></a> <a href="http://facebook.com/tye1509"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a> <p>© 2015 Thania Abrahams.</p> </footer> </div> </body> </html>

CSS: a { text-decoration: none; }

wrapper {

max-width: 940px; background: orange; margin: 0 auto; padding: 0 5%; }

logo {

text-align: center; margin: 0; }

a { color: #6ab47b }

header { background-color: #6ab47b; border-color: #599a68; }

h1, h2 { color: #fff; }

nav { background-color: #599a68; }

nav a, nav a:visited { color: #fff; }

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Hi Thania,

  1. Your wrapper is centered due to the margin on your #wrapper CSS Markup : margin: 0 auto; this sets your left and right margin to auto, which will automatically fill any unused whitespace equally.

I'm not sure if that was your question or why it is not working, if the question is why it is not working it is because you forgot to put # before wrapper in your CSS markup. Because it is a ID it requires # in the markup. For classes you require a "." before the class name in the markup.

Example of correct markup:

#wrapper {
  max-width: 940px; 
  background: orange; 
  margin: 0 auto; 
  padding: 0 5%; }

You are also missing # from your logo id in your CSS markup.

  1. To make your images flush to the left side of your div you can add a class and positioning to your images.

For example:

<img class="imageleft" src="img/numbers-12.jpg" alt="">

.imageleft{
  position: relative;
  left: 0px;
}

This will tell the image to be 0px from the left of its container and to position itself relatively around surrounding elements (for example if you wanted two images in one ul it will move the second image to the next line.

If you want multiple images to position horizonatally next to each other you can use:

.imageleft{
   float: left;
}

If you would like the images to be centered in the whitespace you can position them with margin:0 auto; like you have with your wrapper:

.imageleft{
   margin: 0 auto;
}
  1. Additionaly you can also change the size of the indent on unordered lists or reset the browser defaults to 0 like so: 
ul{
   margin: 0;
   padding: 0;
}

Hope this helps!

Thania Abrahams
Thania Abrahams
972 Points

Thanks Ashley, for some reason when I copy and paste my CSS code, it does not copy over the pound signs. Ok so I fully understand why my wrapper is centred, thank you so much for that! My next question is why do the images for eg. img/numbers-01.jpg not align with the given 940px max-width declaration? Also, when we remove the bullet points from the images, why are they still off centre off of the wrapper/container?

Is there anyway to IM?

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

It is the lack of positioning in your CSS for your images that are making them revert to default browser behavious.

I would recommend checking out the Webdesign Track, early on into the track they go into quite a lot of detail on how to properly position CSS elements, I think it might be quite helpful for understanding how to achieve the positioning on the images you are after.

Link to track: http://teamtreehouse.com/tracks/web-design

If you do not have time to do the track though a specific off-track part of it I would recommend on CSS positioning and layout techniques: http://teamtreehouse.com/library/css-layout-techniques

Thania Abrahams
Thania Abrahams
972 Points

I got you! Wow finally someone explained it to me in a way I actually understood, thank you so much!

Thania Abrahams
Thania Abrahams
972 Points

Hi Ashley, quick question. I know you mentioned my images could be placed a certain way because of the native browser styling but is this still relevant even though I have used the normalize.css file?

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

normalize.css clears a lot of browser default values that can be set to 0 (for example margins and padding). Unfortunately having a 0 or none value for image positioning will cause browser defaults as it will not know what to do without reverting to a default value.

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Your margin set to auto in the wrapper is what is centering it because is sets left and right margins equally. I think the text-decoration: none; only hides the bullets. Try setting the left margin to 0 or a negative value to suck it up to the side or try a text-align: center; to move it around the wrapper. Browser default likely has a left alignment and margin. I only see your logo set to be centered.