Hello! So I’m trying to add padding to my nav element, but the padding isn’t quite working, the elements should be centered but they aren’t.
1 Like
Okay Lets’s See What Happens if we:
- Add a (margin: 10px;) in The CSS ‘div’
- Gets Your Code Output Within “LightBlue” color In The “LightCoral” Color BoX!
’
-
i) Add a br tag after The Starting nav element
ii) Try adding br tag after The Starting div element. (try without using br tag after
Starting nav tag)
(also try with nav element)
iii) Try As you See in the Picture
As I am Not able to put More that a Photo.
- As a Final Result and A Final Task
https://commons.wikimedia.org/wiki/File:Code-pen-Screenshot-3.jpg
As I am Not able to put More that a Photo.
2 Likes
2 Likes
HI! And I think who Questioned wants to know How to get Them At The Center.
So If it is my fault Then Forgive me and If I am right At least give me A THumbs up–
The thing to center is
for the nav:
- position: absolute; (or fixed)
- width: 100%;
for the li’s:
- display: inline-block;
and then i pull the right float back in with margin-right,
i think this can be solved far more elegant with css-flexbox.
greets
2 Likes
You are facing issue of how browser show Float elements.
When you apply float to an element, the element will be taken out of the parent element (in this case <ul>) hence the <ul> has height of 0px (use Dev Tools to see this)
Your
render with 60px height only because you have padding: 30px (top 30px and bottom 30px added up to 60px), remove the padding on div and you will see the lightblue disappear.
To allow parent element gain full height of child that is floated you will need to clear the float. Here is how you use clearfix.
In your case, you will need to add the clearfix css to the <ul> and you will see the <li> elements will be vertically centered. Total height of the lightblue bar are padding of div + li (content height).
2 Likes
SO Then The question Was About "creating a Menu " Wasn’t it?
A extra Pop-up
If you have completed first 92 Tasks Then You can Make The “menu” Bar With A very Different Way.
Try To reach There!!
Can’t Understand “Render” … ?
Render mean showing to the screen.
And Also Adding "clearfix Rules, I can’t See Any difference… (I just STarted 4 Days Ago)
Thanks! I really DId not know that Before. But Using “clearfix” I can’t See ANything TO be happened.
I have attached a screenshot hoping it clear up the solution. 
so you will have to add .clearfix class to the css. copy paste the code from this link
then on the html <ul>, add clearfix class. so it become <ul class="clearfix">
1 Like
And I do not need to Delete “float: right” and “float: left”
Correct, you don’t have to delete the floats.
The point of that clearfix is to fix the “bug” of floating elements. If you don’t use any float, you won’t need clearfix.
1 Like
As I have Thought Before. And I also Think That You have Too far Than me In Coding… So please Stay in Touch WIth Me.
Hi, thank you for the help! unfortunately I was trying to find a way to fix the inner content’s padding(which works by both ways below). Good luck for your journey!
1 Like
Hi! Thank you!, both the solutions(this and the other clearfix one) work perfectly, thanks for the help!
Hi! This works perfectly, thanks for the help!