I have the following code for a bootstrap navbar:
.active:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #e96656;
bottom: 0px;
left: 12.5%;
}
But when i put it on, it displays a line under my list element, but also on the bottom of the screen. How do i fix this?
Use .navbar-nav li.active:before { ... } instead.
Related
Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)
What I'm trying to create is the cyan box. I hope the image kind of explains the idea.
SOLVED
Per Kees van Lierop answer I ended up doing the following:
&__label {
#include span-columns(6);
margin-top: 4rem;
background-color: rgba($color-secondary, 0.5);
color: white;
padding: $base-padding;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 9999px;
height: 100%;
background-color: inherit;
}
}
Giving me a nice result:
You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:
.cyan-box {
position: relative;
&:before {
position: absolute;
top: 0;
right: 100%;
width: 10000000px; // a large amount, long enough to reach the edge
height: 100%;
content: '';
display: block;
background: cyan;
}
}
I would like to change the videojs v5 controls layout in order to make a full width progress bar, on top of the vjs-control-bar area, similar to the pre-v5 player skin.
Here is the v5 skin:
And here is the pre-v5 skin. Notice the full width progress bar:
How should I proceed? Is it necessary to modify the component structure tree within the ProgressControl component or can it be done using CSS only, with the existing ProgressControl component?
I noticed that I can put it on top by changing the vjs-progress-control display CSS property from flex to block, initial or inline but I can't set the width to 100% (other ProgressControl components width are still considered). I assume it is because the vjs-progress-control is still in the flex flow of the container.
EDIT
I made some progress. I can achieve the desired effect by using the following CSS:
.vjs-progress-control {
position: absolute;
bottom: 26px; /* The height of the ControlBar minus 4px. */
left: 0;
right: 0;
width: 100%;
height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */
}
.vjs-progress-holder {/* needed to have a real 100% width display. */
margin-left: 0px;
margin-right: 0px;
}
Unless one of you find a way to make it better, I will post this edit as accepted answer when it will be allowed.
DEMO
.vjs-fluid {
overflow: hidden;
}
.vjs-control-bar {
display: block;
}
.vjs-control {
position: absolute;
}
.vjs-progress-control {
bottom: 28px; left: 0;
height: 10px;
width: 100%;
}
.vjs-progress-holder {
position: absolute;
left: 0; margin: 0;
height: 8px; width: 100%;
}
.vjs-play-progress,
.vjs-load-progress {
height: 8px;
}
.vjs-play-progress:before {
font-size: 12px; top: -2px;
text-shadow: 0 0 2px black
}
.vjs-current-time {
display: block;
left: 35px;
}
.vjs-time-divider {
position: absolute;
display: block;
left: 70px;
}
.vjs-remaining-time {
display: none;
}
.vjs-duration {
display: block;
left: 70px;
}
.vjs-volume-menu-button {
position: absolute;
bottom: 0; right: 55px;
}
.vjs-playback-rate {
position: absolute;
bottom: 0; right: 28px;
}
.vjs-fullscreen-control {
position: absolute;
bottom: 0; right: 0;
}
There's still need to style the subtitles, captions and chapter buttons
.video-js .vjs-progress-control {
position:absolute;
width: 100%;
top:-.3em;
height:3px;
/* deal with resulting gap between progress control and control bar that
is the result of the attempt to keep things "clickable" on the controls */
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-progress-holder {
position:absolute;
margin:0px;
top:0%;
width:100%;
}
This seemed to get rid of the problems I had across other browsers with the :hover styling inherited from video.js. More masterful css developers might be able to make the expansion a bottom-to-top expansion, negating the need for the fancy footwork around the position of the progress control and the color.
Here is a minimal custom skin (in scss) that shows a full-width progress bar above the rest of the controls. This works with video.js 5.19.2
.video-js.vjs-custom-skin {
.vjs-custom-control-spacer {
display: flex;
flex: 1 1 auto;
}
.vjs-time-divider {
display: inherit;
}
.vjs-current-time {
margin-left: 1em;
}
.vjs-current-time, .vjs-duration {
display: inherit;
padding: 0;
}
.vjs-remaining-time {
display: none;
}
.vjs-play-progress:before {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em;
&:hover {
height: 1.5em;
top: -1.5em;
}
}
.vjs-progress-holder {
margin: 0;
height: 100%;
}
}
Please review my Fiddle Sample.
Click on a calendar day with an event (orange square).
You'll notice that the date box, is at the bottom of the window.
In the stylesheet, there's a snippet like this...
.calendar *{
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical align: top;
behavior: url(pie/PIE.htc);
}
...the vertical-align: top; should bring that box to the top of the window, but it doesn't.
If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.
Not sure why this is... Thoughts?
I seems to be a height issue. Remove height: 100%; from .calendar .c-specific
.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}
This is the line you need to change:
.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/
behavior: url(pie/PIE.htc);
}
My nivoslider slideshow on my index page shows us correctly in chrome, IE 10 and opera.
Only in Firefox it shows us up on the right side.
Here is my site: http://www.colombian-emerald-jewelry.com/
How can I fix this ?
I appreciate your help
You can also just add float:left; to the nivoSlider class:
.nivoSlider {
float: left;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Positioning is the way I got it working, in both browsers try this:
Add:
.slider-wrapper {
height: 350px;
position: relative;
}
Edit:
.theme-default .nivoSlider {
background: url("loading.gif") no-repeat scroll 50% 50% #FFFFFF;
box-shadow: 0 1px 5px 0 #D3D3D3;
position: absolute;
}
.theme-default .nivo-controlNav {
bottom: 0;
clear: both;
left: 45%;
overflow: hidden;
padding: 0;
position: absolute;
}
In case anyone meets the same problem, but wants to avoid using float (it forces using clearfix if your slider is let's say above the main content of page), the clear: both works even better.
.nivoSlider {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
clear: both
}
I'm pulling in a tumblr feed using tumblr's code, and using after: to add an image as a separator between posts. I'd like to center the image, but haven't had luck doing so. Since tumblr's generating the content, not me, I don't think I can use span tags, which seems to be the usual answer. Any other ideas?
Page showing feed in use: lumn.net/index.shtml
CSS:
.tumblr_post:after {
content: url(../img/flower.png);
display: block;
position: relative;
margin-top: 42px;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
}
Try this:
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
margin: 42px auto 24px;
position: relative;
text-align: center;
width: 100%;
}
While the answer from Zoltan Toth works, it's got a bunch of code that does nothing for the desired effect. This should do the trick and with less code.
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
text-align: center;
}
Here is a working solution on all screens :
.produit-col .img-produit::after{
content: '';
background: url("../img/icone.png") center no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}