I have made a sticky header using flexbox then using a grid for the body. But applying height to grid items makes the page overflow which I don't want. I have figured I can solve this overflowing by calc(100vh - the height of header) but eventually the height of the header will change if I change the resolution to that of mobile making the new height useless.
The other solution I can think of is by explicitly adding a height to the header but I think that is not the right solution to my problem
https://codepen.io/iwantroca-the-flexboxer/pen/ZEayyqp
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
min-height: 100vh;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
}
#projects_bar {
background: red;
height: 100vh;
}
#tasks_bar {
background: yellow;
}
<!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>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
With your current structure why not just make header 10vh and main 90vh. This means that #projects_bar and #tasks_bar will also be 90vh also because 100vh (what you previously had) will cause overflow on the y-axis.
You can also add overflow-y: hidden; on the body to make it not scroll when switching device types.
Edit ~ mentioned in comments, same result without setting a height to the header. Remove all heights, and set height on body to 100vh. min-height: 100vh; is not the same as height: 100vh; so you need to establish that first. Then you can just set height: 100%; to main, and it will fill the remaining viewport.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
height: 100vh;
min-height: 100vh;
overflow-y: hidden;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
height: 100%;
}
#projects_bar {
background: red;
}
#tasks_bar {
background: yellow;
}
<!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>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
Related
im very new to learning web development, and i'm going through the hills and valleys of trying to improve. So far I just know HTML and CSS so this should be very simpy to answer.
I'm on a website that does web challenges to help you improve and this is what it SHOULD look like:
The goal
However this is what i currently have: (I color coded the divs so you could better see what's going on. Blue is the first div that holds the text, green is the 2nd that should hold the image, and the "binding-div" is purple which was supposed put the two divs inside) The Current State
My problem is the image isn't going into the "second-div", and i dont know why.
body {
background-color: black;
}
.container-div {
background-color: rgb(133, 63, 208);
}
.binding-div {
margin: 130px 205px;
background-color: rgb(27, 134, 88);
width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width: 540px;
height: 446px;
text-align: center;
}
.second-div {
display: inline-block;
}
h1 {
color: white;
width: 60%;
margin: 60px auto 20px auto;
}
p {
color: white;
width: 60%;
margin: 0 auto;
}
.bottom-p {
margin: 140px auto 40px auto;
}
<!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>Stat Card</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container-div">
<div class="binding-div">
<div class="first-div">
<h1>Get insights that help your business grow.</h1>
<p>
Discover the benefits of data analytics and make better decisions regarding
revenue, customer experience, and overall efficiency.
</p>
<p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
</div>
<div class="second-div">
<img src="Images\image-header-desktop.jpg" />
</div>
</div>
</div>
</body>
</html>
It's almost like the image doesn't recogize the div. Any help is appreciated.
You don't need to change your div in a inline -block. A div is a block.
To get the two div in the same line the easier way is to use display: flex. In your parents container of your div so in binding-div.
If you want to show two div in same line, just use this:
.binding-div {
margin: auto;
background-color: rgb(27, 134, 88);
width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width: 50%;
height: 446px;
text-align: center;
float: left;
}
.second-div {
display: inline-block;
float: left;
}
.binding-div:after{
content: "";
clear:both;
display: table;
}
I hope it will work.
Here's your complete code. I've made Have some simple changes,
<!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>Stat Card</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container-div">
<div class="binding-div">
<div class="first-div">
<h1>Get insights that help your business grow.</h1>
<p>
Discover the benefits of data analytics and make better decisions regarding
revenue, customer experience, and overall efficiency.
</p>
<p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
</div>
<div class="second-div">
<img src="https://images.pexels.com/photos/38568/apple-imac-ipad-workplace-38568.jpeg?auto=compress&cs=tinysrgb&w=1260" />
</div>
</div>
</div>
</body>
</html>
The updated CSS:
body {
background-color: black;
}
.container-div {
background-color: rgb(133, 63, 208);
}
.binding-div {
margin: 130px auto;
background-color: rgb(27, 134, 88);
width:100%;
max-width: 1080px;
height: 446px;
}
.first-div {
display: inline-block;
background-color: rgb(29, 26, 232);
width:50%;
height: 446px;
text-align: center;
float:left;
}
.second-div {
display: inline-block;
float:left;
width:50%;
}
.binding-div:after{
display:table;
clear:both;
content:";
}
.second-div img{
width:100%;
}
h1 {
color: white;
width: 60%;
margin: 60px auto 20px auto;
}
p {
color: white;
width: 60%;
margin: 0 auto;
}
.bottom-p {
margin: 140px auto 40px auto;
}
Your image size: 100%;
Your width to max-width
#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 140px;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.Video-Greeting {
position: relative;
width: 75%;
margin: 0 auto;
}
.Video-Greeting video {
width: 100%;
}
.Video-Greeting button {
position: absolute;
top: 30%;
left: 40%;
margin: 0 auto;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font-size: 4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Home.css" />
<title>Welcome</title>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="Video-Greeting">
<video autoplay loop muted src="image\Pexels Videos 2706078.mp4"></video>
<button>Welcome</button>
</div>
</body>
</html>
I am trying to keep my Welcome Button to be stuck on my video and to be able to scale and rescale with video as my browser get smaller or bigger, but it keeps drifting away in one direction when I resize my browser. How can I solve this? I want to make the Welcome Button Be stuck to the middle of the video and for it rescale but at the same time stuck to the video center when making the browser smaller and bigger.
Add the following to .Video-Greeting
display: flex;
justify-content: center;
align-items: center;
This will make all of it's contents <button> and <video> center perfectly vertically and horizontally.
Next, the button
z-index:1
This allows the <button> to be out of the "flow" and not interfere with the <video> and vice versa. It's like it's on a layer above everything else on the 3rd dimension.
Also, remove top and left properties from <button> as well.
#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font: 500 3.5vmin/1.2 "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 10vh;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.greeting {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 75%;
margin: 0 auto;
}
.greeting video {
width: 100%;
}
.greeting button {
position: absolute;
z-index: 1;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font: inherit;
font-size: 4rem;
}
footer {
height: 10vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Home.css" />
<title>Welcome</title>
<style>
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="greeting">
<video autoplay loop muted src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4"></video>
<button>Welcome</button>
</div>
<footer></footer>
</body>
</html>
When I attempt to alter the browser size, the navigation menu sort of "falls" into itself, if that makes sense. I'm not entirely sure what is causing this.
I've tried max-width and sometimes even adding the ="wrapper" in a div messes this up.
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
.navbar a {
float: left;
padding: 40px;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
<!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">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
<code>Designed by Pasetta Studios. Built by Abraham.</code>
</div>
</body>
</html>
As you said in a comment, removing the padding on the links fixed the problem. What happened is that once the element became smaller than 100px (2x50px padding) it stopped getting smaller and wrapped (what you're describing is called wrapping in CSS) to the next line. A padding is redundant anyway since you're centering the text.
I added an overflow: hidden to .navbar to make it wrap around the floated links.
I also added an outline to everything inside body to make the elements easier to see for demonstration/development purposes. This can also be achieved by using the F12 developer tools in your browser.
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin: auto;
overflow: hidden;
}
.navbar a {
float: left;
padding: 40px 0;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!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">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
If you're learning, this is a great start if not a tiny bit outdated. Most people would use a flexbox nowadays which looks like this:
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
margin: auto;
max-width: 75%;
/* Added: */
display: flex;
}
.navbar a {
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
/* Added: */
line-height: 100px; /* Effectively centers the text vertically. */
flex: 1; /* Tells the links to expand horizontally. */
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!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">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 3 years ago.
I just want to make my button expands full width to its container with some margin to itself, but it's not working. I have tried box-sizing: border-box, but as you can see in the snippet, still no luck because notice the right-side of the button, it's like overshoot..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
}
.block {
margin: 10px;
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
That is because when the width is already 100%. Adding 10px margin to the left will cause it to be 100% + 10px, therefore overshoots the width of the container. Alternatively, you can add 10px padding to the container instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
padding: 10px; /*Added Padding*/
}
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Please remove the following commented CSS and it will work absolutely fine,
* {
box-sizing: border-box;
}
.cont {
/* width: 100vw; */
background-color: white;
width: 100%;
}
.block {
/* margin: 10px; */
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>