hello I am having issue while create this navbar...because i cant space divs exactly s i want. please suggest some oher way to figure this out.
and i have nothing to say more as i have included the image and code i have tried yet stackoverflow is asking me to add some more detail.
I am trying to create this navbar:
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
width: 90%;
margin: 0 auto;
background-color: white;
border-bottom: 1px solid black;
align-items:center;
justify-content:center;
flex-wrap: wrap;
}
.container .rightmenu{
flex-direction: row-reverse;
}
div:nth-of-type(1) {flex-grow: -1;}
div:nth-of-type(2) {flex-grow: 1;}
div:nth-of-type(3) {flex-grow: 15;}
div:nth-of-type(4) {flex-grow: 5;}
div:nth-of-type(5) {flex-grow: 1;}
.container li{
display: inline;
padding: 12px;
color: #6b6b6b;
font-weight: 400;
font-family: sans-serif-light;
font-size: 14px;
}
a{
text-decoration: none;
}
.img{
padding: 2px;
text-align: center;
}
.img img {
width:44px;
height: 44px;
<!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>jJio Nav Bar</title>
<link rel="stylesheet" type="text/css" href="style.css"
<body>
<div class="container">
<div class="imghome"> <img src="jio/home-white-icon.png" />
</div>
<div class="leftmenu">
<ul>
<li>PLANS</li>
<li>DEVICES</li>
<li>APPS</li>
<li>FIND A STORE</li>
</ul>
</div>
<div class="img"><img src="jio.png" /> </div>
<div class="rightmenu">
<ul>
<li>SUPPORT</li>
<li>SIGN IN</li>
<li>QUICK PAY</li>
<li>CART 0</li>
</ul>
</div>
<div class="imgsearch"><img src="jio/search-white-icon.png"/>
</div>
</div>
</body>
</html>
If you remove all the flex-grow properties and edit your img class in this way
.img {
padding: 2px;
text-align: center;
margin: 0 auto;
}
your page will look like the image you included.
Hope this helps you.
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 5 months ago.
I am trying to complete CSS exercises for flexbox from Odin Project. This is the self check:
Self Check
There is space between all items and the edge of the header (specific px amount doesn't matter here).
Logo is centered vertically and horizontally.
list-items are horizontal, and are centered vertically inside the header.
left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
Your solution does not use floats, inline-block, or absolute positioning.
However, there is extra space in the div of class left-links that doesn't make sense on why it is there in HTML or CSS code as I did not add any there myself.
It should look like this:
But this is what I got:
I've tried so many ways to get left-links pushed to the left to no avail.
.header {
font-family: monospace;
display: flex;
background: papayawhip;
justify-content: space-between;
padding: 9px 4.5px;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
display: flex;
justify-content: flex-start;
gap: 9px;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.left-links a {
align-items: left;
}
<!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>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
</ul>
</div>
</div>
</body>
</html>
ul has the default padding. If you want to get rid of it, you can reset that padding value like below
ul {
padding: 0;
}
.header {
font-family: monospace;
display: flex;
background: papayawhip;
justify-content: space-between;
padding: 9px 4.5px;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
display: flex;
justify-content: flex-start;
gap: 9px;
padding: 0; /*Removed the default padding*/
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.left-links a {
align-items: left;
}
<!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>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
</ul>
</div>
</div>
</body>
</html>
Add this rule:
.left-links > ul {
padding-left: 0;
}
It erases the default left-padding of the ul inside the .left-links container.
And add align-items: center; to the rule for .header, which vertically centers the elements in there:
.header {
font-family: monospace;
display: flex;
background: papayawhip;
justify-content: space-between;
padding: 9px 4.5px;
align-items: center;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
display: flex;
justify-content: flex-start;
gap: 9px;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.left-links a {
align-items: left;
}
.left-links > ul {
padding-left: 0;
}
<!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>Flex Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
</ul>
</div>
</div>
</body>
</html>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 months ago.
This post was edited and submitted for review 11 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I have a nav bar with height: 5vh and the rest of the page inside a container with height: 95vh. I use display: flex for my nav bar <ul> element and align-items: stretch so that the <li> elements have 100% height of the nav bar. Also I set the height of the <a> elements to 100% of the parent <li> elements.
However, the problem is that I want the text of the <a> elements to be vertically aligned to center (not top). I can't set a vertical padding for the <a> elements because this will affect the height of the element and will not make its height responsive.
Here is the full code:
<!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>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
height: 5vh;
display: flex;
align-items: stretch;
}
nav a {
display: inline-block;
padding: 0 10px;
height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
You can set <a> to flex and use align-items: center to align it vertically
<!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>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
height: 5vh;
display: flex;
align-items: stretch;
}
nav a {
display: flex;
align-items: center;
padding: 0 10px;
height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
Update
Fixed the navbar being too short in smaller windows:
nav ul {
min-height: 5vh;
...
Didn't see a style for <li> so I added it and looks vertically centered on fullpage, but the navbar shrinks drastically when window scales down (this behavior is before any modification).
li {
min-height: 100%;
display: inline-block;
align-self: space-around;
vertical-align: bottom;
}
<!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>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
min-height: 5vh;
display: flex;
align-items: stretch;
}
li {
min-height: 100%;
display: inline-block;
align-self: space-around;
vertical-align: bottom;
}
nav a {
display: inline-block;
padding: 0 10px;
min-height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
I am trying to use a single div to make a navbar with image and ul. There is a condition that I can't use flexbox or grid display. I am trying to make it from the basics that I learned till now.
Issues I am getting:
Image is getting aligned to the top. Why it is not coming on the base of its div?
Without making two divs, Can I align ul and image vertically at the center in a single div?
I know there will be much better ways to do this, but I want to get a basic understanding that what is actually happening.
Here is HTML Code:
<!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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://www.qousqazah.com/blog/wp-content/uploads/2018/01/features-of-a-business-logo.png"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
Here is the CSS Code:
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: inline-block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
And Here is JSFiddle
Change
.left img {
display: inline-block;
vertical-align: bottom; << instead of baseline
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
margin: 0; << added
}
and it works: fiddle
Note that with inline-block also spaces will be displayed. SO
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<<< this will create unwanted whitespace between the elements
<ul>
<li>HOME</li>
The image is aligned to the baseline. But the gap is due to the bottom margin of ul. So, remove the culprit from your code.
ul {
margin-bottom: 0;
}
you can do like this make image block and margin auto
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
margin: auto;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
<!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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
I've been learning code only for a couple of weeks, so I have a very basic knowledge.
I got stuck trying to build a navbar using flexbox.
For some reason I can't get my nav buttons () to stand in a horizontal way.
I've been trying and rewritting my code, but I can't figure it out.
Here's the link to my code: https://codepen.io/kokazp/pen/xxORovj?editors=1100
Thanks in advance.
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: lightGray;
}
navbar {
background: white;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
#header-img{
height: 70px;
width: 70px;
margin-right: auto;
margin-left: 10px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li, a{
background-color:white;
text-decoration: none;
padding: 8px;
color:black;
}
li a:hover{
background-color: black;
color: white;
}
<!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 href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#300&display=swap" rel="stylesheet">
<link rel=StyleSheet HREF="estilo.css">
</head>
<body>
<header id="header">
<navbar id="nav-bar">
<ul>
<li><img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2017/craft-brewery-logos/1.jpg" id="header-img" alt="Company logo"></li>
<li>Contact</li>
<li>Beers</li>
<li>Video</li>
</ul>
</navbar>
</header>
</body>
</html>
let's make it clear when you use a flex-box it applies to children not to grand children, when you apply display:flex to ur navbar it will make the ul a flex child, so li tags are not flex, secondly you're making it columns so it will make it in a vertical way.
solution: you can make the ul
ul{display:flex;}
and it will make the li go to row direction by default
I'm learning CSS3 and I practicing creating a navbar, that I want to do is to expand the width of input text to 50% into a navbar, I try to apply a class:
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
But it no works
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
display: inline-block;
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 50%;
margin: 0;
padding: 0;
}
.main-nav{
display: inline-block;
text-align: right;
width: calc(100% - 300px);
}
.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>
Why it does not work if my parent class has display:inline-block property as all my markups there? Regards
Basically, display: inline-block tries to fit all elements in one line. For that reason, your 50% seems very small. If you set it to 100% of the remaining space it is much bigger.
Nevertheless, I believe it is also a good idea to become familiar with flexbox. You can see I used flexbox to re-arrange your navbar.
Now, your elements are nicely spaced between each other. Each of them takes just enough space (you can still adjust the %). Additionally, you achieve a decent level of responsiveness out of the box with flexbox.
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
margin:0px;
}
#product-overview {
background-color: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title{
color: #2ddf5c;
}
#product-overview h1{
color:white;
font-family: 'Anton', sans-serif;
}
.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}
.main-header > div{
vertical-align: middle;
}
.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.main-nav__searchbar{
width: 100%;
margin: 0;
padding: 0;
}
.main-nav{
width: 50%;
text-align: right;
}
.main-nav__items{
display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a></div>
<div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
Packages
</li>
<li class="main-nav__item">
Customers
</li>
<li class="main-nav__item">
Start Hosting
</li>
</ul>
</nav>
</header>
</body>
</html>