I am having troouble centering my nav bar to the middle of my page. I have not done any css as of yet.
HTML
<div class = "menu-wrap">
<nav class = "navMenu">
<ul class = "ulMenu">
<li>Home</li>
<li>
Products<span class="arrow">▼</span>
<ul>
<li>#</li>
<li>#</li>
</ul>
</li>
<li>Contact Us</li>
<li>About </li>
</ul>
</nav>
You need to add some CSS to specify the class properties, which will define the properties of the elements you have defined as members of those classes.
Something like this
#menu-wrap {
width:750px;
margin:0 auto;
list-style:none;
}
You can refer to this tutorial
Add align= "center"
<div class = "menu-wrap" align="center">
So in order to align layout elements. You'll want to use CSS. Hopefully this will get you started:
When making a horizontal nav element, we usually use the float or display:inline properties to force the individual links on one line. To center the whole nav element you could give it a width as I've done here, which allows us to set its margin to auto which horizontally centers the whole div.
nav ul li{
list-style:none;
float:left;
margin:5px;
}
nav{
height:50px;
display:table;
background:#eee;
margin:auto;
}
<div class = "menu-wrap">
<nav class = "navMenu">
<ul class = "ulMenu">
<li>Home</li>
<li>
Products<span class="arrow">▼</span>
<ul>
<li>#</li>
<li>#</li>
</ul>
</li>
<li>Contact Us</li>
<li>About </li>
</ul>
</nav>
Still, it looks horrible. With a little more CSS styles, you can turn this menu into something great.
.ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
.li {
background-color: white;
padding: 0.5rem;
margin: 0.5rem;
-webkit-align-self: center;
align-self: center;
}
a .li:hover {
color: #000000;
background-color: lightgreen;
cursor: pointer;
}
<div class = "menu-wrap">
<div class="ul">
<a><div class="li">Home</div></a>
<a><div class="li">Products</div></a>
<a><div class="li">Contact Us</div></a>
<a><div class="li">About</div></a>
</div>
</div>
Related
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
</style>
<body>
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
community! I'm doing basic training on WebDev and ran into a problem with inline positioning.
I created a footer with H3 and nav (ul>li*2). I want H3 to be positioned on the left and li anywhere, but on the same line as H3, in principle (haven't questioned the position relative to the center of the page yet).
Solved the problem through display: inline;, but for each element, but could not find a more elegant solution and without duplication
.class footer {
display: inline;
}
.class h3 {
display: inline;
}
and so on.
Please help me find a competent and elegant solution. Thank you!
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
Try to use flex in order to set the position of elements
footer {display: flex;}
More info here
As said #KristiK, flex is a good way.
But you have a wrong.
.footermenu nav doesn't have sense in your code. It points to nav elements inside .footermenu. So these are appropriate selectors for styling to nav in your code:
nav or .footermenu or nav.footermenu.
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
}
ul {
margin-top: 20px;
display: flex;
}
a {
padding-left: 20px;
}
</style>
<body>
<footer class="footer" style="display: flex">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul style="list-style: none;">
<li>ABOUT US</li>
<li>MORE ABOUT</li>
</ul>
</nav>
</footer>
</body>
I want to make the links side to side in the header. I need help with the CSS part.
<body>
<nav>
<div class="wrapper">
<umg src="spaceship.png" alt="blogs logo">
<ul>
<li>Home</li>
<li>About us</li>
<li>Find Blogs</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
</nav>
That is my HTML code
Try this code
nav .wrapper{
display: flex;
justify-content: space-between;
}
nav ul{
display: flex;
}
Maybe something like this??
.wrapper {
display:flex;
flex-direction:row;
justify-content:space-evenly;
width:100%;
height:40px;
background-color:black;
padding-top:10px;
}
.wrapper > a{
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline
}
<body>
<nav>
<div class="wrapper">
<img src="spaceship.png" alt="blogs logo">
Home
About us
Find Blogs
Sign up
Login
</div>
</nav>
It should contain http
For example
href="https://classroom.udacity.com/nanodegrees/nd004-1mac-v2/dashboard/overview"
I have <ul> element which is a flex items. This <ul> element contains several <li> elements which are not flex items.
When I add percentage paddings to <li> elements then <ul> element is split in several lines like in the photo:
When I set fixed paddings (like 30px) the <ul> element is displayed in one line:
So, my question is: Why percentage paddings make <ul> behave this way?
P.S: I don't need solutions to fix it, I just need an explanation of the behaviour
li {
display: inline-block;
padding: 0 5%;
/* padding: 0 30px; */
border: 1px solid black;
}
header {
display: flex;
}
ul {
border:1px solid red;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
As I explained in a previous similar situation there is a kind of complex calculation involved here. Padding used with percentage value will be relative to the width of the containing blockref and logically the width of the containing block will be defined by its content (or any fixed width value).
In our case, we cannot resolve percentage value of padding before calculating the width, so we first caclulate the width based on our content to obtain this:
console.log(document.querySelector('ul').offsetWidth);
li {
display: inline-block;
border: 1px solid black;
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:0;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
Then we will consider the above calculated width in order to calculate the padding
After that, the padding will logically be added to the width which will increase the overall width and create the line break. The browser won't go back to re-caclulate the width of the ul again because we will have a cycle, so the calculation is done only once.
console.log(document.querySelector('ul.pad').offsetWidth);
li {
display: inline-block;
border: 1px solid black;
}
.pad li {
padding:0 0.5%; /*any small value will create the issue*/
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:5px;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
<header>
<ul class="pad">
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
We can clearly notice how in both case the width of the ul is exactly the same.
This won't happen with pixel values because they are absolute values that the browser can include in the initial calculation.
li {
display: inline-block;
border: 1px solid black;
}
.pad li{
padding:0 30px;
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:0;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
<header>
<ul class="pad">
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
I have a list of href links that I want to center.
<div id="top-nav">
<ul>
<style>
ul li,
ul li a {
color:black;
font-size:20px;
}
</style>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
So far I've tried
<li style="text-align:center;>Discord Server</li style="text-align:center;>
and
<li><a style="text-align:center;href="Discordserver.html">Discord Server</a style="text-align:center;></li>`
Neither of these worked
Since there are three, is there a way of centering one of the lists and having one on the left and one on the right of the centered one?
Try writing the attached code, it will surely work. And if it doesn't let me know in the comments I will try my best to help you. I have added margin-left: 50%; corrected a bit of CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
color:black;
font-size:20px;
margin-left: 50%;
}
</style>
</head>
<body>
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>`
</body>
</html>
You can try
I think it will help
.top-nav , ul {
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
It's unclear what exactly you're trying to achieve based on the question, but try this:
ul {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
margin: 0 20px;
}
<div id="top-nav">
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li >Discord Server</li>
</ul>
</div>
I also want to note something else since you've said you're new to lists and maybe HTML – you don't need to apply inline styles to both the opening and closing tags, just the opening tags.
Incorrect:
<li style="text-align:center;>Discord Server</li style="text-align:center;>
Correct:
<li style="text-align:center;>Discord Server</li>
This won't actually cause any issues, but it's not valid HTML.
I have <ul> element which is a flex items. This <ul> element contains several <li> elements which are not flex items.
When I add percentage paddings to <li> elements then <ul> element is split in several lines like in the photo:
When I set fixed paddings (like 30px) the <ul> element is displayed in one line:
So, my question is: Why percentage paddings make <ul> behave this way?
P.S: I don't need solutions to fix it, I just need an explanation of the behaviour
li {
display: inline-block;
padding: 0 5%;
/* padding: 0 30px; */
border: 1px solid black;
}
header {
display: flex;
}
ul {
border:1px solid red;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
As I explained in a previous similar situation there is a kind of complex calculation involved here. Padding used with percentage value will be relative to the width of the containing blockref and logically the width of the containing block will be defined by its content (or any fixed width value).
In our case, we cannot resolve percentage value of padding before calculating the width, so we first caclulate the width based on our content to obtain this:
console.log(document.querySelector('ul').offsetWidth);
li {
display: inline-block;
border: 1px solid black;
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:0;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
Then we will consider the above calculated width in order to calculate the padding
After that, the padding will logically be added to the width which will increase the overall width and create the line break. The browser won't go back to re-caclulate the width of the ul again because we will have a cycle, so the calculation is done only once.
console.log(document.querySelector('ul.pad').offsetWidth);
li {
display: inline-block;
border: 1px solid black;
}
.pad li {
padding:0 0.5%; /*any small value will create the issue*/
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:5px;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
<header>
<ul class="pad">
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
We can clearly notice how in both case the width of the ul is exactly the same.
This won't happen with pixel values because they are absolute values that the browser can include in the initial calculation.
li {
display: inline-block;
border: 1px solid black;
}
.pad li{
padding:0 30px;
}
header {
display: flex;
}
ul {
border:1px solid red;
margin:0;
padding:0;
}
<header>
<ul>
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>
<header>
<ul class="pad">
<li>Library</li>
<li>Telegram channel</li>
<li>Contacts</li>
<li>Donate</li>
</ul>
</header>