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

CSS

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Removing Overlapping Buttons

On one particular page of my domain, http://www.englishteachertodd.com/lp.html, my buttons are overlapping and the header has a margin at the top of it that I want to remove.

What is the main problem here and how can I fix it? How can I give adequate space to the buttons?

Any help is MUCH appreciated!

Thanks so much!

Sincerely,

Todd

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Todd,

Your main content div needs to clear the floated header. I'm still not seeing that on your page. You have to add this to your css.

#maincontent {
clear: both;
}

This will fix your gap at the top.

For your buttons, you have a width set on your li's which isn't enough for the amount of text you have in some of your buttons. So the text is wrapping to another line because there isn't enough room.

Do you want them all to be the same width and the shorter text will just have extra space to the right?

Or do you want it more like your weebly page where they're all different widths based on how long the text is?

Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points
Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points

The max-height: 35px (defined under #mainconten ul li) is causing the problems. remove it and the buttons wil not overlap.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Todd,

Your header is floated so your "maincontent" div which comes after the header should clear the float.

#maincontent {
clear: both;
}

Your navigation is actually running up to the top of the header and the top margin for your nav is what was producing the gap at the top.

As Geert-Jan Hendriks mentions you should also remove the max-height from the list items. In general, you don't want to restrict the height of elements that contain text. You do need some padding there though because your text is flowing outside of the rounded corners.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Geert-Jan and Jason,

Thanks so much for your thoughtful replies!

I have since taken your suggestions:

(1) I added the "clear:both" tag

(2) I also reduced the top margin of the nav tag to 0 (it was originally at 20px).

(3) I also added 5px worth of padding on all sides of the buttons

It seems that the problems I was initially having are solved, so thank you two so much!!

I only have just one follow-up question: The topmost button runs into the header which still seems to be separated from the top of the page and the buttons are different heights.

I would like the buttons to be of the same height and just one line of text each, like the buttons on my weebly page where most of this content is coming from: http://toddsquitieri.weebly.com/lesson-plans.html.

How do I make these buttons equal in height and take up just one line of text? And how can I get that top button out of the header?

Sorry for these follow up questions, but I am really working hard on this and am totally going to pay it forward once I become an amazing coder!!

Thanks so much again!

Sincerely,

Todd

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Jason!

Thanks so much for taking the time to respond in this thread. I much much appreciate this.

I followed exactly what you said and solved the problem! Thank you so much for that!

As far as the buttons are concerned, I would like them all to be the same width. Do you know how I would be able to do this? If it's not too much trouble, let me know! ^_^

Infinite thanks!

-Todd

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Todd,

You have a width set on your li's which isn't enough for the longest text that you have. I needed to bump it up to 380px for everything to fit on one line. You may want to go a little higher to have a little breathing room. Optionally, you can add text-align: center; so that the shorter text doesn't have so much space on the right side. It evens it out on both sides.

This is around line 229 in main.css

#maincontent ul li {
    background-color: #CED8F6;
    border-radius: 20px;
    clear: both;
    list-style: none outside none;
    margin: 5px 0;
    max-width: 380px;
    padding: 5px;
    text-align: center;
}
Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Wow, above and beyond, Jason. Thank you so much for answering my question in full and clarifying some of my major "hang-ups" with previous lessons.

I will definitely keep this information handy as I move forward with coding the rest of my website!

Many many thanks!

Sincerely,

Todd

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome and good luck with your site!