I need to put some text over a series of images in a gallery. I found many tutorials about the text part however the images need to be floated.
Whenever I add float:left though the trick no longer works. My code (css inline for sack of brevity):
<a href="/photos/photo1.php" title="photo1">
<span style="position: relative; width: 100%;">
<img src="/photos/photo1.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
<a href="/photos/photo2.php" title="photo2">
<span style="position: relative; width: 100%;">
<img src="/photos/photo2.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
This way the images are one under another but like I said I need to float them without breaking everything else.
You will want to float the entire outer <span> or the <a>. My guess is that you are currently trying to float the <img> specifically, which causes the elements to end up in unexpected positions. If this assumption is incorrect, you might want to update with more details.
Related
I want to insert some pictures in my website which "float" in the page... even while I scroll my page.
So with the following code I can make an object float on my website... but how do I make an image float which also acts like an hyperlink?
<div style="position: fixed; bottom: 10px; left: 0px"> </div>
<img src="pic.jpg" height: 32px; width:32px;> </img>
But how do I merge them both?
As Terry sayd in the comment you can just move the code up in the div. Cause the link will ned something which has a position set. Which is the case with your div.
Also, the <img> tag is a self closing tag. So </img> will not be needed. Also if you write height and or width directly on the <img> tag it has to be
<img src="your/src.url.jpg" width="100px" height="100px" />
and not
<img src="your/src.url.jpg" width:100px; height:100px; />
this will not work!
So here your working example.
img {
width: 32px;
height: 32px;
}
<div style="position: fixed; bottom: 10px; left: 0px">
<a href="www.google.com">
<img src="http://www.planwallpaper.com/static/images/adirondacks-sun-beams-640x300.jpg" />
</a>
</div>
This is what you need keep the anchor tag inside the div. And also while specifying the height and width of the image you should use quotes like width="25px" or use css style.
<div style="position: fixed; bottom: 10px; left: 0px">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" style="width:25px;height:25px;"/>
</div>
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
I'm trying to edit a DotNetNuke webpage and I have an image that I need to display. On TOP of the image, I'd like to place an anchor. The trouble is that I don't want the entire image to be clickable, JUST the anchor, and I can't seem to get it to work.
Additionally, because it's a DNN site I'm not sure if I can edit the CSS, so I'm hoping for a solution that's pure html. I've tried all sorts of combinations but none of them seemed to work. Thanks
Below is my test html:
<div class="c_head h2_title_container">
<img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size: 18px;"><strong>Name Goes Here</strong></span>
<br></br>
<p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
</p>
</div>
You should be able to set the parent element to position: relative, then add your anchor's parent element positioned absolutely:
<div class="c_head h2_title_container" style="position: relative;">
<img ...></img>
<div style="... position: absolute; top: 20px; left: 30px;">
...
</div>
...
</div>
Hi I have the following code to have few links on top of img. It works well in FF but not in IE. It seems IE is not clickable if you put link on top of img
<div style="z-index:-6755;"><img alt="October Offer" src="images/offers/october-offer.jpg" /></div>
<a href="#" onclick="window.parent.SqueezeBox.close();">
<div style="display:block; width: 185px; height: 32px; position: relative; bottom: 50px; left: 260px;border:1px solid blue; "> </div>
</a>
are you just trying to make the image clickable?
you can't have <href> that's not a correct html tag.
either place <img> inside <a> like so: <img />
another way is to set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
You can add an on-click function to img-tag.
Example:
<img src="images/logo.png" alt="logo" onclick="home()">
and then redirect it to a page.
function home(){ location.replace("/index.html") }
I'm having a hard time with IE6 lately on a particular problem, here's the bit of html I'm on :
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Everything is fine with Firefox etc, but the link won't work by clicking directly on the image on IE6 (but will do work anywhere else on the link).
Here is a link:
http://www.daniel-rico.com/demos/ie/
Someone has an idea?
Thanks!
edit: This does not work on IE7 either :/
Thanks for your answers!
I do need the span tag. I should have explained a little more what I was trying to do; here it is:
I need a box clickable. Inside of it I need:
another box with a fixed size which will contain a dynamic image (random ratio)
some text
i just tried it on:
<span style="display:block;width:100px;height:100px;">
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<img src="img.jpg" alt="Click your image now" />
</a>
</span>
Remove the span tag, I don't think you need it
<div style="width: 200px; height: 200px;">
<a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;">
<img src="img.jpg" alt="My image"/>
</a>
</div>
If you have control over the markup then extract the inline styles and use
<div id="link">
<a href="http://www.mylink.com">
<img src="img.jpg" alt="My image"/>
</a>
</div>
In the head of the document add a reference to an external stylesheet
<head>
<link rel="stylesheet" type"text/css" href="/Css/Style.css"/>
</head>
Create style.css and add
div#link
{
width: 200px;
height: 200px;
}
div#link a
{
display: block;
width: 100px;
height: 100px;
}
If you are using this style of link in multiple places remove the id on the div and replace with
<div class="link">
...
</div>
And change the selector in the css from # to .
div.link
...
If you are having problems only in IE6 you can also use conditional comments to include a stylesheet that fixes IE6 specific problems
<head>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/Css/IE6.css"/>
<![endif]-->
</head>
Oddly enough, removing the width and height properties from the span allows you to click on the image.
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Of course this completely changes the layout but it might help solve the IE bug.
An alternate method would be to use a div with a background-image instead of an img element:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div>
</span>
</a>
Edit:
The background-image solution doesn't work for random ratio image you mentioned in your comment.
If you just want to achieve the layout in the mockup:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;">
<img src="img.jpg" alt="My image" />
<span style="padding-left:10px;">some text</span>
</a>
I was facing almost an identical problem building a nav in a content-managed site, but compounded by the fact that some of the nav items needed to open in new windows - meaning the solution to use javascript became problematic.
Eventually, I ended up losing the <img... /> tag and replacing with a <span... /> and setting the background image inside the span (I could have used div's but that's bad form according to the W3C).
So referring back to your original example, I'd go with:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;">
<span class="Hidden">My image</span>
</span>
</span>
</a>
The easiest way to make that area clickable is to add position: relative to your link style; to preserve the cursor style under IE6, you can add cursor: hand to your span element.
a{ position: relative; display: block; width: 200px; height: 200px; }
span{ display: block; width: 100px; height: 100px; cursor: hand }
As other suggested, it is better to separate the IE6 specific styling with a conditional comment block.
Hope it helps and good luck ;)
Try to apply to span css property "zoom:0;". It works in my case.
I wasn't able to solve this with CSS only, I used Javascript to force the area to be clickable.
Disappointing, but well, it works...
Thanks everyone for your help ! I appreciate it :)