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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

(1)fix code to remove the bullet points (2)cannot fit the images two on the same line in two columns

Can someone help me fix my code to get the same results as Nick?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

I solved (1) , but not able to solve 2. The images are of different sizes. Can I make them with CSS the same size so it looks like Nick's page? Here is my code

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

wrapper {

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

a { text-decoration:none;

}

img{ max-width:100%; }

/********* HEADING *********/

logo {

text-align:center; margin: 15px; }

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; }

/********* Footer *********/

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

gallery {

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

gallery li{

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

}

/********* COLORS *********/

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

/*green header */ header { background-color: #9ad70b; border-color: #599a68; }

/*nav background mobile devices */ nav { background: #599a68; }

/* logo texts */ h1,h2 { color:#fff; }

/* links */ a { color:#6ab47b; }

/*nav link */ nav a, nav a:visited{ color:#fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #991112; }

8 Answers

Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points
Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points

Alright,

Now that I remember you can use the height tag lol, select all the images in the css and manually change their size. Notice though that not all images are fit to be resized in the same way or pixels.

img { height: 200px; /*** you can play around with all the images with the px **/ width: ; /or you can use max-width */ max-width: ; }

Let me know what you think : )

Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points
Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points

2.Problem :

gallery li {

float:left; max-width:45%; /** on your code property : "width" set the property as "max-width". **/ margin:2.5%; background-color: #f5f5f5; color:#bdc3c7;

}

Hope it helps.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Not really, but thanks for the input. I guess I need to resize the images before uploading them.

Regards from Sweden, Jönköping btw. Good luck with your programing dream. We are pursuing similar paths! Cheers!

Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points
Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points

I thought it was a problem of aligning them in two columns, did you fix that ?

For the resize matter not sure if CSS can help with that...probably in a more advanced framework which so far I don't know.

Good luck too, cheers.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Yes. I think so too. Looking forward to learn more. If I discover in the next classes will upload it here :)

Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points
Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points

I was thinking of a way but you can give it a try,

add the same class or id to the images you have on html and then on css resize them using em or px with a image-resolution tag.

Let me know if it works.

Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points
Ditri Ahmetaj
Ditri Ahmetaj
3,060 Points

check for the width and padding, margin properties too, they can be valuable.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Tried it, but doesn't work. If you like the challenge here is the html code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Elena Paraschiv | Designer in action </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/beautify.css">

</head> <body> <header> <a href="index.html" id="logo"> <h1>Elena Paraschiv</h1> <h2>Designer</h2> </a> <nav> <ul><li><a href="index.html">Portofolio</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li><a href="http://icdn2.digitaltrends.com/image/lara-croft-tomb-raider-movie-screenshot4-1500x991.jpg?ver=1"> <img src="http://icdn2.digitaltrends.com/image/lara-croft-tomb-raider-movie-screenshot4-1500x991.jpg?ver=1" alt="Lara Croft"><p>Badassness provenit din antrenament continuu</p></a></li> <li> <a href="http://findbliss.com/los-angeles/wp-content/uploads/sites/2/2008/09/devapremalgilded400.jpg"><img src="http://findbliss.com/los-angeles/wp-content/uploads/sites/2/2008/09/devapremalgilded400.jpg" alt="Deva"><p>Lumina din dragoste</p></a></li> <li> <a href="http://cdn29.us1.fansshare.com/images/hedylamarr/hedy-lamarr-the-most-beautiful-inventor-in-the-world-kottkeorg-catwoman-122804347.jpg"><img src="http://cdn29.us1.fansshare.com/images/hedylamarr/hedy-lamarr-the-most-beautiful-inventor-in-the-world-kottkeorg-catwoman-122804347.jpg" alt="Hedy Lamarr"> <p>Calmitatea provenita din Inteligenta</p> </a></li> <li> <a href="http://www.perizona.it/wp-content/uploads/2015/02/Kim-Anami-Foto-Instagram-8.jpg?b88496"><img src="http://www.perizona.it/wp-content/uploads/2015/02/Kim-Anami-Foto-Instagram-8.jpg?b88496" alt="Kim Anami"><p>Ceva interesant</p></a></li> <li> <a href="http://fractal.fractalenlighten.netdna-cdn.com/wp-content/uploads/2013/02/Ana-Suromai-amanda-sage-art3-e1361966127344.jpg"><img src="http://fractal.fractalenlighten.netdna-cdn.com/wp-content/uploads/2013/02/Ana-Suromai-amanda-sage-art3-e1361966127344.jpg" alt="Amanda Sage wiild"><p>Nu-ti fi frica sa-ti arati puterea</p></a></li> <li> <a href="http://cdn1.relevantmediagroup.com/sites/default/files/field/thumbnail/main-maya-angelou_t479.jpg"><img src="http://cdn1.relevantmediagroup.com/sites/default/files/field/thumbnail/main-maya-angelou_t479.jpg" alt="Maya Angelou"><p>Va multumesc de atentie!</p> </a></li>

</ul>

</section>

<footer> <ul> <li><a href="https://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter" class="social-icon"></a></li> <li><a href="https://www.facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon" > </a></li>

</ul>
<p>&copy; 2015 Elena Paraschiv</p>

</footer> </div> </body> </html>

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Yeah. That makes it perfect! Tack så jätte mycket!