I am trying to create a horizontal scrollable div containing images but not sure why the below code is not working .
Moreover the images in the div are getting displaying vertically instead of horizonatlly.
Can anyone ple help me understanding the problem here
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
</div>
Below is the css :
div {
width:400px;
height:550px;
border:thin solid black;
overflow-x:scroll;
overflow-y:hidden;
position:relative;
}
img {
width:350px;
height:500px;
}
because the display of <img> is display: inline;, you should prevent them breaking the line:
using:
div {
white-space:nowrap;
}
to do this
demo: http://jsfiddle.net/fish_ball/vrD6E/
div {
border: thin solid #FF0000;
height: 550px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
width: 400px;
}
img {
height: 500px;
width: 350px;
}
img:nth-child(2) {
border: 1px solid #FF0000;
position: relative;
right: -358px;
top: -504px;
}
img:last-child {
border: 1px solid #FF0000;
left: 724px;
position: relative;
top: -1000px;
}
http://jsfiddle.net/kisspa/99xr7/
Related
Suppose the following html and css code snippet:
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: 100%;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
I would expect the div to be resizeable, and in firefox, it is. However in webkit-based browsers such as chrome and opera, it isn't. If I replace the inner canvas with a div however, it works there too. So my question is: why does the canvas element in this case prevent the outer div from beeing resizeable? And how can I work around this?
it seems that the canvas is taking the mouse event preventing the resize. If you consider pointer-events:none on canvas it will work:
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: 100%;
pointer-events:none
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
To better illustrate, decrease the size of the canvas a little to avoid the overlap with the resize widget and it will also work:
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: calc(100% - 10px);
background:red;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
You can also play with z-index:
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
position:relative;
z-index:0; /* mandatory to create a stacking context and keep the canvas inside */
}
#inner {
width: 100%;
height: 100%;
position:relative;
z-index:-1;
background:red;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.
Anyone know how?
Disclosure: Copied from here with a few changes.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top: -1px;
left: -1px;
height: 80%;
width: 1px;
background-color: #fff;
}
<div id="holder">
<div id="mask"></div>
</div>
My suggestion would would be to create an overlay for your image that is 80% of its height.
.image-container {
position: relative;
width: 50%;
}
.image-overlay {
width: 100%;
height: 80%;
border-right: 1px solid #000;
}
.image-with-overlay {
position: relative;
}
Here's a working example: http://jsfiddle.net/dLk6xrvr/
I'm really stuck on this and would appreciate any direction.
I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.
See the design I am trying to code here: https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982
This is the base framework but I don't know where to go from here...
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
height: 216px;
width: 288px;
float: left ; /* <-- This does not work */
border: 1px solid blue;
}
.image {
height: 250px;
width: 350px;
float: left ; /* <-- This does not work */
border: 1px solid grey;
}
.box2 {
height: 216px;
width: 288px;
float: left; /* <-- This does not work */
border: 1px solid red;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">-- Should I use a div for the image?</div>
<div class="box2"></div>
</div>
Try this it would have worked a bit more better if position:absolute is used but since you wanted float there will be re sizing problems Fiddle
Zoom out to get the effect
.row-container {
width: 100%;
height: 300px;
margin: auto;
text-align: center;
position: relative;
}
.box1 {
position: relative;
z-index: -1;
background: green;
height: 216px;
width: 288px;
float: left;
}
.image {
margin-left: -80px;
background: red;
float: left;
height: 250px;
width: 200px;
}
.image img {
width: 300px;
}
.box2 {
position: relative;
z-index: -1;
float: left;
background: blue;
height: 216px;
width: 288px;
}
<div class="row-container">
<div class="box1"></div>
<div class="image">
<img src="http://placekitten.com/300/301" />
</div>
<div class="box2"></div>
</div>
You can do it without floats using position: (colors added for emphasis)
fiddle
.row-container {
width:900px;
height:300px;
margin:auto;
text-align: center;
border:2px solid black;
background-color:blue;
position:relative;
}
.box1 {
height:216px;
width: 288px;
left:0px;
position:absolute;
z-index:10;
}
.image {
height:250px;
width: 350px;
position:absolute;
top:20px;
left:275px;
z-index:100;
background-color:red;
}
.box2 {
height:216px;
width: 288px;
right:0px;
position:absolute;
z-index:10;
}
div{
background-color:green;
}
You can use z-index on position: relative, so add that to your inner elements and set the z-index.
To create the overlap you can use a negative margin-left on the second and third elements.
I am trying to place a box along side each image on my webpage that will scroll down with the page but only inside the confines of the post/image, like can be found at memecenter, but i am having some difficulties.
I have set the parent div (post) to position relative and the child div (scrolling box) to position absolute, and they are nested within each other in the html but the child div wont scroll it still stays static on the page.
See code here:
.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
}
and html:
<div class="parent">
<div class="child">
</div>
</div>
You can use "top" and "left" values.
Css Part:
.parent {
position.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
left: 100px;
top: 10px;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
float: left;
}:
Html part:
<div class="parent">
<img src="img.png" width="100px">
<div class="child">This is image description</div>
</div>
Css :
.parent
{
background-color:Blue;
position:fixed;
width: 150px;
height:200px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow:hidden;
}
.child {
background-color:red;
position: absolute;
width: 460px;
height: 220px;
float: right;
margin-left:150px;
overflow:scroll;
}
and html:
<div class="parent">
</div>
<div class="child">
</div>
Please find a working fiddle.
http://jsfiddle.net/Victor_AJ/8GS7b/13/
CSS :
.parent {
background-color:Blue;
position:fixed;
width: 70%;
height:100%;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow-y:scroll;
overflow-x:hidden;
}
.child {
background-color:Grey;
position: absolute;
width: 30%;
height:100%;
float: right;
margin-left:70%;
overflow:hidden;
}
And Html :
<div class="parent">
</div>
<div class="child">
</div>
Find a Fiddle Here Working EX
Hey guys I got an image which is half faded out and when you hover over it, it will fade into the screen. I also have a box which i made so when you hover over that it will change color. However the problem is if i make the box go around the image the only thing that works is the box changing color, so its overlapping the other image. Anyway to fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
<style>
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
top: -550px;
left: 740px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
top: -650px;
}
.border:hover
{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="meh">
<img src="http://lorempixel.com/50/50" alt="meh">
</div>
<div class="border">
</div>
</body>
</html>
Why is there top: -550px; values are given??
I have removed those values here.
Method - 1 (to get the hover effect for the entire divs)
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
}
.border:hover
{
border: 1px solid red;
}
DEMO
Method - 2 (To give separate hover effect for both the div )
Just add display:inline to .meh
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px; display:inline
}
DEMO
Let me try...
<style>
.meh
{
z-index: 500;
width: 200px;
height: 200px;
text-align: center;
}
.meh img {
margin-top: 50px;
opacity:0.5;
filter:alpha(opacity=40);
}
.meh img:hover {
opacity:1.2;
filter:alpha(opacity=100);
}
.border {
z-index: -1;
background: transparent;
position: absolute;
top: 0;
height: 200px;
width: 200px;
border: 1px solid black;
}
.border:hover{
border: 1px solid green;
}
</style>
I don't know if this is the style you are trying to achieved. I've changed your css since your approach is to perform the ":hover" selector on the elements image and div.box. I haven't really tried performing in css two hovers at the same time. I would suggest you do it on jquery or javascript if you'd like.
You can try this out and comment your css.