I'm super new to coding so apologies if this frustrates anyone!
I'm working on a Wordpress site and I'm trying to lay a video (actually a shortcode) over a jpeg, like this;
http://imagizer.imageshack.us/v2/617x176q90/540/OJCIR1.jpg
Then place a video thumbnail (that opens into a lightbox when clicked) on the grey area. Here's my HTML:
<div style="width: 640px; height: 480px;">
<img src=".../uploads/2015/01/watch.jpg" style="z-index:-1" />
<div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
</div>
</div>
And here's my CSS:
div.videodiv {
float: right;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}
As I'm sure you can tell I'm brutally savaging this code from tips found online.
Any help would be massively appreciated, and how do I insert code into these topics?!
Sorry!
Actually, it's better to set the image as background and then align the video to the place where you want it, something like this:
HTML
<div class="wrapper">
<div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
</div>
</div>
CSS
div.wrapper {
width: 640px; //Change it to image's width
height: 480px; //change it to image's height
background: url(.../uploads/2015/01/watch.jpg) #fff;
}
div.videodiv {
right: 20px; //distance from right border to gray rectangle border
top: 10px; //distance from top border to gray rectangle top border
position: absolute; //let total control of the position of the video
}
Use position: absolute; rule in the video and position relative in the image, and then play with the position right and top in the video
CSS EXAMPLE
div.videodiv {
right: 0px;
top:0px;
z-index: 999;
position: absolute
}
img{
position: relative;
z-index: 998;
}
Related
Using slick: http://kenwheeler.github.io/slick/
HTML
<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
</div>
CSS
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
Jsfiddle Demo
Tried to override, but the prev and next buttons stay stuck inside the carousel. Wanted to replace the css with button images and the buttons should be outside the carousel, just like the example on slick website. Couldn't figure where I went wrong.
Help appreciated!
UPDATE : $('.carsoule').slickNext(); won't work anymore.
Use $('.carsoule').slick("slickNext"); instead.
https://github.com/kenwheeler/slick/issues/1613
Looking at the css that this plugin uses, I noticed the parent has overflow:hidden applied to it, so your arrows wont show beyond the parents container.
You can mess with adding a extra overflow !important rule to the container, however, I've looked over at some methods that you can use to trigger next/prev slide, and turns out that you can call on your carousel to change slide, when clicked on a certain class/id outside of the carousel container.
So basically, after your carousel(or anywhere on the page if it helps you out), add two div/button/a/whatever tags, and add either a class or id to call upon the slider to change its slide using: slickNext() or slickPrev()
You can wrap everything in a master container, your carousel and those two extra tags and style them the way you want.
Check out the demo here, and the extra js/markup used bellow:
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
$('.carsoule').slickPrev();
});
UPDATE 2
If you want to keep your markup, and not add any extra stuff, you can either remove the inline overflow: hidden rule from the container, or via css with overflow: visible !important, and set those 2 arrows to position absolute, and work you way from there.
Check out the demo here and the css bellow:
/*extra stuff*/
.carsoule{
overflow: visible !important;
}
.slick-prev, .slick-next {
position: absolute;
background: red;
}
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('#portfolio-carousel').slick("slickNext");
});
$('.prev-button-slick').click(function(){
$('#portfolio-carousel').slick("slickPrev");
});
This should solve your issue,
CSS
body {
background: #d7d7d7;
}
.carsoule {
background: yellow;
margin: 0 auto;
overflow: visible;
width: 250px;
}
.slick-prev,
.slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
HTML
<div class="carsoule">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
</div>
The carsoule had overflow:hidden, so if you positioned it outside it was hidden.
The problem is the hover. Just add the block of code below to it and you'll be just fine.
.slick-next:hover,
.slick-prev:hover {
background-color: red;
color: white;
}
See working example here
You missed out the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css. I added this file and meddled with your codes and came up with this solution:
HTML
Re-styling your wrapper to include .slider class with proper margins:
class="carsoule slider"
Modified CSS
.slick-prev:before, .slick-next:before {
color:red;
}
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/plan to add button image/
}
.slick-next{
right: -80px;
/plan to add button image/
}
.slider {
margin:0 80px 0 80px;
width: auto;
}
I have this simple navigation bar and an image view underneath. I want the image view's height to be as heigh as the amount of space left without scrolling. If you get what I mean? I thought I could just set the height as 80% or something but nothing changes.
Structure:
<div id="page">
<div id="navigation"></div>
<div id="content-container">here's my image view</div>
</div>
I want the content-container's height to be what's left of the page. If I set my page 's height to 50% nothing changes either..
This is the website
Edit: found it:
body, html{position:absolute; height:100%;}
#page{position:relative; height:100%;}
#content-container{height:89%;}
try this
#navigation {
position: relative;
z-index: 10;
}
#content-container {
overflow:hidden;
position: absolute;
top: 70px; /* #navigation's height */
left: 0;
right: 0;
bottom: 0;
}
Newbie question here.
in my CSS i have a div with overflow hidden in which i am displaying images. Some images are tall (varying sizes) which poses a problem. wide images are ok when scaled down.
with the tall images my div is showing the image "head downwards" which is normal. however with my type of images the top is not so important (yacht mast and sails). is there a way i can display images in the div with the top cut off instead of the bottom?
Any ideas? Thanks Guys
Jay
You can try something like this:
.image{
height: 150px;
overflow: hidden;
position: relative;
}
img{
position: absolute;
bottom: 20px;
}
see this bin:
http://jsbin.com/muyoce/1/edit
in your css try
div.image_class{
overflow-y:hidden;
}
div.image_class img{
position: absolute;
top: 0px;
}
Try this HTML:
<div class="hide_top">
<img src="http://www.liveyachting.com/wp-content/uploads/2009/02/brenta-yacht-b60-4.jpg" alt="" />
</div>
and then apply this CSS:
.hide_top{width:50%; height:auto; max-height:400px; overflow:hidden; display:block;}
.hide_top img{width:100%; height:auto; transform: translateY(-50%); -webkit-transform:translateY(-50%); top:50%}
See fiddle here and play around with values
You could do a margin-top: -Xpx on the images and set up classes for each image size. For example
<div class="imgHold">
<img class="img400x800" src="..." />
<img class="img800x400" src="..." />
<img class="img400x400" src="..." />
</div>
.imgHold {
overflow: hidden;
}
.img400x800 {
margin-top: -200px; /* set to how much it needs to be offset */
}
.img800x400 {
margin-top: 50px; /* set to how much it needs to be offset */
}
.img400x400 {
margin-top: 0px; /* maybe this doesn't need any offset */
}
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)