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.
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.
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 am working on a navigation bar, and I am stuck because my code won't work as attended. When on mobile (760px) I want my nav-bar to show 3 div classes as an icon for the 'pop up' menubar. I just can't figure out why it won't show up.
The code, CSS:
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
Code, HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links"
<ul>
<li>
Home
<li>
<li>
About
<li>
<li>
Work
<li>
<li>
Our Project
<li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
If anyone, can see the problem, it would be great if you could tell me.
I found the problem with the code. And it a simple mistake, but one I did not think would matter, or can't see why it worked. So if anyone can explain why this solved the issue, that would be great. Anyway, I moved the 'div burger class' to before the 'nav-links' in my HTML code. I am not sure why this fixed the issue, but it did. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com" rel='Stylesheet'>
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Project
</li>
</nav>
<script src="app.js"></script>
</body>
</html>
I can't figure out why it would matter to move the code, but I did in an attempt to see if that was the reason, and it was. If you can explain to me why this is the answer, that would be great.
Use Bootstrap for designs like this first.There is an error at the top of the css code you wrote, fix it.
body, *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
It has to be like this
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;
}