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 ...
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
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.
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
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 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?
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.
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.😅
![Eminem - Fuel (feat. JID) [Official Lyric Video]](http://i.ytimg.com/vi/t5H_CewqpKA/mqdefault.jpg)
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
😂😂
Straight to the point. Thank you!
You are a gentleman and a scholar. Thanks
Very good person
Awesome tutorial, thanks!
IVE BEEN LOOKING FOR THIS SO MUCH. Im so glad l found you bro
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
Finally! A working code! thank you very much for this @Bro Code you save me from failling
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.
Thanks so much. I've been searching for sooo long to find out how to do this.
Bro code is elusively elegant as ever
it is important to use main (can we use a div instead of main for main content
)
You are the best Bro. Stay blessed 🙌
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
BRO YOU'RE AMAZING, HELPING ME SO MUCHHHH, THANK YOUUUU
just the thing i needed thanks for sharing this content👍
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
Hi! Senior high school student here! You dropped this king 👑 🗿
the tutorial is simple and straightforward. thank youuuuuu❤❤❤
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
May god bless you ! Thank you save my life seriously
Best teacher 🧑🏫
Thanks man you're our a real bro 💪
you should be my coding teacher keep it up
wow great work you've done❤
i subscribed your channel.
Very helpful video
very kind blogger
Bro your crazy man I like you thanks for help ❤️❤️
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
Helpful video. Thank you
It helped me a lot. Thank you very much. Let's take a follow-up lecture. Lee Jong-hoon from the coast
Amazing work
How can I center the nav bar ? the only way i was able to get was creating a div section.
Very good,I love him
Thank you for the content
Best teacher.... 👌
THANKS I NEEDED THIS SO MUCH FOR SCHOOL PROJECT🎉🎉🎉🎉🎉
best coder
100/10 great video!
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
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 */
}
This is what i need!! Thank you so much bro i will subscribe you
Appreciate this, thank you
amazing
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?
Interesting
great
I've got a question, how did you add style.css to the new tab? Thank you.
Thank you sir ❤
Nice Video
Bro explained it way more precise
amazing brooo thumbs up for bro code share
Can you make a proper responsive website. It will be easy to add in my projects.😉
Epic bro
thanks sir
it is Good
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
good
Bro had to earn my subscription and he did it
Thanks bro!
extra challenge: style nav with flexbox
I want to do options and in inside the options do another option, how can I do it??
What have I done wrong because my display:block and text align center is not working
Nice bro
Thank you!!!!!!
you are legend - thanks
Which text editor you have installed?
thumbs .. nailed it ! lol
instead of using colors for navigation bar can i use images?
Thanks you
how i turn it in button and make it work ?
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.
Why did float:left and overflow: hidden make the nav bar horizontal? 4:05
I also have the same doubt someone clear it
Please what extension do you use
Why dont you just use display flex ??
Bro code ❌
Pro code ✅🤩🥵
Thank you!!!
Just make a container display flex
It's easy
Sir Please am looking for how to creat contact form email, text using nave element instead of div element ?
I'm getting hover effect on logo how do i get rid of it help mee please ,🙋♀️
If I want to float right why does my words reverse
great, Thanks bro
yo what website editor u using
The second a copy the html page the codes stoped working
Thx bro
By flex box this is very easy
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
Bro really cooked
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
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
add transition: background-color ease 1s;
and see the result 👍
❤
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 😂
Why mine isn't working😭😭
Bro chill ofc it doesn't because it's the nature of codding if it works is abnormal
ty