I have a picture on a page, and I simply want to draw a link with a small graphic in the upper left corner of the picture. Is there any way to do this? to overlap it on the picture appropriately?
Something like this would work (recommend moving the inline CSS to a stylesheet of course):
<div style="position:relative">
<div>
<img src="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img src="smallgraphic.png">
</div>
</div>
The position:absolute will place that div relative to a container with position set, in this case at left 0 top 0. So that means it will end up in the top left of the same element that the 'backgroundimg' is placed in.
Does that make sense?
Don't use more divs than you need.
<div style="position: relative;">
<a style="position: absolute; top: 0; left: 0;">
<img src="..." />
</a>
<img src="..." />
</div>
simplify:
<div style="background:url(yourimage.jpg); position:relative;">
<div style="position:absolute; left:0; top:0;">
<img src="inner.jpg">
</div>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/>
</div>
or:
<div style="background:url(yourimage.jpg); position:relative;">
<a href="somewhere.html" style="position:absolute; left:0;
top:0;display:block;width:100px;height:100px;"></a>
</div>
Related
<div style="position:absolute; top:0; right:0">
<a href="index.html">
<img src="~/Content/Img/tr.png" alt="Türkçe" />
</a>
<a href="index_en.html">
<img src="~/Content/Img/eng.png" alt="English" />
</a>
</div>
I have this block of html in my home page. Images show but link does not work. In fact if I remove the style it starts to work. I am very confused.
Some element was overlapping your links, just add z-index: 1; in your <div> style, jaunt got the answer!
<div style="z-index: 1; position:absolute; top:0; right:0">
<a href="index.html">
<img src="images/tr.png" alt="Türkçe">
</a>
<a href="index_en.html">
<img src="images/eng.png" alt="English">
</a>
</div>
Add the class on-top to the images and use the below CSS.
HTML:
<div style="position:absolute; top:0; right:0">
<a href="index.html">
<img class="on-top" src="~/Content/Img/tr.png" alt="Türkçe" />
</a>
<a href="index_en.html">
<img class="on-top" src="~/Content/Img/eng.png" alt="English" />
</a>
</div>
CSS:
.on-top {
position: relative;
z-index: 1;
}
What is happening is that you have another DIV that happens to be overlapping this
I would change the first line to something like this and it should work
<div style="position:absolute; top:0; right:0; z-index=1000" >
You need to add a z-index to the div that surrounds your links.
Right now <div class="fp-tableCell" style="height:776px;">is sitting on top of the div you're having issues with.
Add this to the div that you are having issues with:
<div style="position:absolute; top:0; right:0; z-index:999;">
Okay so you can either set z-index:1 in the parent div or you can apply
position:absolute;
top:0;
right:0;
and
position:absolute;
top:0;
right:40px;
to the img tags inside the a tags instead of the parent div. I'm sure there are other ways too, but these seems the easiest.
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
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>
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.
In the code below I added input button to the leftPane div.
Here I have two div's/ Left 80% and right 20%.
Now I want to position this button to be vertically in the middle and on the right side in the leftPane.
But it when I set 'right:0;' it goes to the right side of the browser, and not of the right side of the leftPane.
Why?
<body style="overflow:hidden;">
<div style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
<div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
<img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
<input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
</div>
<div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
<div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
<input type="text" placeholder="Enter here..." />
</div>
</div>
</div>
</body>
You need to have the parent <div style="position: relative;"> otherwise your absolute positioning is defaulting to your <body>
To clarify, set #leftPage to relative positioning.