I am trying to zoom a image which is inside a div.
When page is loaded i am showing 300*300 size image inside a 400*400 size div.
So, to show the image at the center of the div i am using the following css.
#img1{
width:300px;
height:300px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
with the above css code i can able to show the image at the center of the div.
but when a user clicks on zoom button i am increasing the height and width of the image. If it becomes 600*600 size image, i have to show scroll bar so the user can scroll the div to show the full image.
For this i set overflow:auto to div.
But the problem is i can't see the full image when i scroll the div. This may be due to the position:absolute property of image. How can i fix this.
I created a fiddler also. There i am showing 2 divs before and after zooming image. Please check.
http://jsfiddle.net/codingsolver/L4qdL/1/
Can you try this;
HTML
<div class="outer">
<div class="inner">
<img id="img1" src="http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png" />
</div>
</div>
<button class="zoomout" data-zoom="out">Zoom Out</button >
<button class="zoomin" data-zoom="in">Zoom In</button >
CSS
.outer{
height:400px;
width:400px;
overflow:auto;
border:1px solid black;
float:left;
margin:30px;
text-align:center;
}
.inner {
height:400px;
width:400px;
display:table-cell;
vertical-align:middle;
}
img {
width:300px;
height:300px;
}
http://jsfiddle.net/L4qdL/7/
Related
My site is like this:
Left div | right div
Inside my left div, I have a position absolute element "custombox" that shows up over the "right div" (its got z-index:999), just because I want the code to be on the "left div side". My custombox has a css property "resize:both", which does not work. WHen I put a "position:relative" on my leftbox, then the position of my "custombox" is messed up and literally goes into "left div", which I don't want. How can I make my "custombox" resizable? (if absolutely needed, js plugins are okay)
.leftdiv {
background:red;float:left;width:50%;height:300px;
}
.custombox {
position:absolute;
top:10px;
right:50px;
z-index:999;
background:yellow;
height:100px;
width:100px;
resize:both;
}
.rightdiv {
background:blue;float:right;width:50%;height:300px;
}
<div>
<div class="leftdiv">
<div class="custombox">
I like staying in the blue, but I want to be resizeable too.
</div>
He
</div>
<div class="rightdiv">
blue
</div>
</div>
Fiddle attached:
http://jsfiddle.net/axhqg20x/3/
Changing the overflow property of .custombox to scroll makes it resizable:
.custombox {
position:absolute;
top:10px;
right:50px;
z-index:999;
background:yellow;
height:100px;
width:100px;
resize:both;
overflow:scroll;
}
http://jsfiddle.net/axhqg20x/4/
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
Hi i'm trying make a website that has a header at the top and and div that loops through some images in the background. at the moment i'm trying just to get it to display one image that is responsive to the screen size so no matter what screen your on the background image will scale to fit the height and width. The problem i'm having is that i can't seem to get display anything without a hardcoded width or height.
heres what i have so far
banner.php
<div id="banner">
<div class="bgslider"></div>
</div>
global.css
/* BANNER */
#banner { style="width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { style="width:100%; height:750px; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg) }
take out style=" from within the brackets
try this
#banner { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg);background-size:cover; }
http://jsfiddle.net/EE2Jc/
I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.
I have attached an image diagram to demonstrate what i'm trying to achieve:
Extra details include:
The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).
Any help is greatly appreciated. Cheers.
Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs
HTML
<div class="body" style="position:relative">
<div class="box">
<div class="box1"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
</div>
</div>
CSS
.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}
I have added the fiddle too. http://jsfiddle.net/nQvEW/176/
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.