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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Godfrey M
PLUS
Godfrey M
Courses Plus Student 2,696 Points

problem with styling multiple pages

i am trying to style the navigation bar but it is giving hard time, when i style the home page ,the about will behave differently, same to the contact so everything is messed up i dont know where to start. the footer is hanging in the middle of the page help me guys

clearfix is not working for me on the about, contact,or portfolio page...

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Unfortunately, it's almost impossible to help you without seeing your code. If you have a GitHub repo up you could link it here. If you're doing this in workspaces, you can make a snapshot of your workspace and link it here. This will allow us to fork your workspace and have a look around. :sparkles:

1 Answer

Greg Lawrence
Greg Lawrence
7,960 Points

I agree with the others about posting code. Also, don't be afraid to split out your css code into multiple files. Maybe make one file just for the nav styling, then one for each page. Maybe instead of just a nav styling file, you can make a layout.css file that includes nav and footer styles that are shared amongst all of your pages.

When you apply CSS, remember specificity and that css files are read from top to bottom. So the last thing wins if you select and change the same element multiple times. Try to add specificity if something doesn't seem to be sticking.

Use descendant selectors to be specific about which elements you are trying to select. Like don't just choose <li> elements, make them more specific by stating:

.nav-bar li {
}