I'd like to implement a fly-in animation in CSS by having a particular block be scaled from 10 to 1.
However, if I apply the scaling, then a (horizontal) scroll bar appears:
https://jsfiddle.net/r2a5w7fo/15/
body
{
font: 10svw sans-serif;
text-align: center;
}
#zoom
{
color: gray;
scale: 3;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
This is a test line.
</p>
<p id="zoom">
This is a zooming test line.
</p>
<p>
This is a test line.
</p>
</body>
</html>
How can I keep scaling from influencing document flow? I want document scrollbars to behave as if scale always equaled "1".
Try to set a max-width property to the body
body
{
font: 10svw sans-serif;
text-align: center;
max-width: 100vw;
}
Related
I'm trying to create a grid with black boxes on the left and right side of the container, and a gray box in the center that contains different elements. The boxes on the left and right should have a width that's half of the container's height, and the middle item should stretch to fit it's content, but the entire container shouldn't be wider than the parent element. Here's what it should look like.
This is the HTML and CSS that I wrote:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
}
#container {
display: grid;
max-width: 100%;
grid-template-columns: min-content auto min-content;
width: fit-content;
}
#middle {
background-color: gray;
}
#left,
#right {
aspect-ratio: 1 / 2;
background-color: black;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="right"></div>
</div>
</body>
</html>
The code works as expected until I set the height of html and body to 100% like so:
html,
body {
height: 100%;
}
When I do this, the left item no longer appears on the page. Here's a screenshot of this. Oddly enough, if I set the margin of body to 0, then the left item appears properly.
I tried reordered the elements in #container so that #left and #right are the last elements in the container, and I used grid areas to force #left to appear on the left side.
/* Added CSS properties */
#container {
grid-template-areas: 'left-side middle-side right-side';
}
#middle {
grid-area: middle-side;
}
#left {
grid-area: left-side;
}
#right {
grid-area: right-side;
}
<!--Modified HTML-->
<div id="container">
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
This made the left item appear, but it overlapped into the middle container, cropping out the beginning of the text. This is what the result looked like.
I know that the problem is rooted in the aspect-ratio property because, if I remove it, and set the width of #left and #right to a value such as 400px, #left appears properly.
Does anybody know how can I make the grid appear properly? Is there perhaps another way I can achieve the same effect as the aspect-ratio property?
Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
In Chrome 72, Developer Tools show that the button has a height of 18px only. Why?
New Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
background: lightgray;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
Now the button height becomes 32px.
Why is the button height not honoring min-height without a background set?
Browser issue
First of all, I've made a Fiddle right here where you can try with different things/browsers.
button {
height: 32px;
min-height: 32px;
}
This seems to work.
Is it only you?
No, as remarked here by #Michael_B, it seems to be a "browser thing", not only with min-height but with height and more.
So first you have the W3C standards, which are a set of guidelines for browser makers. And then you have the browser makers, who are free to do whatever they want.
If you also try with a Safari browser it stays with the 18px, but not with Firefox.
I don't exactly know why it works for example setting a background and neither could find it, but in my opinion, with height: 32px; //same as min-height is a "cleaner way" of getting through this.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
height: 32px; /*Here you should put the min-height value*/
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
UPDATE 1
If you want to the button to have dynamic height (let's say 100%) to its parent, just do:
div {
height: 10px;
min-height: 32px;
}
button {
height: 100%;
}
If you see, as the button is height: 100%; to the div (its parent), setting min-height to it will work perfectly and your button could dinamically change its height.
You could also go for:
button {
min-height: 32px;
border: 0;
}
Otherwise please tell your specific case for what you want to achieve.
Hope it helped.
CSS Scroll Snap allows the browser to snap scroll to elements in a container. To apply the same logic to the vertical page scroll I found that it had to be applied to <body> rather than <html> (see below). This is not a major problem however it does effectively create a scrolling area out of <body> instead of using the window scroll.
Whilst this may seem fine it has a couple of side effects:
Window scroll functions can no longer be used in javascript
The rubber band effect on Apple browsers is less responsive and non existent in Chrome on Mac.
I wanted it to appear as native as possible therefore the only conclusion would be to apply it to <html> rather than <body>. Applying it this way however prevents it from functioning. If you apply it to both, it will render correctly in Safari but remains broken in Chrome and Firefox.
The issue is not because <body> creates a separation between the parent and child element as if another <div> is added in the hierarchy it will still function correctly.
Here is the functioning code but applied to <body> rather than <html>.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: 80vh;
font-size: 100px;
text-align: center;
line-height: 80vh;
color: #000;
scroll-snap-align: end;
}
Solve a Fiddle: https://jsfiddle.net/u8tsjven/
I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.
However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.
I would like to get the same behaviour in Safari as I can get in Firefox if possible?
The basic code I am using for this is:
<html>
<head>
<title>Print footer at bottom of a printed page</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height: 100% !important; }
#footer { height:25px; border-top:solid 1px #000;
position:absolute; bottom:0; }
</style>
</head>
<body>
<p>Some content on the page here</p>
<div id="footer">This should appear at the very bottom of the printed page</div>
</body>
</html>
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css" media="print">
html, body { margin: 0; padding: 0; }
body { height: 11in; width: 8.5in; }
#footer { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div id="footer">
This will always print at the bottom
</div>
</body>
</html>
Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.
This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Have you tried this version?
http://www.themaninblue.com/experiment/footerStickAlt/
I know it works in browsers, but not sure about print.
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough