i want Responsive div inside responsive image as below
any help would be appreciated.
i am not good at css:(
If someone wants to do this without it been responsive it can be done like this.
Make the screen a background image and then use a relative positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png');
width:800px;
height:596px;
}
.inner {
position: relative;
background-color:;
left: 120px;
top: 68px;
width:550px;
height:405px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.
demo - http://jsfiddle.net/ey9ykhwd/3/
use percentage for placing the content div parent should be positioned relative
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
.cont {
position: relative;
}
img {
width: 100%;
}
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
}
<div class="cont">
<img src="http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png" />
<div class="content">content here</div>
</div>
Related
everybody
I have problem with responsive map (this is only image not real map). I try to stick div element on this map for example: my mark(div) is on Paris but when I resize window mark is in other country :D I want stick this element for this one country. I try like this:
HTML:
<div class="container-fluid map">
<div class="circle"></div>
</div>
CSS:
.map {
background-image: url(../images/only-map.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px;
width: 100%;
position: relative;
}
.circle {
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
top: 200px;
right: 400px;
float: right;
}
I try with position absolute, fixed. Background size cover,contain, 100% 100%, but still not working.
Thank for every advance
You can do something like this:
HTML:
<div class="map rel">
<div class="dot abs">
</div>
</div>
CSS:
.map{
width: 500px;
height: 500px;
background-color: blue;
}
.dot{
width: 20px;
height: 20px;
background-color: red;
}
.rel{
position: relative;
}
.abs{
position: absolute;
top: 8px;
left: 8px;
}
You can play around with it here. Hope that helps.
you need to use a position in percentage
.circle {
position: absolute;
top: 40%;
left: 50%;
}
but keep in mind that your circle will be centered on it's corner, wich you can prevent by adjusting your percentages and setting:
.circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}
as it has been said, it's always hard to help without seeing the actual image and result, but this might work
I'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
I am working on CSS design template.
I have two images imageOne and imageTwo.
Both are position: relative because if I set one of them position: absolute then it does not stay as responsive anymore and responsiveness is the key here.
What I want is to place imageTwo on top of imageOne.
How can I achieve that while twitterbootstrap's responsive feature still works on these two images?
Below is my code: (jsfiddle available here)
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
CSS
.image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me.
http://jsfiddle.net/uS7nw/2/
<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
And
.container {
position: relative;
}
.image {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
}
When you have elements within a container which has the property: position: relative;
then any elements within that container which have the property: position: absolute;
will have their offset origin set to the top-left of the container.
For example,
<div class="relative"> <!-- top: 50px; left: 100px; //-->
<div class="absolute"></div> <!-- top: 0; left: 0; //-->
<div class="absolute"></div> <!-- top: 10px; left: 20px; //-->
</div>
The first absolute child will be positioned at (50px, 100px) relative to the body, or (0,0) from the container.
But the second child will be positioned at (10px, 20px) relative to container, or (60px, 120px) relative to the body (add 50+10 from the top, 100+20 from the left).
If you have a responsive image in a container and want to place another image on top of that image:
HTML:
.container {
position: relative;
width: 100px;/*Or whatever you want*/
}
.imageOne {
width: 100%;
}
.imageTwo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img class="imageOne" src="https://www.google.no/images/srpr/logo11w.png">
<img class="imageTwo" src="https://news.ycombinator.com/y18.gif">
</div>
I think you want to wrap both of them in a div with position:relative
<div style="position:relative">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
Then give both of the images an absolute position
.image {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
}
http://jsfiddle.net/uS7nw/4/
.imageTwo {
z-index: 1;
background:red;
margin-top: -42px;
}
.imageTwo {
z-index: 1;
margin-top: -100px;
}
Change position: relative; to position: absolute;
fiddle
If you still want a relative position, wrap the absolute in another div.