Hi I have a mediaelements.js video which I want to centre horizontally in its container div, this used to work but I have changed it so that the video is responsive. I am also using Slick on the videoPlayerSlideWrap (it slides through many of the videoPlayerSlide divs, although only one of them is a video the rest are images and the images centre themselves perfectly) so I don't know if slick is interfering with mediaelements.js or something. Thank you in advance.
The players code:
<div class="videoPlayerSlideWrap" id="contentSlide">
<div class="videoPlayerSlide">
<video width="100%" height="100%" style="width:100%; height:100%;" controls id="player1" preload="auto">
<source type="video/youtube" src="<?php print $storyMediaURL; ?>"/>
</video>
</div>
</div>
The CSS:
div.videoPlayerSlide {
width:100%;
min-width:580px;
max-width:940px;
height:529px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
div.videoPlayerSlideWrap.contentSlide {position:relative;}
div.videoPlayerSlideWrap {
width:100%;
height:529px;
margin-top:0px;
margin-left:0px;
background:#000;
}
EDIT:
Live link of the issue: http://www.umoja.org.uk/fullArticle.php?s=52
There is a conflict between slick.js and your CSS rules. Add the following CSS rule to your main.css, this should correct the problem.
div.videoPlayerSlide.slick-slide {
float:none;
}
Related
I have received one design from my designer and he wants to write CSS for him. I tried as below:
.o__header{
width: 1080px;
position:relative;
left:40px;top:135px;
}
.o--text{font-size:14px;color:#fff;position:absolute;top:-210px}
.o--head {font-size:40px;color:#fff;position:absolute;top:-310px}
.o--image {position:absolute;
top:0px;
left:0;
right:0px;
bottom:0;}
<div class="o__header">
<div small="6" medium="6" large="6">
<h1 class="o--head">Page Header Goes Here</h1><br/>
<p class="o--text">Small hep description here</p>
</div>
<div small="6" medium="6" large="6">
<img src ="img/img.PNG" style="max-
width: 100%;height:auto;" styleClass="o--image">
</div>
</div>
where small,large and medium are custom created mixins.
But this approach is not working great. I want it resposnive too. How to go about that?
below is the layout
I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
Here is the code:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}
I'm guessing I need to add something to my CSS? I know a solution would be to put the images as separate divs like this:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>
But I have next/previous arrows in my gallery so I need the images to be in the same div otherwise the arrows won't work.
I think the reason they are both appearing in the same place is because they are sharing the same css class, just name them differently with different top/left coordinates.
Let's say i have an iframe with the page 2.htm set as the src.
<iframe src="2.html"></iframe>
So this shows the 2.html. But 2.html has a div with the id 'within'. I want to only display the contents of 'within'.
How would i do this?
This is the CSS and html code to accomplish the task:
<style>
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
<div id="outerdiv">
<iframe src="2.html" id="inneriframe" scrolling="no"></iframe>
</div>
Try this out: http://jsfiddle.net/57MRn/
How does this work
The iframe is moved up within the outerdiv until only the within div is shown.
I started to design website using the 960 grid system everything works amazingly apart from the following
<div class="grid_1 pagelink prefix_12"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
<div class="grid_1 page"><p>3</p></div>
<div class="grid_1 pagelink"><p>4</p></div>
I need the above 4 links to be in a container, so that i can have a white background across all for boxes, so I am doing this:
<div id="somecontainer">
... the code above
</div>
I also tried
<div class="grid_4">
... the code above
</div>
But this does not work. If the above had worked I wanted to add this style:
#somecontainer{
background:white;
overflow:auto; /* I added this but not difference */
}
I hope you can help me fix this problem
thanks
Try This
#somecontainer{
width:960px; /* or 100% */
background:white;
overflow:hidden; /* I added this but not difference */
}