I have an image in a div that has the size of 300px and I want to next and previous arrow on either side of the the image. However with one added issue is that if the screen is 300px I want the arrows to be on top of the image. How can this be done?
my div code is below:
<!--this div is the container for the carousel -->
<div id='mySwipe' style='max-width:300px; margin:0 auto' class='swipe'>
<!--the images are in this div -->
<div class='swipe-wrap'id="featured">
</div>
</div>
.container { position: relative; }
.container .arrow { position: absolute; top: 150px; }
.container .arrow.left { left: 0; }
.container .arrow.right { right: 0; }
By setting relative positioning to the parent (default is static) and absolute positioning to the children, they will be absolute relative to their parent.
Related
I've set img width 100%, so I don't know height of the img. I'm trying to set a div at the end of img using position absolute and top. Can we use calc() ? Or another method.
Note: I've set img position fixed.
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
<div class="to-image-bottom">I'm div at the bottom of image</div>
You can use bottom instead of top for positioning elements. Also use wrapper for bottom div for display it outside of image. For example:
/* Container for image and bottom div */
.container{
position: relative;
/* For display content outside of image */
overflow: visible;
}
/* Image Styles */
.container .image{
width: 100%;
}
/* Wrapper for bottom div for align to bottom */
.container .to-image-bottom-wrapper{
position: absolute;
width: 100%;
bottom: 0;
}
/* Bottom Div */
.container .to-image-bottom-wrapper .to-image-bottom{
position: absolute;
top: 0; /* position relative to wrapper */
width: 100%;
background: red;
color: white;
text-align: center;
}
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
<div class="to-image-bottom-wrapper">
<div class="to-image-bottom">I'm div at the bottom of image</div>
</div>
</div>
Edited for displaying div outside of image
I have two images inside a div. I'd like to position these images using percent relatively to the parent div.
Here's a fiddle to understand: http://jsfiddle.net/b9ce626s/
I tried to set position: absolute; on the image but it uses window width.
I need the image on the very right be positioned at 95% of the red div, and not the window. I also don't want the left image impacts the positionning of the right one.
Add position: relative on #main so the position of the images are both based on that element (and not on the root element).
Example: http://jsfiddle.net/b9ce626s/1/
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
As a side note, if you assign a width with a percentage value to the images, it will be now based on the parent element width.
Try this..
Html
<div id="main">
<img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
<img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>
Css
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
img {
position: absolute;
width: 5%;
}
#card1 {
left:5%;
}
#card2 {
right: 5%;
}
Fiddle Sample
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position: relative;
}
Give main position: relative; like so:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
JSFiddle Demo
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
We want a top bar on our page which is as wide as the browser's width. The problem is, it is inside a container div. If you pull it out of the container we can expand the div to the body width, but when it is inside the container it can only expand to the width of container.
Is there a solution through which we can expand the topbar past the container div.
<div id="container">
<div id="topBar">
<p>The Paragraph</p>
</div>
</div>
You can position the #topBar absolute without making it relative to its' immediate parent
html, body {
height: 2000px;
}
#container {
width: 50%;
margin: auto;
height: 200px;
background: beige;
}
#topBar {
position: absolute;
left: 0;
background: #ccc;
width: 100%;
}
DEMO
The other possibility is to remove it from the document flow with position:absolute. However, you need to know your height of the topBar, and will have to compensate by forcing a top margin on the rest of your content to keep it below your topBar.
For example, you could do:
#topBar {
position:absolute; /* fixed might also work, here */
top:0; left:0;
width:100%;
height:50px;
}
but you'd also have to have:
#container {
margin-top:50px; /* or more */
}
This will break, however, if you need to make #container position:absolute or position:relative.
I have a centered div and was wondering how can i attach a div on its right,
there is a title DIV on top, then the yellow centered DIV and this SOCIAL SHARING DIV I'd like to attach on the right.
Thank you!!!
Add it inside the yellow div, and position it as follows:
#yellowdiv { position: relative; }
#sidebar { position: absolute; left: 790px; top: 10px; }
It would be perfectly feasible to use the yellow div as the parent element for the brown div; the social data is all relevant info to the video. In that case, if you want, use the following:
#video {
position: relative;
}
#brown {
position: absolute; top: 0; left: 100%; /* this guarantees that it'll line up at the very end of #video */
}
Demo
http://jsfiddle.net/KXvpV/1/
Code
HTML
<div id="one"></div>
<div id="two">
<div id="social"></div>
</div>
CSS
#social { position: relative; top: 20px; right: -201px; }
Try making the yellow div position:relative, put the sidebar div inside it and make it position:absolute with values of top:0 and right:-XXX where XXX is the width of the sidebar plus the margin you require.