I wanted to implement a typewriter effect in CSS and I found this great article in CSS Tricks
I was tinkering around with it and wanted to see if I can implement what would be on a hero image, shown here in Codepen
However, you can see that the blinking goes all the way to the end.
Is there way to fix, or this unavoidable, since the display it's set to table-cell?
You can try that. Remove fixed width from intro container and give this into description. And for centering you can add margin: 0 auto into intro.
#intro{
display: table;
height: 100vh;
margin: 0 auto;
.intro-description{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
}
Codepen: http://codepen.io/anon/pen/WGydqj
The closest I got was by changing your typing keyframe.
#keyframes typing {
from { width: 0 }
51%{border-right:transparent;}
100%{border-right:transparent;}
to { width: 100% }
}
You can hide the cursor from going all the way off but I'm not sure it looks quite right because it takes awhile for the bink/cursor to reappear at the end of the sentence. There are also some responsive issues with this because smaller screen sizes the blinking will disappear too early, the opposite problem... If this solution works for you but you still need it resposive, then you'll need make multiple keyframes and apply them through mq...
That being said, this is really cool. I didn't know you could do a pure css typing effect. I thought the only way to do this was with heavy DOM manipulation like they use in typeWriter.js which may still be a viable solution for you as well if the pure css trick doesn't work out.
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
I am trying to have 8 images floated by each other with
width: 25%;
float: left;
Here is a fiddle:
https://jsfiddle.net/y06z0em1/
If you resize the section that the images are in, you will see that there are times when it breaks because some of the images are off by a fraction of a pixel. Could I ever change make it so that every pixel always rounds up or down?
Thanks!
Browsers round fractional pixels automatically and this is browser specific, some round it up, some down; There is no way to force it to do one or the other with CSS.
A solution could be to work with LESS, there are functions for that (ceil, floor).
But if you need a solution with CSS I would just suggest define the width as calc(100% - 0.5px) / calc(100% -1px) or 99.9%. That's just not perfect, but a solution. You can adjust it as you like and as it works for you.
But I'm not sure your problem comes from that.
Take a look at the following fiddle and tell me if it solves your problem. Instead of floating I use a layout based on display:inline-block here, and it seems like there is not such a problem.
https://jsfiddle.net/a693yj52/
I'd recommend using Flexbox here.
It'd look something like this:
.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
flex-basis: 25%;
height: auto;
}
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I'm worried that the short answer to this question is NO.
But before I accept this fate I'll attempt a last ditch effort.
Usability concerns aside, is there any way I can do a div overflow for webkit mobile where, when scrolling, I do NOT see the scroll indicator?
I'm really hoping to avoid building a custom scroller in plain JS just because apple insisted on forcing the indicator to always be visible.
Any pointers much appreciated. I've looked around a lot but found nothing useful.
Reminder: I'm not asking about scroll bar customization!!! I'm asking about the indicator that shows during touchmove.
I think you can use this code. But this will only work in Chrome and Safari.
#element::-webkit-scrollbar {
display: none;
}
Technically you could do this in Chrome and Safari using the following CSS:
body::-webkit-scrollbar { display: none; }
However, for all other browsers you'll need Javascript. The basic algorithm would be as follows:
HTML
<div id="container">
<div id="content">Hello, here's lots of text...</div>
</div>
CSS
#container {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#content {
position: absolute;
left: 0px;
top: 0px;
}
JAVASCRIPT (pseudo-code)
When clicking on #content, check for drag
If dragging then measure amount and invert amount
Set that amount to top position of #content
Keeping with my tradition of answering my own question after extended research, the indicator can be hidden only by removing -webkit-overflow-scrolling:true CSS attribute.
This, unfortunately, also removes the spiffy scroll-elasticity feature, which is of course whey one would want to use the above CSS.
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)