This question already has an answer here:
How to handle animations + automatic container size
(1 answer)
Closed 8 months ago.
Ive got a typewriter effect which prints a welcome headline with. So in the <div id="h1-id"></div> is
<h1 class="typewriter headline-welcome">Good Morning Admin.</h1>
created.
My problem is, that the headline container expands too whide, that the right border (border-right: .15em solid white;) is printed far away from the welcome headline. .
Ive tried to give it the display: inline property, but than the animation wouldnt start and is instantly expanded
I hope somebody of you might know why it expands at "maximum" width.
Im still pretty new to all this css and html so I hope to get some help here :D
css:
.typewriter {
overflow: hidden;
border-right: .15em solid white;
white-space: nowrap;
animation: typing 2s forwards;
font-size: 1.6rem;
width: 0;
}
#keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
html
<body onload="welcome('#User.Identity.Name')">
<div id="main" class="container">
<div id="h1-id"></div>
</div>
</body>
It's because divs are block elements by default: they will take up the entire width of the screen and push everything else to the next line.
You can make the div shrink to the width of it's contents by using
width: fit-content;
Moreover, h1 is also a block element by default, so animating it to width:100% is gonna make it take up the whole screen.
Change the keyframes to this:
#keyframes typing { from { width: 0 }
to {
width: fit-content;
}
}
And add width: fit-content; to your div as well.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I've been using relatively positioned elements to center things vertically for a while. I never understood, though, why position: relative; top: 50%; doesn't vertically center the element, or at least center the top edge of the element in it's container div.
position: relative according to MDN:
lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing layout
The top keyword:
specifies the amount the element is moved below its normal position.
And a % value on the top keyword:
Is a percentage of the containing block's height
So a relatively positioned element with a value of top: 50% should be moved 50% of the containing blocks height downward, right? Doesn't this mean that the top edge of that element is exactly in the middle of the containing element?
Consider this snippet:
.container {
overflow: hidden;
width: 90%;
height: 90%;
margin: 0 auto;
background-color: #eee;
}
.child {
width: 40%;
height: 40%;
margin: 0 auto;
background-color: #444;
border-top: 5px solid #f00;
}
.top-50-percent {
position: relative;
top: 50%;
}
.contract-and-expand {
animation-name: contract-and-expand;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes contract-and-expand {
50% {
height: 0%;
}
}
<html>
<head>
<style>
/* Just initial/basic CSS rules here to make this look better */
#import url("https://necolas.github.io/normalize.css/latest/normalize.css");
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
body {
color: #aaa;
}
.center-vertically {
position: relative;
top: 50%;
transform: translateY( -50% );
}
p {
position: absolute; /* Remove paragraphs from flow so they don't interfere */
}
</style>
</head>
<body>
<div class="container center-vertically contract-and-expand">
<p>Container Wrapper</p> <!-- Paragraphs are removed from the flow -->
<div class="child top-50-percent">
</div>
</div>
</body>
</html>
From the snippet it looks like the top edge is centered. Is this always correct? there's this similar fiddle: https://jsfiddle.net/9kyjt8ze/5/ when the height of the viewport is pulled up the top border of the child element no longer looks centered.
I measured this with Inkscape and 2 ( yellow ) vertical blocks the same exact size. It's an optical illusion. The top edge never actually gets off center in that fiddle. Also all of my assumptions appear correct: top:50% on relatively positioned elements moves the top border of that element down 50% of the container's height. The reason this doesn't perfectly vertically center the element is the top edge is the pivot point when using top: 50% on relatively positioned elements.
I would like to know how can i make the "scroll to the top upon hover" feature found in this website : http://www.creativespad.com/free-divi-layouts/
If you hover on each grid the image will scroll slowly to the top and stop there.
I already found an answer to this on stackoverflow.com
Auto scroll image taller than container on hover
But what i need is that answer without Javascript. In the above link there is a non-javascript answer but have no idea how to modify it for my long image. (see image below)
http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg
I dont want javascript cause I am using divi theme and I have no idea where to place the javascript.
I am newbie btw. Thank you soo much for you help
Let me answer your question.But first you need the javascript to know the height of the image. To answer the question "how many pixels will you scroll?". But let's assume you know the image height or you will use a same size images. In this case the key of the solution is to use parent element 'div' with relative position and hidden in overflow child element 'img' with absolute position, 0 top pixel and transition property on the top. Then add hover effect on the child in your case the image with top value "image height - parent height" . you can see the jsfiddle
here is the HTML :
.img-wrapper
{
overflow: hidden;
position: relative;
float: left;
height: 300px;
width: 400px;
border:5px solid #BBB;
border-radius: 5px 5px 5px 5px;
}
.extrem-height-image
{
position: absolute;
top: 0;
width: 400px;
height: auto;
transition: top 5s ease-out 0s;
}
.extrem-height-image:hover
{
top: -300px;
}
<div class="img-wrapper">
<img class="extrem-height-image" src="http://placehold.it/400x600"/>
</div>
Good luck
If you want let img auto scroll, you must set a wrapper with specified width and height! It's not necessary to set width/height for img itself
.img-wrapper{
max-width:80px;
max-height:80px;
overflow:auto;
background:red;
}
<div class="img-wrapper"><img src="http://placehold.it/100x100"></div>
I have a div, well, 2 div's and when I hover over the "main" div, I want the hidden div to appear (located inside the main div) and then pop its bottom out to stretch to fill the remainder of the bottom half of the screen.
An example would be:
I'm not asking for anyone to write code for me. I would very much appreciate any links/resources you might have that could point me in the right direction. I've been at this for hours, and I don't want to have a completely broken-up layout just to achieve this effect, but I'm just not able to get it.
I have tried this and many variations of it with no success:
HTML:
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS:
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 75px; height: 100%;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: relative;
height: 100%;
visibility: visible;
}
Well, I've got some good news and some dumb news.
The dumb news is that for all intent and purpose, it's approximately 137% impossible to use nothing but CSS to specify that an object take up "the rest of the height", without using some sort of hard-coding, even if that hard-coding is in percentages.
Even using what was supposed to be the magic bullet ( calc() ) in CSS wouldn't be guaranteed to work, because you can't necessarily do a calc which says "based on the current scroll-position, and the relative position of the top-edge of my parent, and the remaining pixels to the bottom of the screen, set my height to THAT".
Any CSS-only solution that I gave you would fall short by:
only stretching to 100% of the parent's height
stretching to 100% of the page's height (including going up)
would require a guarantee that your parent isn't going to move up or down, at all (no scrolling), or that when the pop-out comes, the user won't be able to scroll until the pop-out goes away (or would look at home if the pop-out stayed stuck on-screen, in the same spot while a user scrolled up or down)
There's the bad news.
The good news is that this isn't a particularly difficult fix in JavaScript.
You'd want to use getBoundingClientRect on the pop-out, and use the .top property of the returned object, to figure out what your top edge is.
Then you could use your document.body.scrollTop and window.screen.height to figure out where you are, in relation.
ie: childEl.getBoundingClientRect().top - document.body.scrollTop should equal where you are onscreen. Subtract that from window.screen.height and now you know how tall you need to be to hit the current bottom-edge (which could still be scrolled past).
This is not a bulletproof, cross-browser solution.
But it's a starting point.
Also, I'd suggest that you use display:none, rather than visibility:hidden. The difference is that if you set the child to be width:200% it's going to give you a big, ugly scrollbar off the side of the page, even though it's invisible. visibility:hidden still pushes stuff, even if it's just pushing the edge of the page off to the side.
display:none hides the stuff, but also stops pushing everything.
Sort of like the difference between The Invisible Man and a ghost, trying to squeeze onto a packed subway car.
I think you are looking for this....
HTML
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 150px; height: 100%;
opacity: .7;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: absolute;
height: 98.5%;
visibility: visible;
left:260px;
}
#main:hover
{
width:400px;
}
DEMO
I hope this may help you.....
After a few more attempts using JSFiddle, I am finally satisfied with the result.
HTML:
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS:
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 75px; height: 100%;
opacity: .7;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: absolute;
height: 98.5%;
visibility: visible;
}
I've got a question concerning webkit marquee. I've got 2 elements of a variable width. (The 2 elements are the same width), and both elements need to be a marquee.
However when the content has overflow (is larger then the element) I need a marquee, if not the text should remain as it is (no scrolling).
I've created a JSFiddle as an example:
http://jsfiddle.net/Vxwed/:
The long and short both need to be marquee'd through CSS3, while the long should scroll and the short one doesn't.
<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>
Remember, the contents of the elements are variable (filled with javascript), so I cant do actual hardcoding on the elements marquee-behaviour.
Any CSS experts here able to help me? I've been researching this a lot but there is little information about this subject, since it's relatively new.
The only solution that I'm able to think of right now is using jQuery to measure the width of the elements, and then calculate if they need extra spacing. If they need apply marquee, else don't. But that doesn't seem very clean to me, I'd rather do this in HTML/CSS only if possible.
This probably doesn’t do exactly what you want but it was a good problem to look at: http://jsfiddle.net/4hgd8ac1/
It uses CSS animations to animate the transform: translateX percentage as this is based off the width of the element itself. This means we can scroll an element it’s full width left. By then giving the marquee a minimum width we can standardise the shorter text lengths. Then we use calc(100% + 100px) move the item 100% left except the width of the carousel (100px).
It doesn’t quite have the traditional marquee feel with the text scrolling fully but using the animation keyframes it is possible to pause at the end of the text to give the user time to read.
p {
height: 30px;
width: 100px;
background-color: #CCC;
white-space: nowrap;
}
.marquee {
overflow: hidden;
position: relative;
}
.marquee__content {
padding: 5px 0;
margin-right: 100px;
position: absolute;
height: 20px;
animation: scroller 3s linear infinite;
min-width: 100px; /* This needs to match the width of the parent */
}
#keyframes scroller {
0% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
20% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the end for 20% of the time */
80% {
/* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
transform: translateX(calc(-100% + 100px));
}
100% {
transform: translateX(calc(-100% + 100px));
}
}
<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
100% width bg images not extending on horizontal scroll
I have been struggling with this issue for quite a while. I am building a very basic web application for travel agents, but to give some lay-out we've decided to have a banner with 2 colored sub-banners. The issue is that if I have a resolution of say 1366x768 (px). The banner will naturally fit to the screen resolution if the CSS is correct. This is indeed the case and the 2 colored banners fill up until 1366px.
There is; however a table that is larger than the screen resolution, so once I scroll to the right, I see that my colored sub-banners don't continue at all and are just plain white. Is there any way to make the colored banners continue even after the edge of the screen?
I have included the HTML and CSS code for you:
HTML
<div class="banner">
<span>- ETTA (Electronic Transactions for Travel Agents)</span>
<div class="orangeBanner" />
<div class="blueBanner" />
</div>
CSS
.banner img {
vertical-align: middle;
}
.banner span {
font-size: 30px;
}
.banner .orangeBanner {
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
font-variant: small-caps;
background-color: #f18b02;
}
.banner .blueBanner {
/*Layout*/
display:inline-block;
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
margin-bottom: 5px;
/*Style*/
font-variant:small-caps;
color: #ABD5DF;
background-color: #009DE0;
}
Thanks a lot for your help!
Best regards
As Andy said, <div> elements are not self closing so you should add closing tags to them properly.
If overflowing tables is a problem, just setting a max width should fix that.
e.g
table {
max-width: 100%;
}
The comments you got has some really useful information.
Another quick fix would be the following, making <div class="banner"> always take up 100% of the width and not scroll left and right.
.banner {
width:100%;
position:fixed;
left:0;
}
It might however mess up some relatively positioned elements.