i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Related
Currently you can see on that the central image and the button underneath aren't grouped together which I would like them to be. Horizontally it spans fine but the button overlaps vertically onto the image depending on the window size. I would like the button to be in a fixed position directly underneath the image regardless of the window size.
You can see how I've placed the button underneath below. Can anyone see where I am going wrong? Cheers
Here is the relevant code
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
}
#mainText {
position: fixed;
top: 35%;
left: 33%;
}
#yesButton {
position: fixed;
top: 59%;
left: 33%;
}
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
================= HTML =================
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
</div>
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
Pol is correct, position absolute is what you're looking for.
But you need to change more than just CSS in this case.
Wrap your div mainText around your yesButton div and make sure your yesButton's position is set to absolute.
</div>
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
</div>
</div>
You will also need to reposition the yesButton but I have a fiddle that shows a good indication of where you might want it.
https://jsfiddle.net/pjcscc2a/
Moving the "yesButton" DIV into "mainText.png" and directly below the "maintext.png" image tag worked for me. I also had to comment out the CSS rule assigned to "yesButton"
I have this demo: http://vestigedayz.com/sys/adminexec/Test/
I have put a image on it (right, that folder icon) but i don't want to make it move when I randomly type on the keyboard.
.image{
padding-left:1100px;
position:fixed;
}
<a href="">
<div class="image">
<img src="images/suspect.png" width="160" height="140" alt="">
</div>
</a>
Change right and top to what you want.
position: absolute;
right: 50px;
top: 10px;
Lose the:
padding-left:1100px;
position:fixed;
I have tried all the solutions I have found on the new trying to get this div to sit on top of the image.
We have a background image, and as you can see from the image below are four words Eversoft, TruSoft, Solarmax and Active Family.
These four words need to be moved up into the boxes on the picture, but I can get the CSS right, this is how my page is constructed
<div class="row">
<img src="~/Content/Images/Mobile-BackGround-new-2.png" class="img-responsive" style="position: relative" />
<div id="stainMasterLinksContainer">
<div id="stainMasterLinksTop">
<b>EverSoft</b> <small><sup>®</sup></small>
<b>TruSoft</b> <small><sup>®</sup></small>
</div>
<div id="stainMasterLinksBottom">
<b>SolarMax</b> <small><sup>®</sup></small>
<b>Active Family</b> <small><sup>™</sup></small>
</div>
</div>
And I'm currently using this CSS for the stainMasterLinksContainer
#stainMasterLinksContainer {
padding-top: -40%;
font-size: 15.5px;
position: relative;
z-index: 100;
}
Any help would be appreciated.
It CAN be done. Here's one way:
<img src="http://practicalaction.org/images/sea-of-ducks-300.jpg" style="position:absolute; left:0px; top:0px"/>
<div style="background-color:blue;position:relative;left:80px; top:80px; width:50px;"> Hello</div>
I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?
DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/
<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />
</div>
You could structure your html like this:
<div class="iphone">
<div class="container">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
</div>
</div>
And then with CSS adjust the look :
.iphone {
width:370px;
height:800px;
background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
background-size:100%;
}
.container {
position:relative;
top:152px;
width:293px;
margin:auto;
max-height:496px;
overflow:auto;
}
.container img {
width:100%;
}
Check this demo Fiddle
I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.
Here's the JSFiddle link:
http://jsfiddle.net/74yh81s4/2/
and the code:
<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>
Best regards
how can i get these to not keep overlapping, I know why is it, because the convo-container doesnt have a height, if i give it a height all is fine but convo-right needs the height to be dependent on the content of it so convo-container does also. convo mains properties must remain the same. also I want to do it this way to give it easy width positioning. thanks
http://jsfiddle.net/mxadam/Zpz86/
css:
.convo-main {position: absolute; overflow-y: scroll; background-color: #fff; padding-bottom: 5px; top: 0; bottom: 50px;left:0; right: 0;}
.convo-container{left:0;right:0;padding-left: 5px;padding-right: 5px;padding-top: 5px;background-color:#000;}
.convo-left{position: absolute;width: 32px;height: 32px;padding-left: 0px;}
.convo-right{position: absolute;left: 37px;right:0;padding-left:5px;vertical-align:top;}
html:
<div class="convo-main">
<div class="convo-container">
<div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
<div class="convo-right">text can be any height</div>
</div>
<div class="convo-container">
<div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
<div class="convo-right">text can be any height</div>
</div>
<div class="convo-container">
<div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
<div class="convo-right">text can be any height<br />text can be any height<br />text can be any height<br /></div>
</div>
<div class="convo-container">
<div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
<div class="convo-right">text can be any height<br />text can be any height<br />text can be any height<br />text can be any height<br /></div>
</div>
</div>
You want to use position: relative instead of absolute positioning.
According to what you are describing, this would involve changing the position relative for
.convo-left
.convo-right
And keep .convo-main positioned absolutely
http://jsfiddle.net/Zpz86/2/
Use float instead of position:absolute, then you need to clear every floats inside the .convo-container (check in the demo: clearfix class) to get auto height dependent on your content.
DEMO: http://jsfiddle.net/Cy98P/
There are 2 ways of fixing this problem.
You can change the position of both .convo-left and .convo-right from position:absolute; to position:relative;
or you could also go about the problem a different way and not use any positioning on the .convo-left and .convo-right classes. Instead you can set the width of the .convo-container to 100% and add float:left; to .convo-container, .convo-left .convo-right
Here is the CSS:
.convo-container{float:left;width:100%;padding-left: 5px;padding-right: 5px;padding-top: 5px;background-color:red;}
.convo-left{width: 32px;height: 32px;float:left;}
.convo-right{float:left;padding-left:5px;vertical-align:top;}
Either should solve your problem,