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 am asking for help for some glitches on a website please thanks
Hello, I was wondering if anyone out there could point me in the right direction on how to fix some of the issues on this fictitious website www.monikaandersondesign.com it seems like every time I try to create a dependent selector to format something on the webpage it makes the website even more messed up. Any help would be greatly appreciated. Here are my issues:
- The gallery.html page took out the formatting for the menu buttons - how to I resolve this? I thought that I created a css style for the nav section and why is the gallery formatting over riding the nav styling?
- The buttons (bathtub shower etc) on the bottom of the home page are not centered. I have created many dependent selectors and they will not target these elements.
- On the mobile version of the homepage website the buttons have this 40 px padding that I cannot get rid of. I have again created many dependent selectors to target this issue but something seems to be overriding this. When I look in google chrome developer tools there is a 40 px padding in the normalize css that I was told not to touch because it helps with browser issues. Thanks so much. I spent about 20 hours trying to resolve this on my own and any help would be greatly appreciated. Thanks again Monika
8 Answers
Alexander Dolgan
5,208 PointsHi, You in right direction, now in your stylesheet define margin top and bottom 1em for ul. and this will resolve your problem.
Alexander Dolgan
5,208 PointsYou have some css stylesheet links on your page, css - cascading style sheets, when your rules repeating, the latter condition applies. You connect remote bootstrap css from CDN server, and your rules in stylenew.css (core custom css) overwritten by the terms of the other pages, because your stylenew.css is before bootstrap css in your head section. And browser use latest bootstrap rules for ul and ol.
Monica Anderson
3,621 PointsOk great so if I switch the order than my rules in stylenew.css should override the bootstrap css. I will try that thanks!
Isaac Russell
12,091 PointsI'm just going to address your first problem. Namely, " 1. The gallery.html page took out the formatting for the menu buttons - how to I resolve this? I thought that I created a css style for the nav section and why is the gallery formatting over riding the nav styling?"
It appears to me that you have a div with the id of #wrapper on every other page except the gallery page. If you put your gallery inside this wrapper it might solve your problem. To be exact create a div with an id of wrapper on your gallery page as well and put the gallery slider inside of this.
Another way to possible solve this issue would be to add a class to your "section" div and add some padding-top like around 20px.
Please let me know if this helps.
Another principle you may want to think about employing is using a system like https://smacss.com/ or https://css-tricks.com/bem-101/
This may help you organize your code so you don't have overriding issues.
I hope this helps. I would be interested in knowing if it does help.
Monica Anderson
3,621 PointsThank you Isaac your information is very helpful. When I added the wrapper div to the gallery page the carousel was not working properly that is why I had to take it off. I do think adding a class to the section div may work. I will try that next. Thanks so much!!!! I agree I need to have some sort of organization so that I am not overriding css rules thanks for the articles. I will definitely let you know how I resolved this. Thanks again. Monika
Monica Anderson
3,621 PointsHi Isaac, I did as you suggested and created a div ID for section and added a 20px padding to the top and it did give it some space between the menu buttons and the gallery but the buttons do not match the other buttons on all the other pages. For instance i put a text decoration of none for all the pages for the links and for some reason the gallery page does not acknowledge this css rule. So what I think has happened is that there is some sort of css rule that is on the gallery page from the galley code I pasted in the page that is over riding the formatting for the menu buttons and also the footer is not centered like the other pages. I am not sure how to resolve this thanks so much Isaac for your help. If you can think of anything else let me know. Thanks Monika
Alexander Dolgan
5,208 PointsFor #gallery(bottom buttons) you can use for li - display: inline-block, remove float property; and to center ul content with text-align: center;
Monica Anderson
3,621 PointsThank you Alexander that worked!!!! My buttons are now centered!!! thanks so much!!
Alexander Dolgan
5,208 PointsAnd on the gallery page you use bootstrap css, and in their rules has this property
ol, ul { margin-top: 0; margin-bottom: 10px; }
I usually connect my own custom css after bootstrap.
Monica Anderson
3,621 PointsHi Alexander, Yes I was looking for a simple carousel for my website and I am not familiar with bootstrap. I found the code online and copied and pasted it. I am not sure if that was the right thing to do since I am unfamiliar with bootstrap. So are you suggesting I put some custom css in the html document for gallery.html and not add it to the external css page? Or should I remove ol, ul { margin-top: 0; margin-bottom: 10px; } from the code on the gallery.html page. I am sure if I did that it would mess something up or maybe not. I think I will try and remove it and see what happens. Thanks so much for your help. Monika
Monica Anderson
3,621 PointsHi Alexander, Where are you seeing "margin-top: 0; margin-bottom: 10px; "? I do not see it in the html document for gallery.html. Thanks for all your help if you are too busy I totally understand. thanks Monika
Monica Anderson
3,621 PointsI would really love to know who to get rid of the padding on the left that occurs when the home page is in mobile version. It is a 40px padding that is on the left side of each of the buttons. I have probably spent the most amount of time trying to resolve this issue, like over 10 hours of debugging. It will go away then reappear itself. thanks so much for everyones help. Monika
Alexander Dolgan
5,208 Pointspadding from normalize.css,
ol, ul { padding: 0 0 0 40px; }
I recommend you found some information about Chrome, or other browser Inspector. It is very powerfull debug system.
Monica Anderson
3,621 PointsYes I totally agree it is. I have been studying that program and I did see that but i thought I was not supposed to change normalize.css since it is supposed to work out the glitches on the different browsers. But I will go ahead and change it. I hope it works! thanks so much.
Monica Anderson
3,621 PointsHi Alexander, I removed the padding in normalize.css document and then the footer icons were not centered so I changed it back. I did find out one problem on the gallery page the there were two classes named container so I switched one to container1. I switched the stylenew.css to be below the bootstrap css but it still is crashing into the buttons on the top and my menu buttons do not want to have the rule text decoration none applied them. I will just keep trying to figure it out. Thanks for your help and yes google developer tools are great I need to learn how to use that more. Thanks again Monika