I'm new here in Stack Overflow and I have a problem with flexbox.
I want to use a <main> and <footer> with display: flex; where each row of main has 2 columns with height: 100% of the browser and footer has 2 rows, first with 3 columns and the second only one column, both with height: auto;
But when I do this my footer overlaps <main> because its height is 100%, but I need it for the 100% of the children. Am I clear?
#font-face {
font-family: "Open Sans";
src: url(../fonts/OpenSans-Regular.ttf);
}
#font-face {
font-family: "Time Burner";
src: url(../fonts/TimeBurner-Regular.ttf);
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.flex {
height: 100%;
flex-basis: 50%;
box-sizing: border-box;
padding: 20px;
}
.home {
background-attachment: fixed;
background-image: url("../img/bg.jpg");
background-position: 50%;
background-size: cover;
}
.flex:nth-child(even) {
border: 5px solid blue;
}
.flex:nth-child(odd) {
border: 5px solid red;
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 200px;
height: 50px;
background-color: gray;
text-align: center;
}
footer {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer {
flex-basis: 100%;
height: auto;
}
.thumb {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
right: 20px;
bottom: 20px;
}
#media (max-width: 768px) {
.flex {
flex-basis: 100%;
}
.arrow {
bottom: -100%;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- ¿Qué hacés en mi código? ¿Te gustó algo?
Bueno, como sea, que tengas una linda visita :) -->
<meta charset="UTF-8">
<title>OnePage</title>
<meta name="theme-color" content="#34a853" />
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main>
<section class="flex home" id="inicio">
1 - Izquierda
</section>
<section class="flex home">
2 - Derecha
</section>
<a class="arrow" href="#3">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</a>
<section class="flex" id="3">
3 - Izquierda
</section>
<section class="flex">
4 - Derecha
</section>
</main>
<footer>
<section class="flex footer">
5 - Footer
</section>
</footer>
<a class="thumb" href="#inicio">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
</a>
</body>
</html>
Here is my solution for you layout.
<!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>
</head>
<style>
main,
footer {
display: flex;
flex-wrap: wrap;
}
.main-item {
flex:0 1 50%;
height: 100vh;
background-color: tomato;
}
.footer-item {
flex: 1;
background-color: lightsalmon;
}
.footer-item:last-child {
flex: 0 0 100vw;
background-color: blue;
}
</style>
<body>
<main>
<div class="main-item">m1</div>
<div class="main-item">m2</div>
<div class="main-item">m3</div>
<div class="main-item">m4</div>
</main>
<footer>
<div class="footer-item">f1</div>
<div class="footer-item">f2</div>
<div class="footer-item">f3</div>
<div class="footer-item">f4</div>
</footer>
</body>
</html>
Thanks(Gracias), T04435.
Put min-height:100% on body
Remove height:100% from body
Related
I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.
.page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400px;
outline: 5px dashed green;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: stretch;
background-color: red;
margin: -5px;
padding: 10px;
}
.column.left {
border-right: 0px;
}
.column.right {
border-left: 0px;
background-color: yellow;
}
<div class='page-wrapper'>
<div class='row'>
<div class='column left'>
Column 1
</div>
<div class='column right'>
Column Two
</div>
</div>
</div>
Try this, is this what you want to achieve?
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 681px;
width: 200px;
float: right;
background-color: #FEDA6A;
top: -3px;
right: -3px;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
Hi all,
I have a design like an image and used bootstrap 5 for coding. I want to carry the sticky div area from the number one to the first div after on mobile. I can't use js. I tried to use CSS flexbox order but how can ı do that with only CSS?
I look forward to your ideas and suggestions.
Thank you so much!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size:92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
}
.sticky {
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top:0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
<div class="col-lg-6">
<div class="sticky">
sticky area
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
I doubt this is achieveable with flexbox alone.
However, I managed to address your requirements with display: grid and some fiddling with grid-areas on the elements. This solution also defines a specific grid-template per screen resolution.
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
}
The caveat here is that each element has to have its dedicated grid-area value for the template, so won't work for the cases where you don't know the exact number of containers in play or such number is unreasonably high.
Hope this helps!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
grid-area: box1;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
grid-area: box2;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
grid-area: box3;
}
.sticky {
order: 1;
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top: 0;
grid-area: sticky;
}
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
.sticky {
position: static;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="sticky">
sticky area
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
I am trying to build a personal site, and just started with some HTML and CSS. The problem is when I resize the browser window, the mountain image chain position and the clouds shift their position, any ideas on how to fix this? Also I am new to stack so sorry if the way I am asking question is incorrect.enter image description here
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img src="img/mountain.png" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
You should use max-width:100% for your image.
body {
margin: 0;
text-align: center;
}
.bottom-img {
max-width:100%; /* you should use */
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img class="bottom-img" src="https://siber.boun.edu.tr/sites/cyber.boun.edu.tr/files/sample6.jpg" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.
What is the name of this design "style" and how do I achieve the effect with css and html?
I tried to recreate the design with HTML and css. here is the code
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
}
#left-bottom {
left: 0;
bottom: 0;
transform: translate(-0.5vw);
}
#right {
right: 0;
top: 0;
bottom: 0;
transform: translate(10vw);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
border: 1vh solid lime;
}
.logo {
max-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 80vw;
height: inherit;
}
.links {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<ul>
<li>
Kontakt
</li>
<li>
Produkter
</li>
<li>
om oss
</li>
</ul>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
Whenever I zoom the absolute position background pieces shifts like this.
What is the best way to achieve this design and what is the name of the style?
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
width: 20vw;
}
#left-bottom {
left: 0;
bottom: 0;
height: 50vh;
}
#right {
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
}
.logo {
max-width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
top: 45vh;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 100%;
height: inherit;
z-index: -10;
}
.links {
margin: 51vh auto auto 7vw;
width: 110vw;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.link-text {
width: 100%;
text-align: center;
}
.link-text a {
text-decoration: none;
color: #777;
font-size: 1.25vw;
font-family: helvetica;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<div class="link-text">Kontakt</div>
<div class="link-text">Produkter</div>
<div class="link-text">om oss</div>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.
Explanation
1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...
2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.
3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids
4- I styled few things with css (mainly the link section) which you can go through in your code...
The above was just a brief overview.
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.