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

Posted by Bilal Daya
Bilal Daya
2,027 Points

Front-End Web: the logo for the sample website we built is clickable beyond the range of the text, how to prevent that?

In the website we built for the course: How to make a Website, we can observe that the heading "Nick Pettit" is clickable beyond the text range, meaning, if you move the pointer away from the words to the right, you can still click them and go back to the portfolio homepage (index.html). Is there any way to fix that? I tried decreasing the width and playing with the margins but no luck.

4 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

I didn't watch the course you mentioned, but I think it has something to do with block-level vs inline elements. Headings like H1, H2 etc. are block-level elements which take up the total width of their parent container. Your logo / heading is probably nested in an anchor tag, for example:

<a href="#"><h1>myLogo</h1></a>

The H1 element takes up all the available width. By putting a CSS rule on the anchor tag : display: inline-block, you can overrule the default behavior.

Bilal Daya
Bilal Daya
2,027 Points

Erwin Meesters : Thank you for your answer. Yes, both headings h1 and h2 are nested inside the same anchor: 

 <a href="index.html" id="logo">  
   <!-we set an anchor to the two headings below refirectingto main page -->
  <h1>Example Name</h1> 
   <!-- heading1-->
  <h2>Example Profession</h2>
   <!-- heading2-->
 </a>

I tried adding the rule you mentioned to the logo in CSS but it did not change anything:

logo {inline-block;}

I also tried doing it inline only but nothing changed.

Do you have other suggestions? Thank you.

ralphp
ralphp
1,247 Points
ralphp
ralphp
1,247 Points

To clarify what Erwin said, "Headings like H1, H2 etc. are block-level elements," you'd need to change the display value of H1 and H2 to inline or inline-block; not that of the class logo.

Also, note that the syntax is "display: inline" or "display:inline-block"

Bilal Daya
Bilal Daya
2,027 Points

same result.

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Have you tried:

#logo {
  display: inline-block;
}

You will need the # sign in front of logo to target the id.

Bilal Daya
Bilal Daya
2,027 Points

of course I had the # sign in front of the code, same result.

Bilal Daya
Bilal Daya
2,027 Points
Bilal Daya
Bilal Daya
2,027 Points

Found it, I separated the h1 and h2 which were nested in the same anchor and removed the width attribute completely. Thank you to everyone who answered.