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
Monica Anderson
3,621 PointsI cannot get my html portfolio to float side by side and my nav bar is messed up.
I cannot get my html portfolio to float side by side and my nav bar is messed up. I do not know how to get to my earlier tutorial to see what I missed. Thanks so much Here is the html code and css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://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>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul id="gallery">
<li><a href="index.html" class="selected">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 id="gallery">
<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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
Here is the css:
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/**************************
HEADING
**************************/
#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;
}
/**************************
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;
}
#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;
}
/* nav background on mobile devices */
nav {
background: #599a68;
}
/* logo text */
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: #32673f;
}
12 Answers
bothxp
16,510 PointsHi Monica,
I think that your 1st issue is in the nav section, you have given it an id of gallery. So start by removing the id="gallery" from the opening <ul> and then see how that looks:
<nav>
<ul id="gallery">
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Where are you up to in the "How to make a website" course? That could help to check it you have missed something else.
Monica Anderson
3,621 PointsThe navigation bar looks more like the way it should look but the images are still not stacking side by side they are on top of each other. The images are scaling with the size of the browser.
Joe Consterdine
13,965 PointsHi Monica,
Try the code below it will look neater.
I won't explain everything I've done because you'll probably just get confused, but here's some things to think about.
Look at your HTML. You have images inside link tags.
<a href="img/numbers-01.jpg">
should be something like:
<a href="http://www.google.com">
You have two gallery IDs in your HTML. IDs are unique meaning you can only have one.
The reason your floats were breaking was because containers break when their children are floated.
So if you have a div and inside that you have uls or list items that are floated the div will collapse and have no height. You need to add a clearfix here which I've done.
You will need to read up on them so either google them or search Treehouse.
Also in your CSS you have h1 styles and then below you've written h1 again just to add a color, try and keep it within one block. So keep all your h1 styles together.
I won't go on because I know it's confusing to begin with.
Any questions then just ask :)
Joe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Nick Pettit</h1>
<h2>Designer</h2>
<header>
<a href="index.html" id="logo">
</a>
</header>
<nav>
<div class="wrapper">
<ul class="gallery cf">
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="wrapper">
<section class="cf">
<div class="column-1">
<ul class="main-content cf">
<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>
</ul>
</div>
<div class="column-2">
<ul class="main-content cf">
<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>
</div>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
<div class="wrapper">
</body>
</html>
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
max-width: 80%;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.cf::before,
.cf::after {
display: table;
content: "";
}
.cf::after {
clear: both;
}
* {
box-sizing: border-box;
}
/**************************
HEADING
**************************/
#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 {
padding: 10px 0;
margin: 20px 0 0;
text-align: center;
}
/**************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
}
/**************************
PAGE: PORTFOLIO
**************************/
.gallery {
margin: 0 auto;
padding: 0;
list-style: none;
width: 50%;
}
.gallery li {
float: left;
width: 33.3%;
color: white;
}
.gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
section {
width: 80%;
margin: 2rem auto;
}
.main-content li {
list-style: none;
}
.column-1, .column-2 {
float: left;
width: 40%;
margin: 0 2.5%;
}
.column-1 .main-content {
float: left;
padding: 0;
}
.column-2 .main-content {
float: right;
padding: 0;
}
footer {
clear: both;
}
/**************************
COLORS
**************************/
/*site body*/
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: black;
text-align: center;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
bothxp
16,510 PointsHi Joe,
I think it would probably be best if we were able to sort out Monica's problem in line with the way in which Nick Pettit teaches the course that she is following. Otherwise she is not going to be able to continue following along with the videos. She is currently following the How to make a website course.
In the course Nick does use the images inside of the link tags and does split out some of the styling such as using h1 { ... } in multiple places.
But having looked back at the course materials and the code posted by Monica above I am stumped as to what is making the images not float correctly. I have copied and pasted the html & css that Monica provided and used it along side the img directory and normalize.css. The only change that I made was to remove the extra gallery id from the navigation section and the images all started to float correctly in my test .... I'm just not sure why making that same change hasn't fixed the issue for her ?????
Joe Consterdine
13,965 PointsWell for a start the list items are floated are 45% wide so they won't stay on the same line as there's more than two of them.
bothxp
16,510 PointsThe expected result is for the gallery to display 2 images per line.
Download the project files from Stage6 - Video4 to take a look at what we are trying to get to.
I believe that Monica is somewhere around here in the course.
bothxp
16,510 PointsWatching the videos again it seems that the issue is occurring during the style the portfolio video.
Joe Consterdine
13,965 PointsBecause in your example you said remove the id from the gallery, but there's two gallery IDs and the one regarding the images is a bit further below.
Also Monica you need to make sure you remove the '#' from the gallery selector in your CSS once you've removed the ids in your HTML.
Monica Anderson
3,621 Pointsthat is where I think might be the issue I removed the gallery selector in the nav and kept the one in the section. I am not sure how I had 2. I know with ID selectors you can only have one. But the images are still lining up on top of each other. The nav does look better. Thanks
bothxp
16,510 PointsSorry if I wasn't clear. I meant to remove the id="gallery" from the nav section that I had highlighted. It's just needed in the unordered list that is used for the actual gallery.
Personally I'd recommend that Monica sticks with using the id selector as per the course (keep using the #) rather than switching it over to a class selector.
It's probably worth downloading the example code from the downloads section under the video. You can then check your code against Nicks.
Monica Anderson
3,621 PointsThanks for all your help. I wonder if the browser safari has anything to do with this glitch although the normalize.css style sheet is supposed to fix all the browser issues. I will to preview the site in chrome. I am so grateful for this help. Treehouse community is a great resource.
Joe Consterdine
13,965 PointsHi Monica,
if you could make the changes we suggested and re paste the code so we can check if it's all ok.
Thanks Joe
Monica Anderson
3,621 PointsHi Joe, I will paste the code and css but before I do the only change I made was to removed #gallery from the nav opening tag in the html document. Was there something else I was supposed to change because bothxp said I should not make the changes you recommended because I would not be able to follow the tutorial. So that is the only change - correct? Thanks Monika
Monica Anderson
3,621 PointsThank you Bothxp I did not realize there was an example code. Cool thanks I will check it out.
bothxp
16,510 PointsThat's ok. Most videos will have a downloads section underneath them and will often include a 'Project Files zip'.
Monica Anderson
3,621 PointsHere is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://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>Nick Pettit</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.html">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="">
<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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
The css code remains the same so I did not paste it. thanks for your help I will look at Nick's code now.
(edited: by BothXP to add the markdown to display the html)
Joe Consterdine
13,965 PointsBotxhp, that's fine but if she removes the id from the gallery in her HTML and leaves the '#' in her CSS then it isn't going to target that selector because there is no ID anymore.
You've removed the ID from the gallery ID in the nav container but there are no images in that container so it won't change much. I'd remove them from both and try. You can always change it back.
Joe
bothxp
16,510 PointsI'm suggesting that Monica removes the id="gallery" from the opening unordered list tag in the nav section as it is not supposed to be there.
That will just leave the one id="gallery" in the unordered list that is used later in the page for the actual gallery.
The further styling of the nav section happens in later videos in the course.
I know that your solution is a good way of approaching the page, but as Monica is following the very first web design course in the web track I wanted to try and keep her following the path of the course.
Monica Anderson
3,621 PointsThat is what I did Bothxp I removed the ID gallery from the opening nav tag in the html document.
bothxp
16,510 PointsI've just copied and pasted that html of yours and in both Firefox and Safari I am seeing the page showing the images correctly. So I'm afraid that I am at a loss as to why it is not displaying correctly for you.
Nearly midnight here and I'm about to run out of laptop battery so I'm going to have to head off now. The only thing that I can suggest right now is to try opening the index.html from the downloaded project files and see if that display correctly. Then if it does try comparing it to your code.
Best of luck, hope I was able to help at least a little and that you're having fun !
Monica Anderson
3,621 PointsWell I am not sure what happened but it started working - maybe the old website was in the cache?! I am not sure but I am happy thanks for the help. Yes the nav looks great too, thanks for that catch both of you.
Joe Consterdine
13,965 PointsYeah maybe cached Monica. Well done!
bothxp
16,510 PointsYay !
Monica Anderson
3,621 PointsMonica Anderson
3,621 Pointsthanks I tried that and it still will not adjust the images side by side. Thanks maybe there is more than one thing wrong.
bothxp
16,510 Pointsbothxp
16,510 PointsDid anything change at all when you removed the gallery id from within the nav section?