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;
}
Related
I don't know why but my image changes its size when I zoom in or out on my window (chrome). Does anyone know why? This is my code: The css for the image is "myphotointro". Its at the very end of the css and html.
This normal size
This is zoomed out
If anyone knows what to do It would be greatly appreciated
<!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="gethomeworkdone.css">
</head>
<body>
<div class="navabr1">
<nav>
<div class="head__logo">
<div class="logo">
<a class="linklogo" href="http://www.google.com">VovaSite</a>
</div>
</div>
<div class="barsection">
<div class="nav-wrapper">
<ul class="nav">
<li class="nav-home">
Home
</li>
<li class="nav-about">
About
</li>
<li class="nav-articles">
Homeworkdone
</li>
<li class="nav-articles">
articles
</li>
<li class="nav-articles">
articles
</li>
<li class="nav-articles">
articles
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="backroundcolourthing-gethomeworkdone">
<div class="sectionintro">
<div class="sectionleft">
<h1 class="introphrase1"> Need a break from Homework? </h1>
<p class="introphrase2"> Got tired of all-nighters? Let others do it for you ! </p>
</div>
<div>
<a style="text-decoration:none" href="homeworkexchange.html" class="butten">Yourhomeworkdone</a>
</div>
<div class="sectionphotoright">
<img class="myphotointro" alt="Pacific" src="imgintro.jpg" >
</div>
</div>
</body>
</html>
and css:
nav {
display: flex; /* 1 */
justify-content: space-between; /* 2 */
padding: 1rem 2rem; /* 3 */
background: rgb(247, 251, 255);;/* 4 */
}
nav ul {
display: flex; /* 5 */
list-style: none; /* 6 */
margin: auto;
}
nav li {
padding-left: 3rem; /* 7! */
margin: 3%;
margin-left: 20px;
}
nav a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
font-family: sans-serif light ;
}
.barsection {
margin-right: right;
}
.linklogo {
color: rgb(0, 0, 0);
font-size: 25px;
display: flex; /* 1 */
justify-content: space-between; /* 2 */
padding: 1rem 2rem; /* 3 */
}
#backroundcolourthing-gethomeworkdone {
background-color:rgb(247, 251, 255);;
padding: 10px ;
border: 0px solid green ;
width: auto;
height: 320px;
margin: 0;
}
.sectionleft {
position: relative;
left: -280px;
top: 50px;
}
.introphrase1 {
font-family: optima;
font-size: 40px;
color: rgba(0, 0, 0, 0.895);
text-align: center;
}
.introphrase2 {
font-family: optima;
font-size: 23px;
color: rgba(0, 0, 0, 0.895);
text-align: center;
}
.myphotointro {
display: flex;
flex-direction: column;
margin: -8em auto;
margin-left: 60em;
max-width: 1140px;
width: 20%;
}
.butten {
position: absolute;
top: 34%;
left: 30%;
background-color:#618fecac;
color: rgba(0, 0, 0, 0.726);
border:none;
border-radius:20px;
padding:15px;
position: absolute;
}
I tried a lot but I don't know
It is bcz you set up width in percentage. If you do not want to change it with zoom in/out, you need to use px unit. Also max-width is relative bcz, if you change resulotion, it will change width of image.
.myphotointro {
display: flex;
flex-direction: column;
margin: -8em auto;
margin-left: 60em;
max-width: 1140px;
width: 20%;
}
The problem is that the image's absolute size stays the same no matter the zoom level, and that is because you have specified a width in percentage. Change this to a px or em value that looks approximately the same at the default zoom level.
The layout is still broken when zooming out though, and that is because your image has a left margin in an em size. For a quick fix, I recommend using a percentage value here instead, maybe something like margin-left: 60%;.
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.
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
this is how my page looks:
How do i get rid of the red/html/body & centering?
Note
wanted outcome: Everything to fill page without any red visible
the same happens when the content-wrapper expands beyond 100vh
darkred is html
lightgray is header
gray is main
blue is content wrpper
gold is footer
:root {
font-size: 20px;
margin-top: var(--header-height);
margin-bottom: var(--footer-height);
--header-height: 10vh;
--footer-height: 3vh;
--footer-padding: 2vh;
--color-first: #42b797;
--color-text: #328b73;
--font-header: "Nunito", sans-serif;
--font-lobster: "Lobster", cursive;
--font-roboto: "Roboto", sans-serif;
/*
font-family: 'Lobster', cursive;
font-family: 'Roboto', sans-serif;
*/
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
/*Header*/
header {
width: 100%;
display: flex;
height: 10vh;
align-items: center;
background-color: #666;
}
.header-active {
color: var(--color-first);
}
.header-logo,
.header-list,
.header-authenticate {
padding: 1vh;
justify-content: space-evenly;
font-family: var(--font-header);
font-weight: 600;
}
header h1 {
flex: 1;
display: flex;
color: var(--color-first);
justify-content: center;
align-items: center;
}
.header-logo {
}
.header-list {
display: flex;
flex: 2;
}
.header-authenticate {
flex: 1;
display: flex;
}
/*END Header*/
/**/
.content-wrapper {
position: relative;
background-color: cornflowerblue;
min-height: 50vh;
}
main {
/* margin-top: var(--header-height); */
/* padding-bottom: calc(var(--footer-height) + var(--footer-padding) / 2); */
background-color: #333;
min-height: 10vh;
/* min-height: calc(200vh - (var(--header-height) + var(--footer-size))); */
position: relative;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.5rem;
background-color: darkgoldenrod;
padding: var(--footer-padding) 0;
height: var(--footer-height);
width: 100%;
position: absolute;
bottom: 0;
}
html {
background-color: darkred;
}
body {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!---->
<link rel="canonical" href="https://certificate.wiki" />
<link rel="stylesheet" href="assets/css/global.css" />
<link rel="stylesheet" href="assets/css/index.css" />
<link rel="stylesheet" href="assets/css/master.css" />
<link rel="stylesheet" href="assets/css/mobile.css" />
<link
href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght#300&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito&display=swap"
rel="stylesheet"
/>
<!---->
<meta
name="description"
content="Upload you certificates from udemy, linkedin or school and show them of to your employer, friends and family"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!---->
<title>Certificate</title>
</head>
<body>
<header>
<h1>Stianlife.com</h1>
<ul class="header-list">
<li>
Home
</li>
<li>
Certificate
</li>
<li>
About
</li>
<li>
Manage Profile
</li>
</ul>
<ul class="header-authenticate">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
</header>
<div class="content-wrapper">
<main>
<div class="background"></div>
</main>
<footer>
<p>© 2020 - Stian Håve - About</p>
<p>
this work is licenced under Creative Commons Attributions 4.0
International license
</p>
</footer>
</div>
</body>
</html>
Firstly your adding padding to --root thereby pushing your body away from the top and bottom
Remove this from the --root styles
margin-top: var(--header-height);
margin-bottom: var(--footer-height);
Also position:absolute is relative to the closest position:relative parent so your applying bottom:0 to your footer is positioning it to the bottom of the content-wrapper, you probably want to remove position:relative from content-wrapper and then bottom:0 will work the way you expect it.
Check out Positioning contexts here