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/
Related
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/
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
Ive had quite some problems with positioning elements with CSS related to people using differently sized screens. Whats a bulletproof way to position elements so that they keep their position on the screen no matter how big the viewport is?
We have got 2 simple examples here.
In demo 1, div will always stick to top left of the screen regardless of screen size/resolution.
DEMO 1
<div id="test">This div will always appear on top left by default regardless of screen size.</div>
#test{ width:150px; height:150px; background-color:#666; }
This one will always stick to right hand side with some margin
DEMO 2
<div id="test">This div will always appear on right hand with 100 margin.</div>
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }
wraped div. For example:
html:
<div class="wraped">
<div class="someDiv">
Hi
</div>
<div class="someDiv">
Hi reloaded
</div>
</div>
css:
.wraped {
background:grey;
width:500px;
height:300px;
margin:auto
}
.someDiv {
width:230px;
text-align:center;
padding:10px;
background:#ccc;
outline:1px solid black;
float:left;
}
You can preview this in http://jsfiddle.net/wandarkaf/2VVcm/
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.
This is my example code which is not working as expected in IE7 - I think position:relative; is the issue for IE7
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
z-index:999;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
z-index:999;
}
HTML:
<div style="height:500px;width:900px;margin:auto;">
<div class="oner">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
What happens is that the onea div goes behind the following oner div, but in other browsers it overlays it
setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
<div style="height:500px;width:900px;margin:auto;">
<div class="oner" style="z-index: 1;">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
with this there is no need for the Absolutely Positioned children to have a z-index at all, as those divs now take their "z level" from their relatively positioned parent - IE and the stack can be quite confusing!
CSS:
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
}
However it does mean that if you have more than two as in this example you need to set the levels on all the oner divs with the first one being the highest.. (that's why I put the oner style inline in the HTML if you have more you might need some more classes to separate them)
Since both the inner divs have a zindex of 999 the second should overlay the first, although zindex results can be unpredictable across browsers. Really you should set different zindex values to accurately control depth.