This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 11 months ago.
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
</body>
</html>
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
vertical-align: middle;
}
navr{
vertical-align: middle;
}
why is the vertical align property not working? I want the content to be displayed vertically in middle of the nav bar, but it is displayed at vertically top of the nav bar. I am a beginner trying to learn Web development . first code is the html part while second is the css stylesheet part
The margin: 0vw; in your CSS *{ } is what is creating the issue. If you add margin: auto; to the navl and navr CSS you will be set. See Fiddle here
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
vertical-align: middle;
margin: auto;
}
navr{
vertical-align: middle;
margin: auto;
}
Because you are using a flex container, then you should align your elements on it as:
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
align-items: center; /*align items in a flex container*/
width: 100vw;
height: 45px;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
/*vertical-align: middle;*/
}
/*navr{
vertical-align: middle;
}*/
<!DOCTYPE html>
<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>Document</title>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
</body>
</html>
for further reference https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Related
I'm trying to make this page: page
But the header and the section part overlap. I can get it down by adding padding-top: 75px but I'm not sure if that's correct. What is the right thing to do to fix this?
And in the navbar in the example, the space between the list items is more than mine, but I gave the same padding. What is the problem?
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #eee;
}
html,body{
font-family: sans-serif;
height: 100%;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
position: fixed;
min-height: 75px;;
padding: 0 20px;
}
.logo{
width: 60vw;
}
.logo > img{
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;;
}
nav > ul{
width: 35vw;
display: flex;
justify-content: space-around;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="" class="header-img">
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>How It Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Hadcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" placeholder="Enter your email...">
<input type="submit" id="submit">
</form>
</section>
</body>
</html>
Always use fix for inner div not the outer div
As you have given position fixed to navbar, just give it :
Position:absolute;
And make innner div in it then give this div position relative
Position:fixed;
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
(3 answers)
Closed 8 months ago.
This is simple HTML CSS script , just designing one page , i want to put bottom class at the bottom of container class. I tried giving height to container class but still sticky property not working.
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Varela+Round&display=swap');
body {
background-color: antiquewhite;
}
* {
margin: 0;
padding: 0;
}
nav {
font-family: 'Ubuntu', sans-serif;
}
nav ul {
display: flex;
list-style-type: none;
height: 65px;
background-color: black;
color: white;
align-items: center;
}
.brand img {
width: 44px;
padding: 0 8px;
}
.brand {
display: flex;
align-items: center;
font-weight: bold;
font-size: 1.3rem;
}
nav li {
padding: 0 12px;
}
.container {
min-height: 100vh;
border: 5px solid red;
position: relative;
}
.bottom {
border: 2px solid green;
position: sticky;
height: 130px;
background-color: black;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
#myProgressBar {
width: 80vw;
}
<!DOCTYPE html>
<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>Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="logo.png" alt="Spotify"><span>Spotify</span></li>
<li>Home </li>
<li>about</li>
<li> </li>
</ul>
</nav>
<div class="container">
<h1>Best of NCS - No Copyright Sounds</h1>
<div class="songList"></div>
<div class="songBanner"></div>
<div class="bottom">
<input type="range" name="range" id="myProgressBar" min="0" max="100">
<div class="icons">
<!--fontawesome Icons-->
<i class="fa-solid fa-play"></i>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/f6f6daec14.js" crossorigin="anonymous"></script>
</body>
</html>
The position: sticky does not do what you think it does. It will make the element stick to the header when you scroll down.
You can use either flexbox or grid to make the element stick to the bottom.
For example, have a look here:
flexbox: https://dev.to/nehalahmadkhan/how-to-make-footer-stick-to-bottom-of-web-page-3i14
grid: Footer at bottom with css grid? Can't figure it out?
Just be aware, that on some older phones the 100vh may be an issue - due to the extra header-spacing that is not calculated.
position sticky does not work on IE11, if you have to support that.
I am beginner to Front end technology. I AM not sure which part of my code making my logo image showing in circle. Kindly point me what css property making it occuring so. I am new to css and coudnt figure out which property is responsible for this. I have already tested with align items and padding values but nothing is working to change the image oval shape. I want my image to be in square shape or in another shape. If anyone have any idea please point in direction of how you guys resolve this kind of solution.
HTML file:
<!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="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<header>
<div class="logo">
<img src="logo.png" alt="">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close"> </ion-icon>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">About Us</li>
<li class="nav_item">Training</li>
<li class="nav_item">Train with us</li>
<li class="nav_item">Contact Us</li>
</ul>
</nav>
<ion-icon name="menu-outline" class="header_toggle"></ion-icon>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS file:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,600;1,500;1,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
ul{
list-style: none;
}
header{
display: flex;
background-color: #222831;
justify-content: space-between;
padding: 1rem 0;
align-items: center;
}
.logo{
display: flexbox;
align-items: center;
}
.logo img{
width: 200px;
border-radius: 100%;
margin-right: 10px;
}
.header_logo{
color: #eeee;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav_link {
padding: 10px;
color: #eeee;
font-size: 0.9rem;
font-weight: 500;
border-radius: 5px;
}
it's because of;
border-radius: 100%;
When you make the border-radius 100% thinner, it turns into a circle.
Remove border-radius: 100%; from your CSS.
.logo img{
width: 200px;
margin-right: 10px;
}
.logo img{
width: 200px;
border-radius: 100%;
margin-right: 10px;
}
You have a problem with this set of code - the border-radius part. In the future, if you'd like to see which class/line causes the error, you can inspect the element and under styles you'll get all the classes that are attached to the element itself. In your browser, you can check/uncheck classes and see which one does the problem.
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
*{
margin: 0;
padding: 0;
}
.navBar{
display: flex;
background-color: blueviolet;
}
.leftNav{
display: flex;
width: 70%;
background-color: yellow;
}
.leftNav img{
height: 30px;
width: 30px;
border-color: white;
border-width: 2px;
border-radius: 50%;
padding: 5px;
}
.leftNav li{
list-style: none;
padding: 10px;
}
.leftNav li a{
text-decoration: none;
}
.rightNav{
display: flex;
align-items:center;
justify-content: right;
text-align: right;
width: 30%;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/style.css">
<title>iEducate, The world of education is here</title>
</head>
<body>
<nav class="navBar">
<div class="leftNav">
<img src="IMG/img.jpg" alt="Logo">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>
I am new to HTML and CSS. I am creating a navigation bar where I have taken width of navigation bar to 100% and there are two div section left nav and right nav in it with width 70% and 30% of navigation bar respectively. I want to put the items of right nav to right side but it is appearing at left. align item to right did not have any impact.
Dear friends, I have added image of screen shot and html and css file links with this mail. Anyone having idea, what I am doing wrong, then please help me here. I will be highly grateful to you.
Thanks,
Jitendra
You have given the wrong value to justify-content, you have given justify-content: right; which is not right in rightNav class.
just change that property only: Make it
justify-content: flex-end;
and its done
the right values for this property are:
flex-start : Default value. Items are positioned at the beginning of the container
flex-end : Items are positioned at the end of the container
center : Items are positioned in the center of the container
space-between : Items will have space between them
space-around : Items will have space before, between, and after them
space-evenly : Items will have equal space around them
initial : Sets this property to its default value. Read about initial
inherit : Inherits this property from its parent element.
This one is the great link to learn it...
https://css-tricks.com/almanac/properties/j/justify-content/
you can check MDN as well: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
.rightNav{
display: flex;
align-items:center;
justify-content: flex-end;
width: 30%;
}
Just change value of justify-content property to flex-end, for the rightNav class.
* {
margin: 0;
padding: 0;
}
.navBar {
display: flex;
background-color: blueviolet;
}
.leftNav {
display: flex;
width: 70%;
background-color: yellow;
}
.leftNav img {
height: 30px;
width: 30px;
border-color: white;
border-width: 2px;
border-radius: 50%;
padding: 5px;
}
.leftNav li {
list-style: none;
padding: 10px;
}
.leftNav li a {
text-decoration: none;
}
.rightNav {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
width: 30%;
}
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/style.css">
<title>iEducate, The world of education is here</title>
</head>
<body>
<nav class="navBar">
<div class="leftNav">
<img src="IMG/img.jpg" alt="Logo">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>
You want to remove display: flex from your right nav I think it work for you.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to create a nav bar and i don't know why i am facing this problem :
Trying to set the li within the ul as inline-block works, but it is moving the whole list below the image i am using as a logo.
Can someone explain why is this happening and how to fix it?
https://codepen.io/rou-teodor/pen/QWNrVNZ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
img {
display: inline-block;
width: 100%;
height: auto;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 150px;
position: center;
display: inline-block;
}
#nav-bar {
background-color: yellow;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav-bar li {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
<ul>
<li class="nav-link">acasa</li>
<li class="nav-link">despre</li>
<li class="nav-link">produse</li>
<li class="nav-link">cumpara</li>
</ul>
</nav>
<img src="cover.jpeg" alt="" id="header-img" />
<p></p>
</header>
<section class="products">
<div class="product1"></div>
<div class="product2"></div>
<div class="product3"></div>
</section>
<div class="form">
<!-- Formular cumparare -->
</div>
</body>
</html>
The navbar isn't below the logo, it's just on the same line. The reason for the way it looks is that the logo image is quite high (select it in the browser tools to see that)
To have the navbar vertically centered to the logo, you can add display: flex; and align-items: center; to the CSS rule for #nav-bar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
img {
display: inline-block;
width: 100%;
height: auto;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 150px;
position: center;
display: inline-block;
}
#nav-bar {
background-color: yellow;
display: flex;
align-items: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav-bar li {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
<ul>
<li class="nav-link">acasa</li>
<li class="nav-link">despre</li>
<li class="nav-link">produse</li>
<li class="nav-link">cumpara</li>
</ul>
</nav>
<img src="cover.jpeg" alt="" id="header-img" />
<p></p>
</header>
<section class="products">
<div class="product1"></div>
<div class="product2"></div>
<div class="product3"></div>
</section>
<div class="form">
<!-- Formular cumparare -->
</div>
</body>
</html>
Add display: flex;align-items: center; to align vertically center the navbar :)
#nav-bar {
background-color: yellow;
display: flex;
align-items: center;
}