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.
Related
I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/
This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}
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'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"
I'm trying to align 3 items in Flexbox.
To make things easier, here's the current layout
The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.
Here's the code :
.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
display: flex;
justify-content: space-between;
}
The HTML :
<div class="div-container">
<div class="form-div-container">
<div class="small-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="even-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-longer-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="small-text-two">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
</div>
</div>
The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !
You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:
.box__icon,
.box__number {
width: 15%;
text-align: center;
}
See a full demo below:
/*IGNORE STYLE RULES FROM HERE......*/
body {
margin: 0;
}
i {
font-style: normal;
}
.box {
color: white;
font-family: sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 30px;
}
.box:nth-child(1) {
background: firebrick;
}
.box:nth-child(2) {
background: darkturquoise;
}
.box:nth-child(3) {
background: chocolate;
}
.box:nth-child(4) {
background: midnightblue;
}
.box__text::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ffffff transparent;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*.... TO HERE*/
.box {
align-items: center;
display: flex;
justify-content: space-between;
}
.box__icon,
.box__number {
width: 15%; /*Change this to whatever value you want*/
text-align: center;
}
.box__text {
color: white;
font-family: sans-serif;
text-align: center;
}
<div class="container">
<div class="box">
<div class="box__number">1</div>
<p class="box__text">Small Text</p>
<i class="box__icon">Icon---</i>
</div>
<div class="box">
<div class="box__number">2</div>
<p class="box__text">Longer Text</p>
<i class="box__icon">Icon</i>
</div>
<div class="box">
<div class="box__number">3</div>
<p class="box__text">Even Longer Text</p>
<i class="box__icon">Icon--</i>
</div>
<div class="box">
<div class="box__number">4</div>
<p class="box__text">Longer Longer Longer Text</p>
<i class="box__icon">Icon---</i>
</div>
</div>
I'm trying to design google play like webpage design (Mobile version). I'm using CUSTOM GRID SYSTEM (12 col 0.5% margin). The problem is that body color is appearing over header section (I think so, maybe its a different problem). I want to make it look/scroll like this:
Example image of google play mobile
Here is the code:
**
You may need to zoom to 250% or landscape max width:640px to view the
design.
**
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {
background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70%;
width: 100%;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
You want something like this. In your code you are fixing bg-image of header, therefore the body will scroll over that image, so need to fix the header instead of fixing bg-image
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
padding-top:70vh;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
top:0;
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70vh;
width: 100%;
position:fixed;
top:40px;
z-index:-1;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
After playing with it a bit, I think there is a problem with the header. It works if you give it position: fixed and z-index: -1. The only remaining problem is that you have to make sure that the space remains. I recommend a <div style="height: 70%"></div>
Setting z-index to 1 for your nav should help.