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!

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

William Newell
William Newell
1,482 Points
Posted by William Newell
William Newell
1,482 Points

Images not staying in place.

Hi

Below is my coding. I have two rows of for images within my Li's

They are entered and showing properly but they are over lapping and pulling apart when narrowing and widening browser.

I want to keep these in place. I will work on different screen sizes later but for now would be happy just to correct this issue.

html

<!DOCTYPE HTML>

<html>

<head> <link type="text/css" rel="stylesheet" href="test1.css"> <title>Test page</title> </head>

<body>

<div class="fullwidth"> <header></header> </div>

<div class="fullwidth"> <div class="maincontainer"></div> </div>

<div class="fullwidth">

<ul>
    <li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li><li><img src="/applications/mamp/htdocs/claire/images/coffeeglass.png"/></li>
</ul>

</div>

</body> </html>

body { margin: 0;

}

  • { box-sizing: border-box; }

.fullwidth { width: 100%; background-color: yellow; }

header { width: 1200px; height: 500px; background-color: black; margin: auto; }

.maincontainer { width: 1200px; height: 500px; background-color: blue; margin: auto; }

ul { list-style: none; margin: 0 auto; line-height: 0; padding: 0; }

li { width: 25%; display: inline-block; margin: 0 auto 0; padding: 0; }

...

William Newell
William Newell
1,482 Points
William Newell
William Newell
1,482 Points

looks like all my html is not showing

2 Answers

William Newell
William Newell
1,482 Points
William Newell
William Newell
1,482 Points

Hi I have got images displaying properly except for one thing.

When narrowing browser to minimum they are perfect. When widening browser they are also perfect except when widening to the fullest extent. At that point right hand side carries on and images stop.