I try to display a span when the cursor of the mouse is on a help icon.
It works, but nevertheless, I don't manage to remove the border around the icon.
My CSS :
.info{
position:absolute;
border:none;
}
a.info{
position:absolute;
z-index:24;
background:none;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF;
cursor:help;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
cursor:help;
bottom:0px;
left:26px;
width:150px;
padding:4px;
}
cd
Another thing - remember that if you have an with an empty src attribute, then none of these suggestions will work, a border will still get shown.
<img src="" style="width:30px;height:30px;">
Try this:
img{border:0;}
You can also limitate the scope and only remove border on some images by doing so:
.myClass img{border:0;}
More information about the border css property can by found here.
Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.
img need src to use border is remover, i no know a why css is crazy
data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
So try example with SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">
So try example without SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo">
lol... css crazy! good fun
it's a good idea to use a reset CSS.
add this at the top of your CSS file
img, a {border:none, outline: none;}
hope this helps
<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I faced similar problem with img tag
I had added following line with img tag.
<img class="my-class">
And this is the css class
.my-class{
background-image: url('add.gif');
background-repeat: no-repeat;
display: inline-block;
width: 27px;
height: 27px;
}
I changed the img tag to span tag with same css class. Border is not visible now.
<span class="my-class"></span>
Use:
div {
background: url()
}
instead of <img>.
There is no borders in the div with background image.
maybe add border:none to under a.info:hover span or text-decoration:none
I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.
However, adding position:absolute;top:0;left:0; fixed the problem.
The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.
To illustrate the solution, this has a white border (to be precise, it has a top and left offset):
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">
This does not have a border:
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">
Hopefully this helps someone finding this post looking to resolve a similar problem.
img {
text-indent: -20000px; /*some large value*/
}
did the trick for me (for Chrome). This will remove the alt icon as well, something to note.
What class do you have on the image tag?
Try this
<img src="/images/myimage.jpg" style="border:none;" alt="my image" />
Here's how I got rid of mine:
.main .row .thumbnail {
display: inline-block;
border: 0px;
background-color: transparent;
}
Thank for the answers,
The border is removed for Internet Explorer, but this there for Firefox.
So, I added this class to the img:
.clearBorder{border:none;}
And it worked!
Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.
<img src='a.png' /> <img src='b.png' /> will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' /> will not.
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
if image dont have src or image url is not returning image, border will be there, so you have to set a empty but valid image , here is a example which will load a default image on image loading error
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
I do believe you need to add the border: none style to your icon element as well.
I usually use this on the top of css file.
img {
border: none;
}
Try this
<img width="30" height="30"/>
Related
I am displaying img elements using the following CSS.
.display-icon{
height: 16px;
width: 16px;
display:inline-block;
border:hidden;
background-repeat: no-repeat;
}
In Internet Explorer, it works fine, but in Chrome, there is a border around the image. Is there any way to remove it? Unfortunately I could not use the src attribute in the img element as part of the company requirement.
try border:none or outline:none?
It can also be done like this
border-style:none;
Try the following:
img.display-icon,
a img.display-icon {
border: none;
}
to cover all eventualities.
I tried to make an clipping mask on css but I think I'm on a wrong track. Here is the image that im trying to convert to html..
now that I tried it on my end, it looks like a mess:
CSS:
.img_nav_individual {
float: left;
border: 3px solid #fff;
margin-left: 8px;
outline: 1px solid #c1cacf;
max-width: 96px;
}
.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }
HTML:
<div class="img_nav_individual"> <img src="img/parents1.png" />
<div class="image_nav_text"> <span>parents</span> </div>
</div>
Suggestions are very much appreciated. Thanks!
You should use overflow:hidden; attribute on img_nav_individual. That will help here is your example : http://jsfiddle.net/6wPvW/
Either use overflow:hidden; on the outer element or set the image as a background image to achieve what you are after.
If you want to use clip, then the image needs to have position: absolute or position: fixed properties to work.
I believe after looking both the images that we need to do this
<div class="img_nav_individual">
<img src="img/parents1.png" align="right" />
<div class="image_nav_text">
<span>parents</span> </div>
</div>
If you notice I have added align="right" to img tag
I know I should focus on code/technical. But I have a opinion, that why you not try crop these images before use it on html page? I think this way is simple and fast to go ahead!
I need to hide the text inside a H1 tag. But not the image.
Problem is that i only can change the css and not the html
<h1>
<img src="img/headerimg.png" width="900" height="125"/>
Header 1 text
</h1>
Is there a way to only hide the "Header 1 text" with only css?
I'm doing this for big client and they gave me only acces to the css file.
Give a 0px font size
h1{ font-size:0px }
Edit: Working sample
Set the image as background of the <h1>, add CSS properties to the <h1> to make it the size of the image and use a negative text-indent on the headline to remove the text. That would be the usual and ideal way to do it if you had access to the html too.
Since you only have access to the CSS, you can use this:
h1 {
font-size: 0.1px; /* 0 gets disregarded by Internet Explorer, 0.1 gets interpreted right by every browser */
}
Fiddle: http://jsfiddle.net/VGgnD/
You can do this way using CSS:
<h1>
<img src="img/headerimg.png" width="900" height="125"/>
Header 1 text
</h1>
CSS:
h1 {
width: 900px;
height: 125px;
background: url("img/headerimg.png") no-repeat center center;
text-indent: -99em;
}
If you have access only to CSS, please display: none; the img:
h1 img {display: none;}
Working Fiddle: http://jsfiddle.net/sJ8JD/
Well the only thing that comes to my mind is this:
<h1 style="color: transparent; font-size: 0px; text-indent: -99em;">
<img src="http://pokit.org/get/img/18d5148ef77ef2a2d5d8193c1c8789e8.jpg" width="900" height="125"/>
Header 1 text
</h1>
Working example:
http://jsfiddle.net/VRQVs/2/
set font-size: 1px !important; and set background color as text color
It could be as simple as setting the font-size to 0px
h1 {
font-size: 0.1px;
}
http://jsfiddle.net/m5V2A/
You can try position:absolute; so the text won't be visible, it will be positioned outside the page. -5000px
h1 {
margin-top:-5000px;
position:absolute;
}
h1 img {
position:absolute;
margin-top:5000px;
}
Example
I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is much appreciated!
You need to set the z-index css property.
HTML:
<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />
CSS:
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
/*
set top and left here
*/
z-index:1;
}
Here's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/
<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">
Of course, you will need to adjust the coordinates, and I would highly recommend putting the CSS in a stylesheet instead of inline. Here's a pretty good tutorial on CSS for more information: http://www.csstutorial.net/
So you are new to html and CSS. That's no problem, but your question is a little bit vague for SO's general format.
However, in a nutshell:
<style>
#phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
#display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
<div id="display">
Hello! What is up? Miley rocks!
</div>
</div>
Live example: http://jsfiddle.net/cbn4L/
This of course is a extremely simple example. And as you can see the inner container is not a image, but text.. Technically you can add there a image now.. but as we are easing you in to the world of HTML & CSS, then this is a better example and maybe can enhance your concept :)
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});