I did not have this issue before I attempted to switch to grid instead of manually placing everything. However, I am hoping someone can point out my issue. When I load the page my background.png is fine in the second container, but it bleeds from the first container to the top of the second, even though there is another section beneath it. Any tips are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iguana Removal</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Roboto+Slab&family=Six+Caps&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/iguanaremoval2.css">
</head>
<img class="BackgroundImage" src="images/iguanaBack.png" alt="Pixles Free to use picture of an iguana back.">
<header>
<section class="headerGrid">
<div class="headerHead"><h1>Our Removal Services</h1></div>
<div class="headerHome">Home</div>
<div class="headerIguanaRemoval">About</div>
<div class="headerRequests">Requests</div>
</section>
</header>
<body class="IRbody">
<section class="bodyGrid">
<div class="bodyHead">
<img src="images/background.png" class="textBackground">
<h2 class="underline">header</h2>
<div class="headText">
random text
</div>
</div>
<div class="companyFleet">
<img class="fleetImage" src="images/2015_team1.png" alt="picture of our 2015 team and fleet.">
</div>
<div class="body2">
<img src="images/background.png" class="textBackground">
<h2 class="underline IRBHead">header</h2>
<span>
random text
</span>
</div>
</section>
</body>
</html>
The CSS:
html{
background: black;
font-family: 'Roboto Slab', serif;
}
header{
background: navajowhite;
position: sticky;
text-align: center;
position: relative;
width: 95vw;
height: 10%;
left: 1%;
z-index: 40;
}
Body{
text-align: center;
grid-column: 25px;
grid-row-gap: 0;
}
/*img{
max-width: 100%;
max-height: 100%;
}*/
.BackgroundImage{
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: -40;
}
/*******header********/
.headerGrid{
display: grid;
grid-column: 1fr 1fr 1fr;
grid-row: 1fr 1fr;
grid-template-areas:
". headerHead headerHead headerHead ."
". headerHome headerIguanaRemoval headerRequests .";
}
.blank{
grid-area: blank;
}
.headerHead{
grid-area: headerHead;
}
.headerHome{
grid-area: headerHome;
}
.headerIguanaRemoval{
grid-area: headerIguanaRemoval;
}
.headerRequests{
grid-area: headerRequests;
}
/*******Body********/
/*Images*/
.textBackground{
position: absolute;
height: 100%;
width: 100%;
left: 1%;
bottom: 0%;
z-index: -1;
}
.fleetImage{
width: 100%;
height: 100%;
left: 0%;
bottom: 0%;
}
/*mainbody*/
.bodyGrid{
display: grid;
grid-template-areas:
"bodyHead"
"companyFleet"
"body2";
}
.IRbody{
position: relative ;
width: 95vw;
}
.bodyHead{
grid-area: bodyHead;
}
.headText{
margin: 1px 1px;
}
.companyFleet{
grid-area: companyFleet;
width: 100%;
height: 75%;
}
.body2{
grid-area: body2;
}
Related
In the following snippet I have a position: fixed div which is not part of the grid layout and I have a row-1 and main grid rows.
I would like the main to expand to the available space which I thought grid-template-rows: 6rem 1fr would do but it is not.
I'd also like there to be less of gap between the rows but grid-row-gap is not working in this example.
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.container {
border: 10px solid green;
background: #f1f1f1;
display: grid;
align-items: center;
grid-template-areas:
"row-1"
"main";
grid-template-rows: 6rem 1fr;
grid-row-gap: 0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.row-1 {
border: 10px solid blue;
grid-area: row-1;
}
.main {
border: 10px solid orange;
grid-area: main;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>
You could do it as below, and if you want .row-1 not covered by the fixed element, you could add for example padding-top:3rem to .container or to .row-1 itself.
body {
text-rendering: optimizeSpeed;
margin:0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.container {
min-height: 100vh;
border: 10px solid green;
display: grid;
grid-template-rows: 6rem 1fr;
}
.row-1 {
border: 10px solid blue;
}
.main {
border: 10px solid orange;
}
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
I have this code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://toast-shop.opplayz.repl.co/images/logo">
<title>Toast Discord Bot</title>
</head>
<style>
body {
background-image: linear-gradient(to right, #cfd9f2, #A5B8E7, #cfd9f2);
}
.profile{
margin: 0 auto;
position: relative;
display: inline-block;
}
.profilelogo{
width: 25vw;
height: 25vw;
display: inline-block;
float: left;
}
.profileinfo{
font-family: arial;
}
</style>
<body>
<div class="profile" id="profile">
<img src="https://toast-shop.opplayz.repl.co/images/logo" class="profilelogo" id="profilelogo">
<div class="profileinfo">
<h1>Toast Shop</h1>
<h2>A Discord Bot that brings fun to your server</h2>
</div>
</div>
</body>
I want my image and text to look like this:
On larger screens, the h1 and h2 elements goes to the top of the page while the image stays in the middle. I want the text to align with the image, horizontal wise. How could I do this with css?
.profile {
display: flex;
flex-direction: row;
align-items: center;
}
body{
margin: 0;
display: grid;
grid-template-rows: 1fr auto auto 1fr;
grid-template-columns: 1fr 1fr;
gap: 1rem;
width: 100vw;
height: 100vh;
}
img {
grid-column: 1 / 2;
grid-row: 1 / -1;
max-height: 100vh;
max-width: 50vw;
object-fit: fill;
}
h1 {
grid-column: -2 / -1;
grid-row: 2 / 3;
margin: 0;
}
h2 {
grid-column: -2 / -1;
grid-row: -3 / -2;
margin: 0;
}
<img src="https://images.unsplash.com/photo-1646672233305-98d8c30c7b08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"/>
<h1>Header 1</h1>
<h2>Header 2</h2>
Cannot integrate these 2 columns, with the sub-columns :
I am forced to use this structure :
<div class="custom_classes">
<div class="custom_classes">col1</div>
<div class="custom_classes">col2</div>
<div class="custom_classes">col 2.1</div>
<div class="custom_classes">col 2.2</div>
<div>
use CSS grid instead
the simplest way to do this is using CSS grid (and is also repsonsive)
...this css property grid-column
that is a shorthand for grid-column-start and grid-column-end
details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
using the Firefox DevTools I click the grid button in the code, which makes appear me a grid visualizer...
in the paper, I start thinking about... and I find that the best way is creating a 4 columns grid-based.
here is the code if you want to learn it :)
body {
display: grid;
place-content: center;
height: 100vh;
}
.container {
display: grid;
gap: 0.5em;
height: 80vh;
width: 80vw;
}
.container .child {
background: lightblue;
display: grid;
place-content: center;
}
.child1 {
grid-column: 1/2;
grid-row: 1/3;
}
.child2 {
grid-column: 2/4;
}
.child3 {
grid-column: 2/3;
}
.child4 {
grid-column: 3/4;
}
<!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="style.css">
</head>
<body>
<div class="container">
<div class="child child1">col1</div>
<div class="child child2">col2</div>
<div class="child child3">col 2.1</div>
<div class="child child4">col 2.2</div>
</div>
</body>
</html>
With Flexbox
.classes_container{
background: whitesmoke;
position: relative;
width: 100%;
height: 300px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 20px auto;
display: flex;
}
.item{
background: #d3f9d2;
padding: 5px;
margin: 5px;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.col1{
width: 60%;
height: 95%
}
.col2{
width: 40%;
height: 50%;
}
.col2_1{
width: 18%;
height: 39%;
margin-right: 10px;
}
.col2_2{
width: 18%;
height: 39%;
margin-left: 10px;
}
.col2_1 {
align-self: end;
position: absolute;
right: 19%;
}
.col2_2 {
align-self: end;
position: absolute;
right: 1px;
}
<div class="classes_container">
<div class="col1 item">col1</div>
<div class="col2 item">col2</div>
<div class="col2_1 item">col 2.1</div>
<div class="col2_2 item">col 2.2</div>
<div>
</div>
my page contains a grid layout.
I need to display a non permanent element (cookie consent element )
I placed it outside the document flow using position: absolute to not effect the grid layout.
I need every bit of space so I dont want to allocate extra space to a temporary element by adding a extra row
How can I fixate the starting Position of the element even when the page width and height changes ?
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 30px;
right: 150px;
z-index: 20;
}
:root {
padding-left: 10%;
padding-right: 10%;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas:
"nav nav nav nav"
"component1 component1 component1 component1"
"component2 component2 component2 component2"
"footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
/* transform: translateX(-80%); */
/* /* margin-top: 50%; */
/* border-radius: var(--main-radius); */
/* margin-top: 30%; */
/* margin-left: 50%; */
/* top: 300px;
left: 30px;
bottom: 100px; */
position: absolute;
bottom: 30px;
right: 150px;
/* top: 5; */
/* right: 20; */
/* left: 2; */
/* bottom: 20; */
z-index: 20;
}
/* place the element cookie on top of the gird layout */
/* */
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
Use percentages instead of pixels in bottom and right property of .cookie-consent class. I also added overflow: hidden; to the body selector.
Also, consider setting the width and height (red div) not rigidly.
It should be better ;-)
I hope You will be content . Best regards !
:root {
padding-left: 10%;
padding-right: 10%;
}
body {
overflow: hidden;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 5%;
right: 9%;
z-index: 20;
}
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}