You try it: Can you style the menu items to make them solid gold? 🏅 Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your choices. How to Fork a CodePen In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
🥇🥇🥇 You did great! You could move the blue background color to the a style if you wanted, but it's fine where it is. You set a width on the LI style, which is OK, but if you want the links to be as large as the words, you could say display: inline-block instead, and that would give you a link as wide as the words. Finally, if you add
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
that would turn off the bullets. Great work and thanks for sharing! 😁
Ok, so I am actually struggling with this exercise. I can get the entire button to highlight on hover with no issue.
However, I cannot get the entire <a> link to be as large as the button itself to have 100% of the button be clickable.
In the past, I've always struggled with block vs. inline vs. inline-block. I feel like this exercise will help me finally clear that hurdle, if I can understand what I'm not doing correctly.
Love it! Thanks so much for asking. So -- we have a <li> with an <a> inside of it. We need for that <a> to be as big as the <li>, right?
That means the <a> needs to display: block -- you've got that. That should stretch it to the edges of its containing element, the <li>, except...
Your <li> has padding on it! That means the <a> is filling the entire <li>, except where there is padding.
Move the padding to the <a> element instead, and you'll solve that problem.
As for diagnosing these issues -- stick a border on it!!! border: 1px solid red is your best friend. Put it around your <a> and another around your <li> and it's much easier to diagnose problems you encounter.
I actually did that, at one point, which is when I REALLY started getting confused....
But it turns out that I just now realized that there is some padding-bottom going on towards the bottom of the CSS file and I was taking my mouse cursor and testing the :hover by hovering on the BOTTOM of the button..............haha.
Great first attempt -- try moving that padding to the A style instead of the LI. Right now, you have your A changing color, but due to the padding on the LI, the A can't fill the entire purple area.
Thank you Jen, but I want to be honest here, and get some help. I added the block elements at the bottom of the hover, because I just couldn't figure out why I wasn't able to get that section at the bottom when hovered over to turn gold, like it was supposed to. I am having the same struggle on yesterday's challenge. I would love assistance here. Thank you in advance.
This is causing the purple area on hover. After that, you have the orange border.
Get rid of the padding and the orange border, and you'll have a perfectly filled gold hover state. Does that help some? Do you understand why that's the problem?
I appreciate you, I see it now. With the ( ul li ) in that line, it was affecting the bottom portion of the block. I did take it out of the code and had it make the full block gold. But, I did put it back the way I turned it in, because I did like the design aspect of my happy accident.
🎉🎉🎉 Super fun! Love your layered borders to make that interesting design element at the bottom of each link. Looks great and works well -- nicely done! Thanks for sharing 😁
🎉🎉🎉 WOO HOO! William, you continue to impress. Love the animated transition from square to circle. Your code looks great and works well - thanks for sharing as always! And yes, "display: block" on the "a" element is indeed the best way to go with the rollover.
Also, as I was experimenting that I came across this `display: list-item;` which I was not sure how it behaves but it seems like it adds those list bullets on the left if you put it just enough margin, no idea, correct me if I'm wrong but they seem to not be pushing the list items, i.e, not occupying any space.
Excellent, well done! The clickable target works well. One suggestion for your styling - move these from <li> to <a>:
border-radius: 10px;
background: darkslateblue;
Right now, when I roll my mouse over the link, the background color turns yellow, but the corners are pointed rather than round. If you put the dark blue background and the rounded corners on <a>, the button appearance will be the same, but the rounded corners will carry through to the hover state.
Close! When I hover over the edge of your buttons, I get the gold background, but I can't click on the link. Can you find a way to make the whole button the clickable target?
You did! I think it feels strange because you have padding and margin on the LI and you have padding/margin on the A. You also have a:hover AND li:hover. If you put your padding/margin on one element and have one hover state, that might clean up some of these declarations, notably the negative margin. You're making good progress - thanks for sharing!
https://codepen.io/keoverto/pen/VwzbMMX
🥇🥇🥇 Fabulous job! Looks great and works well 😁
This is my result, struggled a bit with this https://codepen.io/kells60/pen/KKvMBxP?editors=1100
🥇🥇🥇 You did great! You could move the blue background color to the a style if you wanted, but it's fine where it is. You set a width on the LI style, which is OK, but if you want the links to be as large as the words, you could say display: inline-block instead, and that would give you a link as wide as the words. Finally, if you add
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
that would turn off the bullets. Great work and thanks for sharing! 😁
https://codepen.io/cgrumler/pen/yLXjjjK?editors=1100
Ok, so I am actually struggling with this exercise. I can get the entire button to highlight on hover with no issue.
However, I cannot get the entire <a> link to be as large as the button itself to have 100% of the button be clickable.
In the past, I've always struggled with block vs. inline vs. inline-block. I feel like this exercise will help me finally clear that hurdle, if I can understand what I'm not doing correctly.
Love it! Thanks so much for asking. So -- we have a <li> with an <a> inside of it. We need for that <a> to be as big as the <li>, right?
That means the <a> needs to display: block -- you've got that. That should stretch it to the edges of its containing element, the <li>, except...
Your <li> has padding on it! That means the <a> is filling the entire <li>, except where there is padding.
Move the padding to the <a> element instead, and you'll solve that problem.
As for diagnosing these issues -- stick a border on it!!! border: 1px solid red is your best friend. Put it around your <a> and another around your <li> and it's much easier to diagnose problems you encounter.
Let me know if that helps?
I actually did that, at one point, which is when I REALLY started getting confused....
But it turns out that I just now realized that there is some padding-bottom going on towards the bottom of the CSS file and I was taking my mouse cursor and testing the :hover by hovering on the BOTTOM of the button..............haha.
Did not quite achieve centering the text vertically but did get all the buttons the same size:
https://codepen.io/kldickenson/pen/WNOzeme
Take out the width on the LI and they'll all be reasonable buttons, even if they're not the same size. Looks good! 🎉🎉🎉
I tried but could not make the entire box turn gold: https://codepen.io/ednaq/pen/qBjxMWz?editors=1100
Great first attempt -- try moving that padding to the A style instead of the LI. Right now, you have your A changing color, but due to the padding on the LI, the A can't fill the entire purple area.
Thank Jen for the tip! I moved the padding and also removed the bottom padding on the UL LI. It is working now. :-)
https://codepen.io/ednaq/pen/mdwXGeE?editors=1100
🎉🎉🎉 WOO HOO! Looks great and works well! 😁
Thanks for your guidance
😁🙏🏾
https://codepen.io/Shamar3/pen/wvepJzm?editors=1100
Thank you Jen, but I want to be honest here, and get some help. I added the block elements at the bottom of the hover, because I just couldn't figure out why I wasn't able to get that section at the bottom when hovered over to turn gold, like it was supposed to. I am having the same struggle on yesterday's challenge. I would love assistance here. Thank you in advance.
On line 48 in your CSS you have this:
ol li, ul li {
padding-bottom: 0.5em;
}
This is causing the purple area on hover. After that, you have the orange border.
Get rid of the padding and the orange border, and you'll have a perfectly filled gold hover state. Does that help some? Do you understand why that's the problem?
I appreciate you, I see it now. With the ( ul li ) in that line, it was affecting the bottom portion of the block. I did take it out of the code and had it make the full block gold. But, I did put it back the way I turned it in, because I did like the design aspect of my happy accident.
Again, Thank you!!
And now you can make those "happy accidents" anytime you want! 😁
🎉🎉🎉 Super fun! Love your layered borders to make that interesting design element at the bottom of each link. Looks great and works well -- nicely done! Thanks for sharing 😁
https://codepen.io/w0whitaker/pen/GREyxeN?editors=0100
🎉🎉🎉 WOO HOO! William, you continue to impress. Love the animated transition from square to circle. Your code looks great and works well - thanks for sharing as always! And yes, "display: block" on the "a" element is indeed the best way to go with the rollover.
https://codepen.io/miklaan/pen/JjJMJNx
Got it! :D
🎉🎉🎉 Woo woo! Looks great and works well 😁 Thanks for sharing!
I can't get it. I think I tried every combination of padding, margin on both li and a and still can't get rid of some purple.
https://codepen.io/romola/pen/YzQEdzN?editors=1100
OK -- see if today (Day 4) helps -- I talk a lot about where to place styles. If you still have problems, I'll give you some hints. 😁
https://codepen.io/yousifhmada/pen/rNwYdMZ?editors=1100
Had to turn them to inline-block elements to display (pun intended) nice, is that how it's done ?
In this case, it's one possible answer. Today's post talked about using display: block instead. But either will work in this case! 🎉🎉🎉
Also, as I was experimenting that I came across this `display: list-item;` which I was not sure how it behaves but it seems like it adds those list bullets on the left if you put it just enough margin, no idea, correct me if I'm wrong but they seem to not be pushing the list items, i.e, not occupying any space.
Yup! MDN has the details: https://developer.mozilla.org/en-US/docs/Web/CSS/display#list_item
https://codepen.io/maeyler/pen/MWoOvYd
I had to comment out "padding-bottom: 0.5em;" within <li> tag
Excellent, well done! The clickable target works well. One suggestion for your styling - move these from <li> to <a>:
border-radius: 10px;
background: darkslateblue;
Right now, when I roll my mouse over the link, the background color turns yellow, but the corners are pointed rather than round. If you put the dark blue background and the rounded corners on <a>, the button appearance will be the same, but the rounded corners will carry through to the hover state.
Thank you so much for sharing!
You are right, it is such a simple fix!
The nice part of your challenges is the simplicity:
Every line of CSS that we add has a meaning.
No more copy-paste of 100 obscure lines...
Yay! Thank you - I am so pleased you find this helpful. 💖
Close! When I hover over the edge of your buttons, I get the gold background, but I can't click on the link. Can you find a way to make the whole button the clickable target?
You did! I think it feels strange because you have padding and margin on the LI and you have padding/margin on the A. You also have a:hover AND li:hover. If you put your padding/margin on one element and have one hover state, that might clean up some of these declarations, notably the negative margin. You're making good progress - thanks for sharing!