I'm attempting to add some basic styling to the ::cues from a WebVTT in a <video> element. The specific problem is with the line-height, or rather the line spacing - which seems to scale depending on the size of the <video> element.
The ::cue pseudo-element only allows a small subset of CSS properties, of which line-height is one of them. Using this I can define a font-size and line-height, but the line-height seems to be ignored.
Here's some basic CSS:
video::cue {
font-size: 14px !important;
line-height: 20px !important; // or calc(1em + 6px)
background-color: rgba(0,0,0,0.6) !important;
}
The font-size and background-color styles appear to work as expected. Though when the viewport is shrunk, the font-size starts to scale down to fit in the <video> element.
The line-height is mostly disregarded, with multiple lines being spaced according to the size of the video element. Here are some screenshots showing the <video> element at various sizes.
I have tried styling the ::cue with CSS in the document, and as a ::cue style within the .vtt file.
At small sizes the lines begin overlapping, aand at larger sizes the lines are spaced far apart.
Is there a way to consistently style the ::cue elements so the line spacing stays consistent as the <video> element is scaled up/down? Meaning the line spacing would be a constant X pixels?
Note: I'm only need this to work in Chrome.
Related
Slimbox is working perfectly for me with one exception... my slideshows often open way to low. The positioning is effected by any scrolling already done on the page. Every time the page is scrolled a bit, the slideshow opens lower than it had previously for the same page. Scroll down the page much and the show can be completely out of sight.
lbCenter and lbBottomContainer in the CSS control the positioning, but I can't find how to adjust them accurately. The default is:
#lbCenter,
#lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
In an old thread here, I found suggestion for adding:
top: 30px !important;
As long as !important is included, this does work but with a significant caveat; the caption is moved from below to above the image and covers some of it. ( And !Important doesn't seem like an ideal solution )
How can I adjust the positioning of both while keeping the caption below the image?
This one was on me. My links included href="#" as some others required. The # caused the page to scroll to the top even as the slide show opened where the link was located.
<a href="#" onclick="show('homes')">
Eliminating the hash tag resolved it.
See this pen:
https://codepen.io/armandsdz/pen/xqGaoe
I have a simple Foundation grid and I set display:flex to "row" element in order to get all columns be the same height.
It all works fine in Chrome, Firefox.
But on Safari, Edge, Yandex browsers (any version) those columns are a pixel or so too wide and it results in them not fitting within one row. Therefore, it wraps to two rows.
See image
Setting flex-wrap: nowrap would be an option in case of only one line but it's often not the case.
And most importantly it doesn't solve the issue at its core.
What am I missing in this flexbox world or is it a bug?
Thanks!
Addition: It happens not only when column width is, for example, 33.33333% but also when it's 25%. So where does that extra pixel come from?
The :before and :after pseudo-elements are part of a clearfix hack to contain floats and prevent margin collapse. (See this SO question about that.) Flexbox essentially disregards floats, but older browsers that don't support flexbox would fall back to using the floats so they would need the clearfix. Based on #DannieVinther and #Armands' comments, there are two possible solutions:
If you want to maintain the clearfix functionality for older browsers that don't support flexbox, you can add a rule to set width: 100%; on the :before and :after pseudo-elements. This will give the pseudo-elements a width of 100% and a height of 0, so they won't mess with the width of the rows of actual content.
.row:before, .row:after {
width: 100%;
}
If you don't need/care to support older browsers, you can simply override the clearfix hack by adding a rule to set content: none; on the :before and :after pseudo-elements.
.row:before, .row:after {
content: none;
}
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
I am using Pelican for generation of web pages. However I cannot avoid overlapping of code blacks with the menu list this way.
This the concerned code piece
General
Start by reading
The Zen of Python <https://www.python.org/dev/peps/pep-0020/>_
.. sourcecode:: python
import this
For python we have pocket-lint that checks for PEP8 and some other things.
Try the following:
#general .highlight {
display: flex;
}
#general .highlight pre {
width: 100%;
}
The display mode flex allows the contents to rearrange in size and position. By setting this, the bounding box of the surrounding div is pushed to the right, such that background color and border are not overlapping anymore. However, due to the flexible nature of this display mode, the width of the content is reduced to the minimum required. This can be compensated by simply maximizing the width of the element.
I have a background which cycles through images, these images have no fixed sizes.
My problem is that I cannot find a simple responsive frame for re-sizing images which are dedicated background images. There are plenty of plugins for normal images on websites.
The background of my website always has to have the image displayed.
cropping is allowed, is allowed the image must re-position itself in the center of the web browser.
jQuery or #Media is allowed, I don't really mind.
My images and div look like this:
<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
A lot of the plugins out there set width to 100% and the height to auto. This will not work as if the browser width is, let's say, 200px and browser height 800px. The image will not cover the entire screen and keep it's aspect ratio. There will be a "gap" under and above the image, so in this case, the height should be 100% and width changed to auto. And of course the other way around if the browser height is 200px and browser length is 800px;
Example of what I want: http://www.martinlogin.se/
You're asking for two different scenarios to be applied depending on screen aspect. This can be done with media queries, but you'll need to settle on some widths and heights.
Start with width-based sizing:
#backgroundDiv {width: 100%; height: auto;}
When the site is narrower than some point, switch to height-based sizing:
#backgroundDiv {width: auto; height: 100%;}
You'll need to decide where the transition takes place based on your expected audience's most likely screen size/aspect scenarios, the images you're using, etc.
To have even more flexibility, say for particular aspect ratios instead of widths, you'll need scripting.