This is the Home page Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam minus eveniet recusandae dicta similique numquam voluptas quos tempore cupiditate pariatur, laudantium fugit alias quia veritatis nesciunt quaerat molestias adipisci assumenda.
Yo bro it seems like u know about this. Can u help me with something ? I did everything like in the video but my Navigation Bar is not going horizontally. So picture it like that. It is vertically and the elements still take up the entire lenght of the browser as if they were div elements. How do I solve this bc I literally made everything exactly like in the video ...
Hi Bro Codez, Your tutorials is awesome. Please clarify my doubt, Some of the using Flexbox and Grid to align the navbar button but you didn't use that so please explain which is correct.
How do I center the navigation br in the center of my webpage, it wants to all shift to the side but I want it to be about 100 pixels long and center with h1
Yeah Bro I really learn so much from your Videos. I have another Version instead of the float: left you can change the display to inline-block for the (a) and (li): And i also change the margin and padding so the ul is in the center( no is not in the center when i change the size of the screen where the index.html is opened. How to center the horizontal navigation bar? Maybe with flexbox but the topic comes later. style.css /* No Margin for the Navigation Bar */ body { margin: 0px; } /* The content after the Nav Bar should have a margin */ main { margin-left: 20px; margin-right: 20px; } /* Header of the Website */ h1 { text-align: center; } /* The ul content inside the navbar */ .navbar ul { list-style-type: none; /* Remove the bullet Points in front */ background-color: hsl(0, 0%, 25%); padding: 0px; /* Size inside the ul bar. */ padding-left: 70px; /* to center */ margin: 0px; overflow: hidden; /* Keeps content in the navbar ul */ } .navbar a { color: white; text-decoration: none; /* remove the underline */ padding: 15px; /* Space between each a Element */ display: inline-block; /* Changed from block to inline-block */ text-align: center; } .navbar a:hover { background-color: hsl(0, 0%, 10%); } .navbar li { display: inline-block; /* Changed from float to inline-block */ }
Thank you Bro Code. I practised this tutorial and observed that when i floated the navigation bars RIGHT the navigation bars were not arranged in sequence as described in the script. I had no problem when i floated LEFT. How can i correct this?
maybe instead of using the float and overflow properties like he did, try using display:inline on the li elements and using text-align:right on the ul. but i cant test rn so dont know if it works edit: worked for me
thank you for this! i am battling constructing a website for my web development course and i am struggling pretty badly. Now i need to fight ad figure out how to create the other sections of my site and link them to the main page...Any tips?
Damn I envy those who can speak English :( Please add Indonesian subtitles 🙏, especially lessons about the 24-hour,12-hour,or 8-hour Java course, Java script, PHP, and others.😅
Your video is really great and I want to learn it but I have problems with the English it uses, especially the programming language lessons I want to learn.😅
When you use float: left; on the elements, the parent no longer recognizes the height of its floated children, because floats are taken out of the document flow. As a result, the collapses, and the background color of the disappears, making it look white (or transparent). When you add overflow: hidden; to the .ul1, it forces the parent to recognize the height of its floated children again. This works as a kind of hack to "clear" the floats without needing to manually add a clearfix. Here's why it works: overflow: hidden; makes the container expand to enclose its floated children, solving the collapsing issue without needing to apply the more explicit clearfix methods. Why the overflow: hidden; works: Without it: Floated elements are removed from the normal flow of the document. The container doesn't stretch to wrap around its floated children, causing it to "collapse" in terms of height. With it: The overflow: hidden; forces the container to calculate its dimensions based on the floated elements inside it, so it correctly stretches to enclose its content.
Bro Code
Bro Code
Home
About
Products
Contact
This is the Home page
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam minus eveniet recusandae dicta similique numquam voluptas quos tempore cupiditate pariatur, laudantium fugit alias quia veritatis nesciunt quaerat molestias adipisci assumenda.
/* style.css */
body{
margin: 0px;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
}
.navbar ul{
list-style-type: none;
background-color: hsl(0, 0%, 25%);
padding: 0px;
margin: 0px;
overflow: hidden;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
.navbar li{
float: left;
}
How to I copy the code
It's better to use display flex than float.
i like it
Thank you 🎉
Brotha, where is the CSS file?! I really need it for my new project 😢😅
for anyone trying to make this responsive:
body{
margin: 0px;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
}
.navbar{
background-color: hsl(0, 0%, 25%);
}
.navbar ul{
list-style: none;
padding: 0px;
margin: 0px;
display: inline-flex;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
this uses flexbox and added .navbar{} so the background color stretches across the webpage
You're a lifesaver. Thanks!
Yo bro it seems like u know about this. Can u help me with something ? I did everything like in the video but my Navigation Bar is not going horizontally. So picture it like that. It is vertically and the elements still take up the entire lenght of the browser as if they were div elements. How do I solve this bc I literally made everything exactly like in the video ...
You've got the best step-by-step videos. Thanks for all your work and sharing.
This guy is too good with his explanations
It’s straight to the point and easy to understand definitely one of the best
bro cooked and I ate
💯 Every vid
Yum
I Also Eat but I learn the recipe as well
ZANKS ZQADDDYIE
😂😂
Awesome tutorial, thanks!
Straight to the point. Thank you!
You are a gentleman and a scholar. Thanks
Very good person
Thank you for explaining while showing us how to do it. This makes it easier to understand. You are the best❤❤
Oh man already the third video I watch from you today. You really cover it all, thanks bro!
I want to do options and in inside the options do another option, how can I do it??
@@GirlActober I found the video "The Only CSS Layout Guide You'll Ever Need " by EdRoh very helpful on how to do layouts
IVE BEEN LOOKING FOR THIS SO MUCH. Im so glad l found you bro
Hi! Senior high school student here! You dropped this king 👑 🗿
Great explanation. You made that look easy, I just have to make a couple of these to get it down so I don't forget.
You are the best Bro. Stay blessed 🙌
Finally! A working code! thank you very much for this @Bro Code you save me from failling
Bro code is elusively elegant as ever
Make a video on how to put "LOGO" and adjust its height and width using "CSS" with according to our needs?
Exactly same problem i was facing😂
@@Pankajweb996 just use img
Hi Bro Codez, Your tutorials is awesome. Please clarify my doubt, Some of the using Flexbox and Grid to align the navbar button but you didn't use that so please explain
which is correct.
I believe you want to use flex box to make it more responsive
wow great work you've done❤
i subscribed your channel.
just the thing i needed thanks for sharing this content👍
it is important to use main (can we use a div instead of main for main content
)
Thanks so much. I've been searching for sooo long to find out how to do this.
Best teacher 🧑🏫
Amazing work
Very helpful video
I don't understand why you added "overflow:hidden" to the CSS file? What is its purpose in this navbar?
so it doesn't show a scroll bar on the nav bar
you should be my coding teacher keep it up
the tutorial is simple and straightforward. thank youuuuuu❤❤❤
It helped me a lot. Thank you very much. Let's take a follow-up lecture. Lee Jong-hoon from the coast
Nice Video
BRO YOU'RE AMAZING, HELPING ME SO MUCHHHH, THANK YOUUUU
How do I center the navigation br in the center of my webpage, it wants to all shift to the side but I want it to be about 100 pixels long and center with h1
Best teacher.... 👌
Helpful video. Thank you
amazing
Thank you for the content
very kind blogger
Thanks man you're our a real bro 💪
Interesting
Nice bro
best coder
great
Yeah Bro I really learn so much from your Videos. I have another Version instead of the float: left you can change the display to inline-block for the (a) and (li):
And i also change the margin and padding so the ul is in the center( no is not in the center when i change the size of the screen where the index.html is opened. How to center the horizontal navigation bar? Maybe with flexbox but the topic comes later.
style.css
/* No Margin for the Navigation Bar */
body {
margin: 0px;
}
/* The content after the Nav Bar should have a margin */
main {
margin-left: 20px;
margin-right: 20px;
}
/* Header of the Website */
h1 {
text-align: center;
}
/* The ul content inside the navbar */
.navbar ul {
list-style-type: none; /* Remove the bullet Points in front */
background-color: hsl(0, 0%, 25%);
padding: 0px; /* Size inside the ul bar. */
padding-left: 70px; /* to center */
margin: 0px;
overflow: hidden; /* Keeps content in the navbar ul */
}
.navbar a {
color: white;
text-decoration: none; /* remove the underline */
padding: 15px; /* Space between each a Element */
display: inline-block; /* Changed from block to inline-block */
text-align: center;
}
.navbar a:hover {
background-color: hsl(0, 0%, 10%);
}
.navbar li {
display: inline-block; /* Changed from float to inline-block */
}
Bro your crazy man I like you thanks for help ❤️❤️
Thank you Bro Code. I practised this tutorial and observed that when i floated the navigation bars RIGHT the navigation bars were not arranged in sequence as described in the script. I had no problem when i floated LEFT. How can i correct this?
maybe instead of using the float and overflow properties like he did, try using display:inline on the li elements and using text-align:right on the ul. but i cant test rn so dont know if it works
edit: worked for me
This is what i need!! Thank you so much bro i will subscribe you
it is Good
THANKS I NEEDED THIS SO MUCH FOR SCHOOL PROJECT🎉🎉🎉🎉🎉
Epic bro
May god bless you ! Thank you save my life seriously
100/10 great video!
Very good,I love him
Can you make a proper responsive website. It will be easy to add in my projects.😉
Bro explained it way more precise
good
amazing brooo thumbs up for bro code share
Appreciate this, thank you
thank you for this! i am battling constructing a website for my web development course and i am struggling pretty badly. Now i need to fight ad figure out how to create the other sections of my site and link them to the main page...Any tips?
Thank you sir ❤
Bro had to earn my subscription and he did it
why did u use "overflow:hidden" can u explain that part
like what did u hide exactly?
I want an answer to this as well. He did not explain at all.
it prevents horizontal scrolling
@@devd3 thanks I also needed that
@@devd3 But why does setting the property float:left make it disappear? I don't get it
Yes exactly @@pholcastaneda3699
Thanks bro!
How can I center the nav bar ? the only way i was able to get was creating a div section.
thumbs .. nailed it ! lol
Bro code ❌
Pro code ✅🤩🥵
thanks sir
you are legend - thanks
I've got a question, how did you add style.css to the new tab? Thank you.
Thank you!!!!!!
extra challenge: style nav with flexbox
Thanks you
Bro really cooked
Thank you!!!
Which text editor you have installed?
add transition: background-color ease 1s;
and see the result 👍
Damn I envy those who can speak English :(
Please add Indonesian subtitles 🙏, especially lessons about the 24-hour,12-hour,or 8-hour Java course, Java script, PHP, and others.😅
Your video is really great and I want to learn it but I have problems with the English it uses, especially the programming language lessons I want to learn.😅
Aowkaowkoakw pake translate ke bahasa Indonesia aja bang
When we are outting "padding" its turning red, not blue
Bro can you explain the "overflow: hidden" part? How did that fix the problem there?
So it doesn't show a scroll bar on the nav bar.
When you use float: left; on the elements, the parent no longer recognizes the height of its floated children, because floats are taken out of the document flow. As a result, the collapses, and the background color of the disappears, making it look white (or transparent).
When you add overflow: hidden; to the .ul1, it forces the parent to recognize the height of its floated children again. This works as a kind of hack to "clear" the floats without needing to manually add a clearfix.
Here's why it works:
overflow: hidden; makes the container expand to enclose its floated children, solving the collapsing issue without needing to apply the more explicit clearfix methods.
Why the overflow: hidden; works:
Without it: Floated elements are removed from the normal flow of the document. The container doesn't stretch to wrap around its floated children, causing it to "collapse" in terms of height.
With it: The overflow: hidden; forces the container to calculate its dimensions based on the floated elements inside it, so it correctly stretches to enclose its content.
I want to do options and in inside the options do another option, how can I do it??
Thx bro
instead of using colors for navigation bar can i use images?
By flex box this is very easy
how i turn it in button and make it work ?
yo what website editor u using
Is it Responsive bro?
Nope
You can do it with the flex-box
❤
Just make a container display flex
It's easy
Why did float:left and overflow: hidden make the nav bar horizontal? 4:05
I also have the same doubt someone clear it
What have I done wrong because my display:block and text align center is not working
👍
great, Thanks bro
question
what is padding
what is margin ?
padding: is the space between the block content and it's border;
Margin: is the space between the block itself and the borders of the page;
@@Irin_yigir thanks
Why dont you just use display flex ??
Please what extension do you use
Sir Please am looking for how to creat contact form email, text using nave element instead of div element ?
ty
The second a copy the html page the codes stoped working
does anyone elses nav bar stop working when they put it in a ordered list? I don't know how to get it to work
If I want to float right why does my words reverse
My styled nav bar isn’t showing up on my second page the links are there it just isn’t styled like the home page, any thoughts?
@@bqadrat thanks a bunch man I appreciate your comment but I already passed the class so I’m set 😂