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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Artur Sargsjan
Artur Sargsjan
697 Points

Photos stay big and piled up

When i copy text from Nick result is different. My pictures stay big and two on each row pile up on each other. I don't know what is the problem i try to write #gallery li, #gallery li img and it help a little pictures are not anymore piled up on each other they are small but caption is on right side not under the photos. what is the problem?

6 Answers

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Can you post the code here please?

Artur Sargsjan
Artur Sargsjan
697 Points
Artur Sargsjan
Artur Sargsjan
697 Points

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

Artur Sargsjan
Artur Sargsjan
697 Points
Artur Sargsjan
Artur Sargsjan
697 Points

width 45% is applying on caption but not on images i don't know why

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

All the code please, check also your HTML, maybe you're not closing some tag properly.

Artur Sargsjan
Artur Sargsjan
697 Points
Artur Sargsjan
Artur Sargsjan
697 Points

<!DOCTYPE html> <html> <head> <meta charset="uft-8"> <title>Artur Sargsjan | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <head> <body> <header> <a href="index.html" id="logo"> <h1>Artur Sargsjan</h1> <h2>Designer</h2> </a> <nav > <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt="picture one"> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt="picture two"> <p>Playing with blending modes in Photosop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt="picture six"> <p>Creating 80's style of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt="picture nine"> <p>Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt="picture twelve"> <p>Creating shapes using repetition</p> </a> </li> </ul>

  </section>

  <footer>
    <a href="http://twitter.com">
      <img src="img/twitter-wrap.png" alt="Twitter Logo">
    </a>
    <a href="http://facebook.com/artur sargsjan">
      <img src="img/facebook-wrap.png" alt="Facebook Logo">
    </a>
    <p>&copy; 2014 Artur Sargsjan</p>
  </footer>
</div>

</body> </html>

Artur Sargsjan
Artur Sargsjan
697 Points
Artur Sargsjan
Artur Sargsjan
697 Points

/********************************** GENERAL ***********************************/ body{ font-family: 'Open Sans', sans-serif; }

wrapper{

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

a{ text-decoration: none; }

/dulezite aby zustalo v velikosti wrapper img { max-width: 100%; }

/********************************** Heading ***********************************/ header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%;

}

logo{

text-align: center; margin: 0; }

h1{ font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/********************************** Navigation ***********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul{ list-style: none; margin:0 10px; padding: 0; display: block; }

/********************************** FOoter ***********************************/

footer{ font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

footer{ clear: both;

}

/********************************** POrtfolio - pictures ***********************************/

gallery{

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/********************************** Colors ***********************************/

/*Site body */ body{ background-color: #fff; color:#999; }

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

h1, h2{ color: #fff; } /* nav background on mobile*/ nav{ background: #599a68; }

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

nav a.selected, nav a:hover { color: #32673f; }