I'm trying to learn how to use grid layout. I need to make my grid take the entire page, but for some reason, there is an extra space between the navigation bar (1st row) and the 2nd row. how do I get rid of the space so that the only space remaining between 1st and 2nd row is the grid-gap I specified.
screenshot
* {
margin: 0px;
padding: 0px;
}
#grid-layout {
display: grid;
grid-gap: 6px;
grid-column: 1fr 1fr 1fr 1fr;
grid-row: 60px auto auto auto 30px;
width: 100vw;
height: 100vh;
grid-template-areas: "nav nav nav nav" "top-post top-post post-2 post-3" "top-post top-post post-4 post-5" "newsletter newsletter newsletter newsletter" "ft ft ft ft";
}
.nav-bar {
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
.website-title {
width: 40%;
justify-content: flex-start;
}
.nav-bar-list {
display: flex;
flex-direction: row;
width: 60%;
justify-content: flex-start;
margin: 0px;
}
.nav-bar-item {
margin-right: 50px;
}
.main-post {
grid-area: top-post;
border: 1px solid red;
width: 100%;
height: 100%;
}
#post2 {
grid-area: post-2;
border: 1px solid red;
}
#post3 {
grid-area: post-3;
border: 1px solid red;
}
#post4 {
grid-area: post-4;
border: 1px solid red;
}
#post5 {
grid-area: post-5;
border: 1px solid red;
}
.newsletter {
grid-area: newsletter;
border: 1px solid red;
}
#footer {
grid-area: ft;
border: 1px solid red;
text-align: center;
align-items: center;
padding: 5px;
margin: 0px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="utf-8">
</head>
<body>
<div id="grid-layout">
<nav class="nav-bar">
<div class="website-title">Title</div>
<ul class="nav-bar-list">
<li class="nav-bar-item">Home</li>
<li class="nav-bar-item">Blog</li>
<li class="nav-bar-item">About</li>
</ul>
</nav>
<section class="main-post">
<div class="text-gradient">
<a href="#">
<h4>Main Post Here</h4>
</a>
<p>Main Post Summary here</p>
Read More
</div>
</section>
<section class="post" id="post2">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 2 Here</h4>
<p>Post 2 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post3">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 3 Here</h4>
<p>Post 3 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post4">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 4 Here</h4>
<p>Post 4 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post5">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 5 Here</h4>
<p>Post 5 subtitle</p>
</div>
</a>
</section>
<section class="newsletter">
<form action="#">
<h5>Subscribe to our Newsletter</h5>
<div class="newsletter-container">
<div class="newsletter-element">
<input type="text" placeholder="Name" name="name" required>
</div>
<div class="newsletter-element">
<input type="text" placeholder="Email address" name="mail" required>
</div>
<div class="newsletter-element">
<input type="submit" value="Subscribe">
</div>
</div>
<!-- newletter container -->
</form>
</section>
<footer id="footer">
<div>
<p>All Right Reserved</p>
</div>
</footer>
</div>
</body>
</html>
.nav-bar{
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
you have the padding:10px in your css code, the padding attribute puts some margin over were the .nav-bar tag is applied, you have to change it to padding:0px or remove it completely
I think the problem is about your "div" elements, ´´´<div id="grid-layout> ´´´ in HTML is working as the body of the code, I tried some solutions about this but I am also kınd a new in this too.
it was a typo instead of "grid-template-column" "grid-template-row" I had "grid-column" "grid-row"
Related
So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image.
This was the youtube video : https://youtu.be/5bMdjkfvONE
I got up to 1:00:0 into the video after that it no longer worked like in the video.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's because there are no images at the URL's you are using. What's more, you need to apply a height to the elements that have the background images. I only did it for one of them below.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(https://via.placeholder.com/150); height: 200px"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've started to learn html and css, and I have big issues with layout, I tried grid and flexbox. What I want to achieve is this:
What layout I try to have
And sadly, my website looks like this:
My lay out look like this
Now here's my code, and please explain like you would explain to a braindead if you're willing to, thanks in advance and have a nice day.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name"viewport" content="width=device-width", initial-scale="1.0"/>
<title>PE-ZONA.RO | WEBTOONS </title>
<link rel="stylesheet" href="../css/styles.css"/>
<link rel="stylesheet" href="../css/normalize.css"/>
</head>
<body>
<!-- HEADER - ICONIȚE -->
<header>
<div class="mhcon">
<div class="mhconitem">PATREON</div>
<div class="mhconitem2">DISCORD</div>
</div>
</header>
<!-- SIDEBAR-NAVIGATIE -->
<aside>
<nav>
<div id="sidebar">
<ul>
<li>WEBTOONS</li>
<li>ECHIPĂ</li>
<li>ALĂTURĂ-TE</li>
<li>BLOG</li>
</ul>
</div>
</nav>
<aside>
<!-- WEBTOONS -->
<section>
<div class="content">
<div class="card">
<h3>NUME WEBTOON1</h3> <br>
<p>DESCRIERE WEBTOON
</div>
<div class="card">
<h3>NUME WEBTOON2</h3> <br>
<p>DESCRIERE WEBTOON
</div>
<div class="card">
<h3>NUME WEBTOON3</h3> <br>
<p>DESCRIERE WEBTOON
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footercon">
<p>Copyright # pe-zona.ro</p>
</div>
</footer>
</body>
</html>
/* ARTICOLE */
.card {
background-color: #c4c4;
margin: 20px;
padding: 20px;
border: 6px solid #c5c5;
}
/* CONTAINER MENIU HEADER */
.mhcon {
display: flex;
flex-flow: row;
justify-content: flex-end;
border: 1px solid red;
order: 1;
flex: 1;
}
/* PATREON BUTTON */
.mhconitem {
margin: 25px 15px;
padding: 20px;
width: 200px;
text-align: center;
background-color: #f07167;
border-radius: 4px;
border: none;
}
.mhconitem a {
color: white;
font-size: 2.5rem;
font-weight: 700;
text-decoration: none;
}
/* DISCORD BUTTON */
.mhconitem2 {
margin: 25px 15px;
padding: 20px;
width: 200px;
text-align: center;
background-color: #6a4c93;
border-radius: 4px;
border: none;
}
.mhconitem2 a {
color: white;
font-size: 2.5rem;
font-weight: 700;
text-decoration: none;
}
/* CONTAINER SIDEBAR */
#sidebar {
background-color: black;
height: 100vh;
width: 25vh;
display: flex;
flex: 1;
}
/* CONTAINER CONTENT */
.content {
display: flex;
justify-content: flex-end;
flex: 2;
}
/* CONTAINER FOOTER */
.footercon {
display: flex;
justify-content: flex-end;
}
.footercon p {
justify-content: center;
}
Using CSS-Grids, Your layout is ready :)
CSS-Grids offer lots of flexibility to create such layouts rather than
by using flex-boxes.
CODEPEN LINK: https://codepen.io/emmeiWhite/pen/abmEBgP
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
height: 90vh;
width: 90vw;
margin: 1rem auto;
gap: 1rem;
grid-template-areas:
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside footer footer footer"
"aside footer footer footer";
}
aside,
header,
footer,
section {
border: 1px solid #ccc;
}
aside {
grid-area: aside;
}
section {
grid-area: section;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 1fr);
padding: 2rem;
grid-template-areas:
" header header header"
"content content content"
"content content content"
"content content content"
"content content content"
"content content content";
}
header {
grid-area: header;
border: none;
}
header .mhcon {
display: flex;
justify-content: flex-end;
}
header .mhcon div {
border: 1px solid #ccc;
padding: 0.5rem 1rem;
}
header .mhcon div:last-child {
margin-left: 1rem;
}
.content {
display: grid;
grid-area: content;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
row-gap: 1rem;
}
.card {
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
grid-area: footer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name"viewport" content="width=device-width", initial-scale="1.0"/>
<title>PE-ZONA.RO | WEBTOONS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- SIDEBAR-NAVIGATIE -->
<aside>
<nav>
<div id="sidebar">
<ul>
<li>WEBTOONS</li>
<li>ECHIPĂ</li>
<li>ALĂTURĂ-TE</li>
<li>BLOG</li>
</ul>
</div>
</nav>
</aside>
<!-- WEBTOONS -->
<section>
<!-- HEADER - ICONIȚE -->
<header>
<div class="mhcon">
<div class="mhconitem">PATREON</div>
<div class="mhconitem2">DISCORD</div>
</div>
</header>
<div class="content">
<div class="card">
<h3>NUME WEBTOON1</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON2</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON3</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON1</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON2</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON3</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footercon">
<p>Copyright # pe-zona.ro</p>
</div>
</footer>
</body>
</html>
I have three problems with my grid that I'm trying to create to build the layout for my page.
The first problem is that I don't want the grid to span the length of the page. Currently it is set as the correct width but I want the whole thing centered in the middle of the page. Currently it is aligned to the left and I can't get it to align in the center.
The second problem is that I have a second grid with id sidebar and I've assigned it ro grid-area sidebar. The sidebargrid has sixteen rows. I created a .btn class and am trying to put an image inside each button. Currently the images are being placed in the correct grid areas but the buttons are not rendering.
The third problem is that I have #bannergrid assigned to the grid area banner. I set the background imaged inside the div in template.html which is showing corrrectly. #bannergrid has a grid area topright which I have set #login to. I have a .btn-login that I am trying to place in the #login div but it is not showing.
I currently have the page running on a development server at https://dcadventuresonline.com if you want to see what I'm currently seeing.
You can see all my project code here:
https://github.com/mikewycklendt/dcadventures
These are the relevant files:
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="{{ meta_name }}" content="{{ meta_content }}" />
<title>{{ title }}</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Monda&display=swap" rel="stylesheet">
{% for style in stylesheets %}
<link href="{{ style.style }}" type="text/css" rel="stylesheet" />
{% endfor %}
</head>
<body>
<div class="container">
<div id="bannergrid" style="background:url(/static/img/banner.jpg">
<div id="topleft"></div>
<div id="login">
<div class="btn-login"></div>
</div>
<div id="bottom"></div>
</div>
<div id="left"></div>
<div id="sidebargrid" style="background:url(/static/img/sidebar.jpg">
<div id="rules">
<div class="button">
</div>
</div>
<div id="games">
<div class="btn">
<img src="/static/img/sidebar/gamesGOLD.png"
onmouseover="this.src='/static/img/sidebar/gamesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/gamesGOLD.png'" />
</div>
</div>
<div id="stories">
<div class="btn">
<img src="/static/img/sidebar/storiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/storiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/storiesGOLD.png'" />
</div>
</div>
<div id="heroes">
<div class="btn">
<img src="/static/img/sidebar/heroesGOLD.png"
onmouseover="this.src='/static/img/sidebar/heroesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/heroesGOLD.png'" />
</div>
</div>
<div id="npcs">
<div class="btn">
<img src="/static/img/sidebar/npcsGOLD.png"
onmouseover="this.src='/static/img/sidebar/npcsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/npcsGOLD.png'" />
</div>
</div>
<div id="locations">
<div class="btn">
<img src="/static/img/sidebar/locationsGOLD.png"
onmouseover="this.src='/static/img/sidebar/locationsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/locationsGOLD.png'" />
</div>
</div>
<div id="skills">
<div class="btn">
<img src="/static/img/sidebar/skillsGOLD.png"
onmouseover="this.src='/static/img/sidebar/skillsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/skillsGOLD.png'" />
</div>
</div>
<div id="abilities">
<div class="btn">
<img src="/static/img/sidebar/abilitiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/abilitiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/abilitiesGOLD.png'" />
</div>
</div>
<div id="powers">
<div class="btn">
<img src="/static/img/sidebar/powersGOLD.png"
onmouseover="this.src='/static/img/sidebar/powersBLUE.png'"
onmouseout="this.src='/static/img/sidebar/powersGOLD.png'" />
</div>
</div>
<div id="flaws">
<div class="btn">
<img src="/static/img/sidebar/flawsGOLD.png"
onmouseover="this.src='/static/img/sidebar/flawsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/flawsGOLD.png'" />
</div>
</div>
<div id="equipment">
<div class="btn">
<img src="/static/img/sidebar/equipmentGOLD.png"
onmouseover="this.src='/static/img/sidebar/equipmentBLUE.png'"
onmouseout="this.src='/static/img/sidebar/equipmentGOLD.png'" />
</div>
</div>
<div id="devices">
<div class="btn">
<img src="/static/img/sidebar/devicesGOLD.png"
onmouseover="this.src='/static/img/sidebar/devicesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/devicesGOLD.png'" />
</div>
</div>
<div id="armor">
<div class="btn">
<img src="/static/img/sidebar/armorGOLD.png"
onmouseover="this.src='/static/img/sidebar/armorBLUE.png'"
onmouseout="this.src='/static/img/sidebar/armorGOLD.png'" />
</div>
</div>
<div id="weapons">
<div class="btn">
<img src="/static/img/sidebar/weaponsGOLD.png"
onmouseover="this.src='/static/img/sidebar/weaponsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/weaponsGOLD.png'" />
</div>
</div>
<div id="vehicles">
<div class="btn">
<img src="/static/img/sidebar/vehiclesGOLD.png"
onmouseover="this.src='/static/img/sidebar/vehiclesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/vehiclesGOLD.png'" />
</div>
</div>
<div id="constructs">
<div class="btn">
<img src="/static/img/sidebar/constructsGOLD.png"
onmouseover="this.src='/static/img/sidebar/constructsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/constructsGOLD.png'" />
</div>
</div>
</div>
<div id="middle"></div>
<div id="content">
{% include includehtml %}
</div>
<div id="right"></div>
</div>
</body>
</html>
template.css
#import "sidebar.css";
body{
margin: 0px;
}
.container{
display: grid;
justify-content: center;
grid-template-rows: 286px 3000px;
grid-template-columns: 2px 250px 2px 1050px 2px;
grid-template-areas: "banner banner banner banner banner"
"left sidebar middle content right"
}
#bannergrid{
display: grid;
grid-area: banner;
background-image: url( 'img/banner.jpg' ) no-repeat;
background-size: cover;
width: 100%;
grid-template-columns: auto 140px;
grid-template-rows: 45px auto;
grid-template-areas: "topleft topright"
"bottom bottom";
margin: 0px;
}
#login{
grid-area: topright;
}
#topleft{
grid-area: topleft;
}
#bottom{
grid-area: bottom;
}
#left{
grid-area: left;
background-color: #153958;
}
#middle{
grid-area: middle;
background-color: #153958;
}
#right{
grid-area: right;
background-color: #153958;
}
#content{
background-color: white;
font-family: 'Montserrat', sans-serif;
grid-area: content;
}
#sidebargrid{
display: grid;
grid-area: sidebar;
background-image: url('img/sidebar.png') no-repeat;
background-size: cover;
grid-template-columns: 100%;
grid-template-rows: 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px 47px auto;
grid-template-areas: "rules"
"games"
"stories"
"heroes"
"npcs"
"locations"
"skills"
"abilities"
"powers"
"flaws"
"equipment"
"devices"
"armor"
"weapons"
"vehicles"
"constructs"
}
.btn-login{
width: 125px;
height: 30px;
margin: 15px;
border: 2px solid white;
border-color: white;
background-color: #af0101;
font-family: 'Monda', sans-serif;
text-align: center;
color: white;
}
.btn-login:hover {
width: 125px;
height: 30px;
border: 2px solid white;
border-color: white;
background-color: #3a4e87;
font-family: 'Monda', sans-serif;
text-align: center;
color: white;
}
sidebar.css
#rules{
grid-area: rulea;
}
#games{
grid-area: games;
}
#stories{
grid-area: stories;
}
#heroes{
grid-area: heroes;
}
#npcs{
grid-area: npcs;
}
#locations{
grid-area: locations;
}
#skills{
grid-area: skills;
}
#abilities{
grid-area: abilities;
}
#powers{
grid-area: powers;
}
#flaws{
grid-area: flaws;
}
#equipment{
grid-area: equipment;
}
#devices{
grid-area: devices;
}
#armor{
grid-area: armor;
}
#weapons{
grid-area: weapons;
}
#vehicles{
grid-area: vehicles;
}
#constructs{
grid-area: constructs;
}
.btn{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
width: 250px;
height: 45px;
margin: 0px;
border-bottom: 2px solid #cdb99d;
}
.btn:hover {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
width: 250px;
height: 45px;
margin: 0px;
border-bottom: 2px solid #7ecef6;
border-left: 2px solid #7ecef6;
border-right: 2px solid #7ecef6;
}
Ok I solved all my problems.
The sidebar buttons weren't showing because I didn't have the correct path set in app.py to my css files.
To get .container to center I added justify-content inside the div in template.html
btn-login wasnt showing because I had had my css files located in /static but then I moved them to /static/css but an old version of template.css was still in /static and thats the one i was still linking to in app.py and in that old version the button was called .button-login.
I would like to create a right aligned navbar. Each link item should contain an image and a text. When having text only this code works fine
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div>
Home
About
Projects
Contact
Imprint
</div>
</div>
Now I added images and texts to the link item and built a wrapper around these elements.
#navbar {
height: 60px;
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
margin: 0 60px;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Unfortunately the CSS breaks now. How can I fix it so that each link item is aligned to the right, centered vertically and is placed along the navbar?
I achieved it using flexbox
https://jsfiddle.net/q48tyuac/
but maybe there is a better solution using the grid attribute. Because when you lower the screen size these elements are fixed and I would like them to break to the next row if there is no space left.
use flex-wrap:wrap;
#navbar {
/* height: 60px; */
display: flex;
justify-content: flex-end;
padding: 20px;
flex-wrap:wrap;
align-items: center;
background: red;
/* margin: 0 60px; */
}
https://jsfiddle.net/6p03s5cm/
if you dont want to use flexbox with grid you can target #navbarLinkContainer and do it with columns
#navbar {
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
display:grid;
grid-template-columns:repeat(3 , 1fr) ;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Before posting this I saw several question, including
question
question
question
and also the guide to flex-box of css tricks. However I don't understand how to solve a problem regarding the rendering of some cards that I made.
Problem
The behaviour of the cards is not OK:
The text sometimes is going outside (I tried to use word-break: keep all) the cards and I don't understand why
Sometimes the space between two cards is 0 pixels.
Expected behaviour
Cards with the text inside them, and that respect the space between them.
Code
.wrapper{
min-height: 100vh;
background-color: lightgray;
display: flex;
flex-direction: column;
}
.content {
height:auto;
flex: 1;
background: #FAFAFA;
display: flex;
color: #000;
}
.columns{
display: flex;
flex: 1;
}
.main{
z-index:1;
flex: 1;
background: #eee;
}
.sidebar{
overflow: auto;
text-align: center;
z-index: 1;
height: 100%;
width: 40%;
background: white;
}
.title{
font-size: 25;
margin-bottom: -20px;
width: 100%;
}
.photo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 50%;
}
.rating{
font-size: 20px;
}
.card {
cursor: pointer;
text-overflow: ellipsis;
background-color: white;
text-decoration: none;
border-radius: 10px;
box-shadow: 1px 1px 50px black;
margin:auto;
width: 55%;
height: 320px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
word-break:keep-all;
padding: 0px;
}
a{
text-decoration: none;
text-decoration-color: black;
color: black;
}
.address{
font-size: 20px;
padding: 20px;
}
<html>
<head>
<title>Restosearch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Menu down below -->
<div class="circle"></div>
<button class="btn">
<span class="btn__line"></span>
<span class="btn__line"></span>
<span class="btn__line"></span>
</button>
<div class="full-menu">
<div class="layer"></div>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#" class="nav__link">
Home
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
About
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
Portfolio
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
Contacts
</a>
</li>
</ul>
</nav>
</div>
<!-- Menu up above -->
<!-- Input, maps and cards down below -->
<main>
<div class="container">
<div class="box">
<div>
<h2 style="">Search the closest restaurant</h2>
</div>
</div>
</div>
<div class="downBox">
<input id="pac-input" class="controls" type="text" placeholder="insert here: yourNation, yourCity, yourStreet">
</div>
<div class="divider"></div>
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main">
<div id="map"></div>
</main>
<aside class="sidebar" style="background-color: gainsboro">
</aside>
</div>
</section>
</div>
<div class="divider"></div>
<!-- this section will appear only when you click on a card -->
<!-- Ricorda di settare i css per queste sezioni, il titolo deve essere circa alto 20/ 30 % -->
<div class="wrapperTwo detail">
<section class="content">
<div class="columns">
<aside class="sidebarTwo" style="">
<div class="placeInfo">
</div>
</aside>
<main class="mainTwo">
<div class="detailtitle"><h2>Titolo del ristorante qua</h2></div>
<hr>
<div class="review">
</div>
</main>
</div>
</section>
</div>
<!-- Input, maps and cards up above -->
</main>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyApi&libraries=places&callback=initAutocomplete"
async defer></script>
</html>
Every card is generated dynamically with this code:
$(".sidebar").append("<div class=\"card\" id=\"" + idPlace +"\"><img src=\"" + photoMarker + " \"class=\"photo\"><div class=\"title\"><h6>" + name +"</h6></div><div class=\"rating\"><p>Rating: " + rating + "</div class=\"address\"><p>" + address + "<div class=\"space\"></div></p></div>");
This is the resulting card in the HTML structure:
<div class="card">
<img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="photo">
<div class="title"><h4></h4></div>
<div class="rating"></div>
<p></p>
</div>
Codepen
codepen here
A note about this codepen: I don't understand why, but in Chrome the layout of the row into the div wrapper is fine, however in the codepen it is not.
I'm definitely missing something, so any advice will be really appreciated.
Update
As suggested in the comments i updated the codepen, now you can see differents card in the right sidebar and as you can see the problems are:
the text go outside the card space
the cards are too closer
the sidebar aren't able to read the property of the overflow, in my chrome as you can see the sidebar has a vertical scrollbar.
Since your code is a mess, I can't see it properly and give you a working example, but your problem sounds simple. In order to see spaces between the cards you need 2 things:
Set the container with justify-content: space-between;
Give a margin to each card
Here is a simple example:
.container{
width: 80%;
border: 1px solid black;
padding: 10px;
display: flex;
justify-content: space-between;
}
.card{
background-color: #bada55;
flex-grow:1;
margin: 10px;
height: 50px;
}
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>