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
Marisa Zantey
2,053 PointsTrouble with my site?? :(
I've attempted the task "Adjust the Profile Page and Header" and my site has gone all over the place... I wish I could show you guys but I'm unsure of a method of doing that. but my header has squeezed up the top and it's just two narrow lines with the text unreadable, my navigation has had the background removed, but is out of the header section and is to the right below the header, and my pictures have gone everywhere. Haha... thanks for your time if you help me :)
Marcus Parsons
15,719 PointsThe best way to share code is via snapshots as Marisa does. It already features syntax highlighting and contains the exact folder structure and folder names of all files without having a ton of lines on the question itself. For a snippet of code, it is fine to use markdown to post it here, but it is certainly nowhere near ideal to post all of the CSS and all of the HTML files in markdown on this question when it's all contained in a neat link. I would ask you to please try to encourage fellow students to post a snapshot to their workspace if they're working with workspaces and help hand out the forum post FAQ about posting snapshots: http://www.teamtreehouse.com/forum/workspace-snapshots.
4 Answers
Chyno Deluxe
16,936 PointsHello Marisa Zantey, Quite a mess you got there lol. No worries. I've taken a look at the code and at first glance I saw a couple changes you could make to get your header back.
Main.css
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
overflow: hidden; <!-- WILL CONTAIN THE FLOATING ELEMENTS -->
}
responsive.css - missing closing curly bracket after line: 31
#gallery li:nth-child(4n) {
clear: left;
}
} <!-- MISSING CLOSING CURLY BRACKET -->
This won't fix everything but it's a start in the right direction. If you need anymore help please feel free to ask =)
Marisa Zantey
2,053 PointsThankyou!! it worked so great, but now there is still a small fault with my navigation. it's in 2 columns- the "about" and "contact" are stacked to the right, and my "profile" is on its own to the left of the other two. Is there any way to fix this??
I'm trying to make it fit into one straight row alongside each other!!
Chyno Deluxe
16,936 PointsI'll take a look at it now and see what I can find.
Chyno Deluxe
16,936 Pointstake you take another snapshot of your workspace so that i can see your set up.
Marisa Zantey
2,053 PointsI've had a play and I see that it is set out as I want it to be, but only when the browser is maximum size. If I make it any smaller, it'll start stacking on top of one another!! Is there something that will make it stop stacking and just stay in one row?? It looks much neater!!
Chyno Deluxe
16,936 PointsHey Marisa Zantey,
I took a look at your latest workspace and i figured out what the problem is.
There are two things you'll need to alter or remove in the main.css starting at line:72
nav {
text-align:center;
padding: 10px 0;
margin: 10px 0 0; <!-- CHANGED TO 10PX -->
}
nav ul {
list-style: none;
margin: 0 10px; <!-- CHANGE TO 10PX//CAN ALSO BE REDUCED TO 0PX -->
padding: 0;
font-size: 1.4em;
}
nav li {
display: inline-table;
margin-left: 20px;
}
Replace your styles with those above. The changed styles were the cause of the stacking. Let me know if this helps and if you have any more questions feel free to ask me =)
Marisa Zantey
2,053 PointsThankyou so much!!! You are so awesome... :P Maybe I should remember to ask you if I have any more trouble!! haha :)
Chyno Deluxe
16,936 PointsHaha! Absolutely. I'm here to help =) You can find me on instagram or twitter as well if you can't reach me here. links in my profile.
Darren Joy
19,573 PointsMarcus Parsons is of course right, if you have no idea what's wrong the snapshot works better But if you have an idea of an area of code you want people to review you can go with markdown.
Chyno's answer gives you a good example of what the markdown looks like within a question.
Marcus Parsons
15,719 PointsMost definitely. Thank you, Darren, for being a helpful student! :)
Darren Joy
19,573 PointsMarisa said: now there is still a small fault with my navigation. it's in 2 columns- the "about" and "contact" are stacked to the right, and my "profile" is on its own to the left of the other two. Is there any way to fix this?? I'm trying to make it fit into one straight row alongside each other!!
===
Just watched some videos on floats that might might help:
https://teamtreehouse.com/library/css-layout-techniques/float-layout/creating-a-horizontal-menu
Darren Joy
19,573 PointsMarisa Zantey said " If I make it any smaller, it'll start stacking on top of one another!! Is there something that will make it stop stacking and just stay in one row?? It looks much neater!!"
Media queries. I think it comes up in later lessons.
https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/media-queries
Darren Joy
19,573 PointsDarren Joy
19,573 PointsYou can cut and paste your code and prefix it with three backticks...
see the Markdown Cheatsheet link at the bottom of each answer and comment text box for way to do it..
This way we can see, here, what you have done..