<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.
Related
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 my social media icons in the footer using html because nothing I tried with CSS gave me the results I wanted. Problem is that now I want the icons to be fixed to the bottom but doing it with CSS isn't working. Here's the code right now:
<div class="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
And here's the CSS I tried that didn't work:
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
There's several issues with your original code. First you never close your <center> tag, but you should probably be using text-align:center; in your css instead as the center tag is depreciated.
Next you're using an ID selector instead of a class selector. So you have a couple options, you can either replace your CSS with:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Or you can replace your HTML with:
<div id="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
But I'd highly recommend dropping those center tags and updating it like the following:
<div id="footer">
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</div>
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
text-align:center;
}
You are using id(#) selector use dot(.) instead as you are using class in your div.
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
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.
I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it
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>