I'm having trouble with a slick.js display. The "next" arrow is displaying on the left side and doesn't seem to respond positionally when I adjust the right attribute. The "prev" arrow is displaying fine and, as far as I can tell, is being loaded the same way. My dev site is here.
Here's my CSS for this section:
#front-page-slider, #front-page-slider .slide {
min-height:500px;
}
.width-fixed {
max-width: 1200px;
margin: 0 auto;
}
.slider-container {
position:relative;
}
#join-widget {
position:absolute;
text-align:center;
width: 100%;
bottom: 0;
}
#gform_wrapper_3 .gform_heading {
display:none;
}
#join-widget form {
display:flex;
justify-content:center;
}
#front-page-slider .slick-prev {
left: 10px;
}
#front-page-slider .slick-next {
right: 10px;
}
Your CSS for slick.arrow (in the file theme.min.css) includes left: 10px. To override this, include in your slick.next class the value left: auto.
#front-page-slider .slick-next {
right: 10px;
left: auto;
}
Related
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.
What would be the correct way to do this? I feel like I'm going down the wrong path.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/
Is this what you are looking for? If so its just some quick changes in your CSS:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
I updated your js.fiddle here.
It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.
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%;
}
}
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
I am working on a pure oocss approach to creating the charms as found in Windows 8. I have the Dock class finished, but am having problems with figuring out how to "expand" the charm when the mouse is moved over a docked area. I know there are ways to hide content but have the browser respond to the :hover event of Charm. If you have any ideas, let me know.
Dock
Docks content to the edge of the screen.
.dock
{
position: fixed;
height: auto;
width: auto;
}
.dock--top
{
width: 100%;
top: 0;
}
.dock--bottom
{
width: 100%;
bottom: 0;
}
.dock--left
{
height: 100%;
width: auto;
left: 0;
}
.dock--right
{
height: 100%;
right: 0;
}
Charm
Island containing the content.
.charm
{
padding: 24px;
}
.charm:hover
{
}
Html
<div class="charm dock dock--right">
</div>
I tried padding it and setting the width to 1px but had no luck. On my original plan I would have applied the background-color when the move moved over it so it did not render a line going down the side of the screen.
This is as close as I have gotten but its ugly:
.charm__body
{
width: 0;
visibility: collapse;
}
.charm:hover
{
background: blue;
}
.charm:hover .charm__body
{
width: auto;
visibility: visible;
}
You can make a transparent div, positioned absolutely, and make it work as a hover trigger.