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
Kevin Thomas
1,294 PointsFollowing Nick's instruction on how to build a website, why are my navigation anchors wrapping when resizing the window?
I am using the latest version of Chrome. When I reduce the window to smallest possible size, the navigation anchors change from horizontally inline to wrapping the last link text to a second row below the other two. A slight horizontal expansion of the window corrects this, allowing enough room for the last link to jump up inline with the other two. Furthermore, when I am expanding the window beyond 480px to engage the floating left header and floating right navigation @media effect, the navigation again displays in two rows, having the last link text below the other two until a certain point of expansion is reached and then it pops back up inline with the other two links. I rewatched the lecture on stylizing the header and navigation and my css follows Nick's exactly. I double checked that the < header >, < nav >, < ul > and all the < li > tags are closed </> in the html. I was able to resolve the minimum size wrapping by either lowering the navigation's font-weight or zeroing out the horizontal margins, but the wrapping still occurs when expanding the window beyond 480px, engaging @media floating effects. I checked that all of the css { are closed with a }. I checked that all the css : and ; are in place. Everything else is working correctly. I simply cannot figure this out. All help is appreciated. Thank you.
Herb Bresnan
10,658 PointsKevin, could you please post your code? Check out the video on "Tips for asking questions" located in the right pane of the forum.
Shawn Flanigan
Courses Plus Student 15,815 PointsKevin, I edited your original post to display a little more legibly. For some reason, we can no longer have html tags inline in our posts, so I just added some spaces between the < and > of each of your tags. It's not ideal, but it'll do in a pinch. As Herb said, it would be nice to see your code. It's hard to assess the problem without it. After you post it, I'll be glad to look it over.
4 Answers
Kevin Thomas
1,294 PointsThanks everyone. Here's the css from the header and the navigation because the navigation is contained inside the header in the html. Thanks so much.
/*********************
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;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
Kevin Thomas
1,294 PointsOh wow, the formatting of this text is not as I posted (nor coded) it. I can't control that, sorry.
Kevin Thomas
1,294 Pointsjigsaw.w3 does not find any errors in any of my css. However, validator.w3 does find one error in my html and that is in the google link used to render the fonts used in both the header and navigation links. The fonts do show, but perhaps this is where the error lies as far as their layout behavior goes. The following coding was copied directly from google fonts and is contained inside html tag brackets (but I cannot type them or the coding cannot be displayed in this interface). In Nick's example to check the coding, he does not get an error while having this same link in his html:
link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'
Thanks everyone.
Kevin Thomas
1,294 PointsHere is the actual link to the site I'm building to see if you view the same error I do. Thanks.
Shawn Flanigan
Courses Plus Student 15,815 PointsFixed your formatting again. :) It just takes 3 backticks (left of the 1 key on your keyboard) before and after your code to make it display correctly. I'm not able to see your Workspace either, but I'm guessing the font that is being substituted for the Google font is just a bit larger than Changa One, which would cause it to take up more space...and ultimately cause the last link or two to be bumped down to the next line. If you decrease the font size a tad or remove some of the left and right padding, it will probably work the way you want it to.
Herb Bresnan
10,658 PointsHad a chance to briefly look, but now I keep getting "workspace unavailable" when I click on your link. I saw two things, but I don't know for sure if they will help. First, in your HTML, put your main.css after your responsive.css. main.css should always be listed last or it will get overwritten because of how the cascade works. Also, there was no styling for your second @media from the 660px width. On my laptop that is right about where your <nav> broke. I would first try listing your main.css last.
Kevin Thomas
1,294 PointsHerb, I appreciate your response and looking at my coding. Nick Pettit's course specifies that the responsive.css is to be listed after main.css to overwrite styling in main when conditions are met in responsive (by css cascading nature). While Nick instructs to add the @media for 660px in addition to 480px, he does not instruct to actually write any effects to occur when the 660px conditions are met and I'm not sure why. I've finished this course and will be beginning Guil Hernandez's more in depth CSS course shortly. Perhaps I'll discover the issue on my own as my knowledge of CSS increases. Thanks for your help.
Shawn, I appreciate your response and offer to help. Thanks for making the edits to my question so that it appears correctly.
Thanks so much guys!
Herb Bresnan
10,658 PointsGlad you were able to catch my mistake. I think you will like the CSS Deep Dive with Guil. He is an awesome instructor and you will learn a lot. Good luck.
Kevin Thomas
1,294 PointsThanks again for all your help Herb. Shawn, thanks for reformatting my coding again and for explaining how to display it. Three of these ` before and after the coding. Noted. I too agree that the font itself is the culprit and making size adjustments in the font and/or padding would resolve the issue.
Thanks again guys! All the best, Kevin
Kevin Thomas
1,294 PointsKevin Thomas
1,294 PointsFor some reason this took out a chunk of what I wrote. "I checked that the header, nav, ul and all the li tags are closed </> in the html."