I want to create a slideshow that consists in 5 images and I want to have a big one in the middle with 2 buttons and 4 behind them, in this way(the first one is 1, the second one is 2, the third one (the biggest) is 3 and so on...): http://imgur.com/P9EpTcq
(the dotted line is behind the solid line). I hope you understand what I'm saying.
Cosidering this simple HTML markup:
<div class="slideshow">
<img href="#" class="ssimg" id="1"/>
<img href="#" class="ssimg" id="2"/>
<div class="big-ssimg">
<img href="#" class="ssimg" id="3"/>
<div class="previous-bttn"></div>
<div class="next-bttn"></div>
</div>
<img href="#" class="ssimg" id="4"/>
<img href="#" class="ssimg" id="5"/>
</div>
*I want the two divs inside .big-ssimg to be equal 1/4 of the parent each, the .previous-bttn to be the fist 1/4 of the .big-ssimg div, and the .next-bttn one to be the last 1/4 of the parent.
Considering this, how can I obtain it? I can handle js and other things, also I know how to use z-index, but not so much "position" and "display" css properties, I just need to know how to place them in that way:
img#1 and img#5 behind img#2 and img#4, img#2 and img#4 behind img#3
The next and previous buttons to be first and the last 1/4 of parent and to be over the image that represent 100% height and width of parent div.
To stack them, you will set the position to either relative or absolute in order for z-index to work. Be sure to apply the positioning to all elements that you want to stack.
Typically I use Absolute position on all layers within a container div that is set to position:relative. This allows you to use the container to position the whole stack and the layer divs will be positioned relative to the container instead of the body.
.container{
position:relative;
}
.layer1, .layer2 {
position:absolute;
top:0; //position the layers to the top left corner of the container
left:0; //position the layers to the top left corner of the container
}
.layer1{
z-index:100;
}
.layer2{
z-index:200;
}
<div class="container">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
Related
I've been trying to fix this layout problem for an hour or so with no luck. I simply want my li to expand to match the height of its contents, so that margin-bottom will work correctly. Here's my code (note: this is just a draft, so the relevant CSS is mixed in via style attributes):
<!-- This uses ASP.NET markup syntax but should still be legible to anyone -->
<h2>Related</h2>
<ul class="list-unstyled owner-list">
#foreach (var package in Model.RecommendedPackages)
{
<li style="position: relative; word-break: break-all; height: auto;">
<a href="#Url.Package(package.Id)" title="#package.Id" target="_blank">
<img class="owner-image" aria-hidden="true" alt="" width="32" height="32"
src="#(PackageHelper.ShouldRenderUrl(package.IconUrl) ? package.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
#ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/default-package-icon-256x256.png"))
/>
</a>
<div style="display: inline-block; position: absolute;">
#package.Id
</div>
</li>
}
</ul>
Here are the results:
Here are the dimensions of the div inside the li:
Here are the dimensions of the li, which is clearly shorter than its child div:
I tried using height: auto; to fix this (as you can see in the picture) but it didn't work. Am I doing anything wrong?
It's because you have an absolutely positioned element inside of a relatively positioned element. When you have an absolutely positioned element, it doesn't take up any visual space inside the containing non-statically positioned element.
An absolute element is an element positioned relative to it's nearest non-static ancestor.
So, if you have a fixed, relative, sticky, or another absolute element ancestor (outer element), the inner element won't take up any space there.
The li element gets the 32 px height from the image inside, since li will automatically be the height of the contents, and additionally, it is explicitly (and unnecessarily) set to auto.
What you describe as the desired affect is the default. The height of the outer element will automatically fit the contents. The solution is to either put no position, and that will default or explicitly set position to a attribute that does take up space in its ancestors (static, relative, etc.).
I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div
I can't find a way to synchronize two divs, with the same text, but different text size and padding.
I have two divs, one with a markdown text, and the other one with the html render of the markdown and I want to synchronize the scrollTop between the divs.
For an example, look stackedit.io
You can see the example of synchronizing two divs at: JSFiddle
HTML
Given you have two divs placed next to each other horizontally. Each of the divs contain another div and it is scrollable vertically:
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
CSS
This is just to make two outer divs lie next to each other at the same baseline and make it scrollable vertically.
div.outer
{
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div
{
width:100%;
height:3000px;
}
JavaScript
The simplest approach is, bind scroll event to each of the outer divs, take the scrollTop value and apply to its counterpart div as follows:
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
So when you scroll on the left div, it synchronizes the right div, and vice-versa.
I have a div that I want to always move such that it is stuck to the top of the page. Let's just say that I cannot use position: fixed;
I originally used $(document).scroll(function(){}) to move the div with the scrolling. But this makes the site extremely slow after 10 seconds of scrolling.
My current solution is to use setTimeOut() to prevent multiple calls. However, this causes a delay, and the div only sticks to the top of the page once I have stopped scrolling.
Is there a way to get the continuous smooth moving of the div without killing my speed?
EDIT:
I have the following code:
<div id="outerDiv">
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
</div>
So .outerDiv has a fixed width, and there are many .div, such that outerDiv has overflow-x: scroll. If I use position: fixed on .fixed, then they will not show up properly. I want each .div to be like a column, with the heading of each column to move down
How about using two different divs. One containing the fixed content, and one containing the content which should be scrollable?
So you don't scroll within the document itself but only within the second div?
Or... use position:fixed
I have two elements; input field and div - one next to another. Div is absolute positioned inside the relative element and positioned to the right of the input.
Input has fixed height, but div's height depends on the content.
What i would like to achieve is to middle vertical align div next to input. I am not sure if this is pure CSS possible, so thats why i added the javascript tag.
HTML:
<td>
<input type="text"/>
<div id="rel" style='position:relative;'>
<div id="content">
content
</div>
</div>
</td>
CSS:
#content {
position:absolute;
left:30px;
}
...
Just use
td input {
vertical-align:middle;
}
Good you already have a table, vertical centering via CSS is not easy.
Btw: Instead of two divs and absolute positioning, you might use margin-left: -30px;