This question already has an answer here:
Why does percentage padding break my flex item?
(1 answer)
Closed 2 years ago.
I am developing a website and in the heading, there are quite a few list items. The problem is that I want the last list item to end where the parent div ends.
I want my the last item of this ul list "Emergency" to end with the end of the nav width. It is always overflowing.
Here is my code:
header {
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
top: -8px;
}
p {
white-space: nowrap;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
}
nav ul li {
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How do I fit the entire list within the nav width?
Just use this code.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
width: 100%;
height: 15%;
background-color: #ab9a31;
}
div.container {
width: 75%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
p {
white-space: nowrap;
width: auto;
}
nav {
display: flex;
width: auto;
}
nav ul {
list-style-type: none;
display: flex;
border: rgba(255, 255, 255, 0.5) solid 2px;
padding: 0;
box-sizing: border-box;
}
nav ul li {
display: table;
white-space: nowrap;
padding: 0 2%;
}
nav ul li a {
font-size: 0.9em;
color: black;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<meta name="viewport" content="width=device-width initial-width=1.0">
<link src="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<p>Find info for?</p>
<nav>
<ul>
<li>Apply</li>
<li>News</li>
<li>President</li>
<li>Shop</li>
<li>Visit</li>
<li>Give</li>
<li>Emergency</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Related
I am new to HTM/CSS and was trying to create a navigation bar on in header, using flex and when hover it should animate underline from bottom left to right.
But I am not able to get it to be placed in center and having spaces around each item.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
CSS code:
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
currently I am getting something like this:
| About Experience Works Hobbies |
enter image description here
I want output to be like: (having space around)
About Experience Works Hobbies
Thank you in advance!
To apply space-around you need to set display: flex; As you can see your a elements that make up the navbar are inside the ul, which in turn is inside the nav class. So what you have to do is set display: flex; to the direct relative of the elements you want to apply it to, in this case ul.
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav ul {
display: flex;
justify-content: space-around;
align-items:center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo
i'm learning to build from scratch a website so i can learn properly how to build a nice website however i start with the navbar but its not responsive even using flexbox , would you like to appoint me to the right direction , i'm using media query however i didnt get it right
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 10vh;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
flex-wrap: wrap
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
The main thing here - you want to make sure and set flex-direction: row for desktop. I also set the height of nav to auto and the width to 100vw, mostly for the purposes of the code demo. For some reason the code demo doesn't look correct in the preview window, but appears correctly in full screen.
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
width: 100vw;
height: auto;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
Make you styles 'mobile first'
html, body, nav {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
}
ul, li, a{
color: #000;
list-style-type: none;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
color: white;
}
.row {
display: block;
}
#media all and (min-width: 500px) {
.row {
display: flex;
}
.col {
flex: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav class="row">
<ul class="col logo">
<li> brand</li>
</ul>
<ul class="col first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="col second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
for the style you don't need to use a media query you can build all your menu using flexbox,i can propose this code for CSS and use your same HTML file
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
width: 100%;
background-color: aqua;
flex-wrap: wrap;
justify-content: space-between;
}
li {
list-style-type: none;
padding: 20px 25px
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: auto
}
.first li a {
display: block;
color: #000;
text-decoration: none;
}
nav ul li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>