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>
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.
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:
box-sizing.
calc().
display.
font short-hand.
margin.
Values and Units.
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
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>
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>
I have a page-wide wrapping div that has flexbox alignment to center:
.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.
Image: https://imgur.com/a/x00tnoJ
One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.
Image: https://imgur.com/a/0eZM5Iq
Don't think it is relevant, but I use React.
Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary
EDIT: I've stumbled upon a solution. I've added this and it solved all problems:
html, body{
display: grid;
}
If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
to
html, body {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
}
I am trying to make a responsive blog. Here is my code for my two halves:
.masthead {
background-color: $hot-orange;
float:left;
position: fixed;
height: 100%;
width: 32%;
#include mobile {
text-align: center;
}
}
.main-body {
float: right;
width: 68%
}
Here is the container that is wrapping both:
.container {
margin: 0 auto;
max-width: 1250px;
width: 100%;
}
Am I doing anything wrong? When I open the inspector and highlight both halves, it looks like the right half (the main-body) overlaps with the left slightly. I can't seem to find the issue.
Here is my repo
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
Live site.
Toward the bottom of the page "Parlour Policies" is floating in the middle of the page, though it should be styled according to this:
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
width: 600px;
}
Any ideas what's causing the location shift? I didn't see anything in Firebug, and the few validation errors(which I'm working to fix right now) all pertain the WP generated header and don't negatively effect any of the other <div class="content"> on different pages.
Just add overflow: hidden to .content - it will clear your floats
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
overflow: hidden; /* this */
width: 600px;
}