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.
Related
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.
I want to align the logo on the left side and the nav links on the right side horizontally.
Mainly, I used display: flex on .nav-wrapper and used align-items: center. However, there still seems to be a bit of misalignment between the logo and the nav link elements which I cannot seem to figure out how to properly correct. Would really appreciate some help on this!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li>Log in</li>
<li>Sign up</li>
<li>Become a Teacher</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
I've created demo, Here Link: https://jsfiddle.net/590nartL/
Infact it really horizontally center, red border prove that.
Of couse, maybe you think font in red border box not vertical middle, you can add style as below:
.right-menu {
margin-top: -2px;
}
Any negative margin value as you want.
It happens because there is an unnecessary space between the <img> tag and the parent <a> tag.
The <img> is an inline element so this happened.
To remove the space, make <img> tag as block element as follows or implement vertical-align.
.logo {
display: block;
width: 80px;
height: 80px;
}
or make parent <a> as flex style
a {
display: flex;
flex-direction: column;
}
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;
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I'm practicing publishing of this site
How can I handle vertical alignment of div?
JSFIDDLE
.header {
background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) repeat scroll 0% 0%;
height: 668px;
}
.header__nav {
padding: 20px;
}
.header__nav__logo {
float: left;
}
.header__nav__logo {
padding: 6.5px 20px 6.5px 0;
display: inline-block;
margin-left: -20px;
}
.header__nav__logo img {
width: 150px;
height: 36px;
}
.header__nav__list {
overflow: hidden;
float: right;
margin-right: -20px;
}
.header__nav__list li {
float: left;
}
.header__nav__list li a {
padding: 20px;
display: inline-block;
color: white;
}
.header__nav__list__button {
background-color: #eb4336;
border-radius: 3px;
}
.header__main {
text-align: center;
color: white;
background-color: green;
}
.header__main__title {
font-size: 50px;
}
.header__main__intro {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.header__main__button {
background-color: #eb4336;
border-radius: 5px;
padding: 15px 50px;
font-size: 20px;
margin-top: 20px;
display: inline-block;
}
.header__main__signin {
margin-top: 10px;
}
.contents {
background-color: yellow;
}
.footer {
background-color: blue;
}
<!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="default.css">
<link rel="stylesheet" href="style.css">
<title>Project Management Software</title>
</head>
<body>
<header class="header">
<div class="l__wrapper">
<div class="header__nav clearfix">
<a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
<ul class="header__nav__list clearfix">
<li>Features</li>
<li>Pricing</li>
<li>Sign-in</li>
<li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
</ul>
</div>
<div class="header__main">
<h1 class="header__main__title">
Manage your projects, tasks & team to get things done faster!
</h1>
<p class="header__main__intro">
A simple tool for project management, invoicing & time tracking.
</p>
<a class="header__main__button" href="#">TRY IT FREE NOW!</a>
<p class="header__main__signin">
Already using Pareto.pm? <span>Sign in</span>
</p>
</div>
</div>
</header>
<section class="contents">
Contents
</section>
<footer class="footer">
Footer
</footer>
</body>
</html>
I wanna div of green space to align vertically in the blue background except nav bar. How can I handle this?? I searched solutions and tried lots of things, but I failed. Many solutions suggest display: table-cell for vertical alignment, but it didn't work.
.l__wrapper {
display: grid;
grid-template-columns: auto;
justify-content: center;
align-items: center;
grid-row-gap: 10px;
}
.header {
background: rgba(0, 0, 0, 0)
linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%)
repeat scroll 0% 0%;
height: 668px;
}
.header__nav {
padding: 20px;
}
.header__nav__logo {
float: left;
}
.header__nav__logo {
padding: 6.5px 20px 6.5px 0;
display: inline-block;
margin-left: -20px;
}
.header__nav__logo img {
width: 150px;
height: 36px;
}
.header__nav__list {
overflow: hidden;
float: right;
margin-right: -20px;
}
.header__nav__list li {
float: left;
list-style-type: none;
}
.header__nav__list li a {
padding: 20px;
display: inline-block;
color: white;
}
.header__nav__list__button {
background-color: #eb4336;
border-radius: 3px;
}
.header__main {
text-align: center;
color: white;
background-color: green;
}
.header__main__title {
font-size: 50px;
}
.header__main__intro {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.header__main__button {
background-color: #eb4336;
border-radius: 5px;
padding: 15px 50px;
font-size: 20px;
margin-top: 20px;
display: inline-block;
}
.header__main__signin {
margin-top: 10px;
}
.contents {
background-color: yellow;
}
.footer {
background-color: blue;
}
<!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="default.css">
<link rel="stylesheet" href="style.css">
<title>Project Management Software</title>
</head>
<body>
<header class="header">
<div class="l__wrapper">
<div class="header__nav clearfix">
<a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
<ul class="header__nav__list clearfix">
<li>Features</li>
<li>Pricing</li>
<li>Sign-in</li>
<li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
</ul>
</div>
<div class="header__main">
<h1 class="header__main__title">
Manage your projects, tasks & team
to get things done faster!
</h1>
<p class="header__main__intro">
A simple tool for project management, invoicing & time tracking.
</p>
<a class="header__main__button" href="#">TRY IT FREE NOW!</a>
<p class="header__main__signin">
Already using Pareto.pm? <span>Sign in</span>
</p>
</div>
</div>
</header>
<section class="contents">
Contents
</section>
<footer class="footer">
Footer
</footer>
</body>
</html>
Use display: grid to the parent class, and to align it vertically use align-content: center
For reference go through this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout