I got 2 lists with different class but they dont work independent, both lists are unordered, class "menu" list is : list-style-type: none; which is fine as it is my nav bar, but my second list which is "habilidades" doesnt show the little dots to the left, the only one that changed is the font family on my "Habilidades" class but I cant make the dots to appear
PS: Im starting to learn
.menu {
display: flex;
list-style-type: none;
justify-content: space-around;
width: 50%;
text-align: center;
align-items: center;
margin-left: auto;
height: 20%;
margin-top: 20px;
}
.menu li a {
color: black;
text-decoration: none;
font-size: 20px;
}
.habilidades li {
font-family: cursive;
list-style-type: disc;
}
<nav>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<section>
<ul class="habilidades">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
Related
I'm new to coding and trying to figure out why my nav li's will not display horizontally? I've tried a few things which I've noted in the code below.
The catch here is, I must use floats instead of flexbox.
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
I have tried changing the specificity to a class or id and that hasn't fixed anything. I should also note that 'text-decoration' is not working for the li but is working for the a 'courses'? * border: box-sizing is also at the top of the css sheet.
This is what it looks like on the browser
I am very new to coding and this one has had me stumped for hours. T
First of all, spacings between attributes in html files have no effect at all on the browser display, and same for spacing in css files.
The second thing, I'm not sure why you don't want to use flex (it's handy here - you set the display of the parent attribute (ul) to display: flex; flex-direction: row; and it will do the trick).
But if you don't want to use it, there are 2 other tricks:
#1
ul {
display: contents; /* this will make the parent act like it doesn't exist - and then do whatever you want with the children*/
}
li {
display: inline-block;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
#2 grid
ul {
display: grid;
grid-template-columns: max-content max-content max-content; /*instaed of max-content, you can assign the width you want for each li*/
}
li {
margin : 5px;
list-style: none;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
You can use flexbox to arrange them either column or row. Declaring display: flex; should apply what you're trying to do. See the snippet below:
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
#SideBar{
display: flex;
gap: 5px;
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
More on flexbox here.
Use this on css.....
#SideBar{
display: flex;
}
header nav>* {
float: left;
/*width: 7%;*/
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li{
width: 100px;
float: right;
/*display: block;*/
text-decoration: none;
margin-left: 2px;
display: inline;
}
<header>
<nav>
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
The problem
is you have used width: 7%; to header nav>*
Weird one
its weird that you have used display: block; along with display: inline;
Solution
I have commented the The problem and Weird one,run the snippet it should work
for now i have generated the menu in this way:
nav{
width:1024px;
margin: 0 auto;
}
ul{
display: flex;
justify-content: space-between;
}
li {
border-right: 1.1px solid #333333;
margin: 0 auto;
padding: 0 1em;
text-align: center;
flex-grow: 1;
flex-basis: initial;
text-align: center;
}
the html is:
<nav id="menu">
<ul>
<li>Home</li>
<li>Training & Support</li>
<li>Templates & Forms</li>
<li>Policy Documents</li>
<li>Payment Administration</li>
<li>Tax Compliance</li>
<li>News</li>
</ul>
</nav>
The result is:
But i want that the first and last child are aligned at the start and at the end of the ul container like in the image below
How can i do this?
Have you tried removing text-align: centre; ???Or in li try something like padding-right: 0;Tell me how it works out.
Still learning css...
I've just got one major issue..
My nav-bar is currently squished. I'm not sure how to space out the text away from each other to go wider, so it takes up more space.
I have tried using the following (got it from similar post as mine):
justify-content: space-between
but that didn't work.
Lastly, (just a random trick Id like to learn )if you know how to do it..
How would I separate the two sides from the logo to be pushed away to left and right? As an example..
All content from the left side of the logo, is showing from the edge of the left screen and vice versa for the right side. But the logo remains in the middle. And all text remains horizontal.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>
In order to use justify-content, you need to set display: flex on the parent element first. I'd also suggest not to use justify-content: space-between but justify-content: space-around while resetting the default left padding of the <ul> to get even spacing. Alternatively, set the right padding to an equal value while using justify-content: space-between.
In order to have the logo take up more space and the menu items to be "pushed" to the sides, just set the logo's <li> to something like 50% width, flex layout will take care of the rest. I added a class "logo" to the element in order to achieve that.
Update: About keeping the menu items centered horizontally, you can achieve that by using align-items: center on the flex container.
Update2: I've also added in an example pushing the items as far to the sides as possible by setting the logo width to 100% and a margin of 10px between the elements, as well as a 15px padding to the menu bar itself.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav ul {
display: flex;
justify-content: space-around;
padding: 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav2 .logo {
width: 50%;
}
.nav3 {
padding: 15px;
}
.nav3 .logo {
width: 100%;
}
.nav3 li {
margin-left: 10px;
}
.nav3 li:first-child {
margin-left: 0px;
}
.nav4 ul {
align-items: center;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the menu items aside:</p>
<div class="nav nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the items as far aside as possible, with a fixed-width spacing:</p>
<div class="nav nav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Nav items centered horizontally:</p>
<div class="nav nav4">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
In this case .nav ul has been set as a flex-container with display:flex;
Rather than using space-around, I have added a class to the logo and set the flex property to 1 (flex: 1). This pushes the left/right nav items apart and the logo expands to take up the remaining space.
.nav li items has been given a bit of padding so they aren't squished together.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px;
}
.nav ul {
display:flex;
align-items:center;
margin:0;
padding:0;
}
.nav li{
list-style: none;
display: inline-block;
padding:0 10px;
}
.logo {
flex:1;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class='logo'><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</ul>
</div>
I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right.
Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Thank you.
I found out that it is caused by the container class.
You can either remove the container or change float: right to display: inline-block
Don't use float:right instead use display:inline
why inline? inline - basically it starts with new line and occupy the whole parent size
I also combine both header_nav1 and header_nav2 on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}