I'm new to webdev using html/css. Starting to learn, and I want to create a really simple thing.
Basically a responsive fixed box that never touches the viewport by 20px.
If you change the screen size, the box will always have a 20px margin, top, sides and bottom. I don't want scrolling at all! Then at the center, I want to place a .gif that is about 40em that scales according to screen size.
My problems until now, is that I can't make that box at all, I've tried dozens and dozens of different solutions I've lost track of which ones, I've got 30 tabs opened with tutorials but none solve my problem.
Every try there is always a scrollbar, or the box has margins on top/left, but not bottom/right, or the gif is centered horizontally but not vertically, or there are margins but I can't control size of them....
Is this so hard? It would be awesome to have some directions, thank you!
This is what I currently have, but it's just one of the dozens of my failed attempts. (i didn't include the .gif)
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
width: 90vw;
height: 90vh;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding-right: 100px;
position: center;
top: 50%;
left: 50%;
background: #ffffff;
text-align: center;
overflow: hidden;
}<div>
</div>
CodePudding user response：
This is a little bit of an odd way to go about it, but honestly I really enjoy this method as it has very easy to understand logic behind it. Apply the margin to the parent element via padding, not the child element.
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
div {
width: 100%;
height: 100%;
background: #ffffff;
text-align: center;
overflow: hidden;
}
Firstly, you need to remove the default padding/margin inbuilt into the body. Once you do that, you add the padding to the body - this gives the 20px margin. Finally, you need to ensure that the body spans the width of the page, and the div spans the width of the body. This is achieved by their respective width/height properties.
A key property here is box-sizing. This honestly should be the default, but essentially it stops the container from growing when adding padding. If this wasn't here, the body will overflow the page.
To add the image in the center, you should be using flex. It's quite a big topic, but it works perfectly for these situations. Learn more about flex here, but for now below in an example. Note the align-items and justify-content properties, these are what align the image vertically and horizontally.
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
div {
width: 100%;
height: 100%;
background: #ffffff;
text-align: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loiz</title>
<link rel="stylesheet" type="text/css" href="styling.css" media=”screen” />
</head>
<body>
<div>
<img src="https://via.placeholder.com/150C/O"/>
</div>
</body>
</html>Note that the top and left css attributes only apply to elements with absolute or fixed positioning (see here).
Also, position: center is not a valid value. Check here for valid values.
CodePudding user response：
One approach:
/* Using CSS custom properties to define
the known, repeated measurement: */
:root {
--margin: 20px;
}
/* setting the elements to all use the
same box-sizing method, use the same
font, margin and padding: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
body {
/* removed the properties that don't apply
in the demo; using a background-color
to visualise the sizing and layout: */
background-color: white;
}
div {
/* display: flex allows us to more easily
position the contents
vertically/horizontally: */
display: flex;
/* using the calc function to calculate the
space left over from subtracting 2 * 20px
from 100vw (viewport-width units) to
calculate the width, and from 100vw
(viewport-height units) to get the height: */
width: calc(100vw - 2 * var(--margin));
height: calc(100vh - 2 * var(--margin));
/* applying the margin around the <div>: */
margin: var(--margin);
/* to easily visualise the layout: */
background-color: red;
}
div img {
/* to easily position the <img> in the
horizontal and vertical centre: */
margin: auto;
/* setting the width leaves the browser
to set the height appropriately to
maintain the aspect-ratio: */
width: 40vw;
}<div>
<img src="https://via.placeholder.com/300.gif/09f/fff" alt="Placeholder gif">
</div>References:
CodePudding user response：
you have to use media queries for making it responsive for other devices , while provide a padding of 2% to the outermost div and then give and then place your gif in that div and provide that gif a padding also and you will get your required result
CodePudding user response：
Here's an idea of how to accomplish this:
body {
background: red;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100vw - 40px);
height: calc(100vh - 40px);
background: #ffffff;
overflow: hidden;
margin: auto;
display: flex;
}
img {
width: 40vw;
margin: auto;
}<div>
<img src="https://images.pexels.com/photos/10262654/pexels-photo-10262654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>CodePudding user response：
There are some default padding and margin on body tag. You need to reset them first. Also html tag is not full height by default as well. You also need to make them fullscreen by adding width: 100% and height: 100%
And then you can resize your div correctly. You can use calc method in css. In your case; width: calc(100% - 240px) 240px is 200px padding (100px each) for both sides and 40px margin (20px each).
To center gif for you can use flex features rather than using text-align etc.
:root {
--margin: 20px;
--padding: 100px;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
width: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
height: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
padding: var(--padding);
background: #ffffff;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
left: var(--margin);
top: var(--margin);
}<div>
<img src="https://media0.giphy.com/media/WXZ5DqIOhQrxtkcszN/giphy.gif?cid=ecf05e47yzd9cgsu3pzebujrmdl3od4erxhdtwozizzjx2nc&rid=giphy.gif&ct=g" alt="Hell Yeah Snl GIF by Saturday Night Live" style="width: 500px; height: 280px; ">
</div>