I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!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>My Website</title>
<link rel="stylesheet" href="nav.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!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>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</body>
</html>
Related
I am having a bit problem aligning the content in the container to match all the other items in the container, and what else should I do to optimise my css code , I am a beginner to CSS and I was just practicing this project from frontendmentor , I'll be grateful if you could help me with this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="styles.css" />
<title>Frontend Mentor | Profile card component</title>
</head>
<body>
<div class="container">
<div class="top-content"><img src="images/bg-pattern-card.svg" /></div>
<div class="middle-content">
<img src="images/image-victor.jpg" alt="" />
<h3 class="name">
Victor Crest<span> </span><span class="age">26</span>
</h3>
<p class="location">London</p>
</div>
<hr />
<div class="bottom-content">
<ul class="numbers">
<li>80K</li>
<li>803K</li>
<li>1.4K</li>
</ul>
<ul class="description-numbers">
<li>Followers</li>
<li>Likes</li>
<li>Photos</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.google.com/specimen/Kumbh+Sans);
:root{
--Dark-cyan: hsl(185, 75%, 39%);
--Very-dark-desaturated-blue: hsl(229, 23%, 23%);
--Dark-grayish-blue: hsl(227, 10%, 46%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg) ;
background-color: var(--Dark-cyan);
background-repeat: no-repeat;
background-position: -90% -500px,175% 400px;
font-family: "Kumbh Sans",sans-serif;
color:var(--Dark-grayish-blue);
font-size:18px;
}
.container{
background-color: #fff;
height:45%;
width:30%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:10rem auto;
border-radius: 12px;
position: relative;
}
.top-content,.bottom-content{
width: 100%;
}
.top-content{
width: 100%;
height:33%;
}
.top-content img{
width: 100%;
}
.middle-content img{
border-radius: 50%;
border:6px solid #fff;
position: absolute;
top:30%;
left:37%;
}
h3{
margin-top:70%;
color:#000;
}
.age{
color:var(--Dark-grayish-blue);
padding-left: 0.5em;
}
p.location{
position:relative;
left:35px;
padding:1.25rem 0;
}
ul{
display: flex;
justify-content: space-around;
padding-top:1rem;
}
ul.numbers li{
font-weight:700;
color: #000;
}
ul.description-numbers li{
padding-bottom:1rem;
font-size: 15px;
letter-spacing: 0.1em;
}
ul li{
list-style: none;
}
hr{
height:1px;
opacity: 0.5;
width: 100%;
background-color: var(--Dark-grayish-blue);
}
TRY THIS OUT AND LET ME KNOW
Add a center class to your top container.
<div class="container center">
Add this CSS code to your stylesheet
.center {
margin: auto;
width: 50%;
}
I would change the html a little bit for that.
<ul class="bottom-content">
<li>
<span>80K</span>
<span>Followers</span>
</li>
<li>
<span>803K</span>
<span>Likes</span>
</li>
<li>
<span>1.4K</span>>
<span>Photos</span>
</li>
</ul>
And the css
.bottom-content {
display: flex;
justify-content: space-around;
}
.bottom-content > li {
display: flex;
flex-direction: column;
align-items: center;
}
I'm creating landing page and I want to separate navbar, text that should be in the middle of wallpaper and text that should at the bottom.
Here is the sandbox:
https://codesandbox.io/s/long-worker-dy31zt?file=/index.html
As you can see, justify-content: space-between is not doing anything on Y axis even-though I made sure it is flex-direction: column. What is the best way to center text in the middle of the background on the landing page? I wanted to do it with flex but it's not working.
You need to use this:
.header-wrap {
height: 100vh;
}
Only after that the .header-wrap will take all the space vertically and your big title and mini title will be placed in the middle of the page.
Here you can check that:
https://codesandbox.io/s/elated-clarke-rkwrj9?file=/styles.css
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: 100vh;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
width: 50vw;
display: flex;
justify-content: space-between;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
space-between isn't doing anything because it doesn't know how much space is there with no defined height. Set the height of the header-wrap to 100vh and it'll work.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
/* ===============
header styles
===============
*/
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
display: flex;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>
I am beginner and learning css.I have two questions.
I want to display text below icon box but it's coming right side of
each icon. what mistake am i doing?
I am using display flex,alignItem center, justify content in 3
classes(body ,wrapper, item). Looks like i'm repeating code. Can you suggest good practice?
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
.item:hover {
background-color: #F0F1F7;
transform: scale(1.3);
}
.icon {
padding: 10px;
border-radius: 50%;
background-color: rgb(105, 204, 211);
color: white;
}
.text{
padding-top:10px;
display: inline-flex;
vertical-align: middle;
}
<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>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="item">
<i class="icon material-icons">directions_bike</i>
<small class="text">Bicycle</small>
</div>
<div class="item">
<i class="icon material-icons">backup</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">email</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">airplanemode_active</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">insert_chart</i>
<small></small>
</div>
</div>
</body>
</html>
I would suggest adding flex-direction: column; to your .item class.
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
Here's a codepen: https://codepen.io/josh_minkler/pen/wvvZYeM
CSS tricks has a great guide to flexbox here
Complete newb here. Third question here.
How do I make the text "A Web Developer"
Come under "Hey I'm Hyde"
and how do I control the space between "A Web Developer" and "Hey I'm Hyde"?
I tried to use a line break but there has to be a better way. Line breaks did not work well.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
#big {
font-size: 65px;
display: inline-block;
color: gainsboro;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
<h1 id="big">
Hey I'm Hyde
</h1><br><br><br>
<br>A Web Developer</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
Link to Fiddle:
https://jsfiddle.net/so2w7rkp/
I wish to gain the ability to put the text "A web developer" underneath "Hey I'm hyde" for future flexbox projects.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#welcome-section p:nth-child(1) {
font-size: 30px;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
Hey I'm Hyde
</p>
<p>
A Web Developer
</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
flex-direction: column;
<section id="welcome-section">
<h1 id="big">
Hey I'm Hyde
</h1>
<small>A Web Developer</small>
</section>
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}