I have a form that whenever someone enters information incorrectly it displays a message, I also want an error icon to appear next to the error text. I added span tags for the error message and gave it a .error icon class in CSS. I added a background-image in the selector but it is not appearing when I preview in the browser. I inspected the code and I can't even see the .error icon class in the code. I tried adding between the span tags which was something I saw in a form in a website but that didn't work.
I am unsure of what method to use for inserting this icon as I know it is not good practice to repeat the same image src code for each section I want to apply the error icon to, hence why I am trying to use it as a background-image instead.
Here is my code:
http://jsfiddle.net/HNSM4/2/
HTML
<label for="name">
<span class="textStyle">Full Name*</span><input type="text" id="name"><br>
<span id="nameMessage" class="message"><span class"erroricon"> </span>You must have a valid name</span>
CSS
.message{
display: none;
}
.erroricon {
background-image:url('http://postimg.org/image/v6997l887/')
}
Rather than putting the icon in a span as a background image, just make it the background image of .message and add padding to the left so nothing can occupy the space:
.message{
display: none;
background: url("http://s7.postimg.org/v6997l887/erroricon.png") no-repeat;
padding-left: 20px;
}
The image you provided is blank, so I have nothing to show you there, but you can see that the text is pushed over, and if you use inspect element, you can see that the image is loaded.
JSFiddle
Here is an example with the Google logo as the background image.
Related
I'm trying to make an editor that inserts special types of elements. I figured out that if you set contenteditable to false on the elements within it, it wont let you type inside it (which is good), but it doesn't put the cursor before or after either, the cursor just disappears.
Is there a way to stop the user from typing inside the element but retain cursor focus when you click on it, as if it's a normal text symbol?
div div {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
div {background: #ccc}
<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>
<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>
<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>
You also cant click at the end of the text block if the block is last.
Big problem for usability, really would like to fix this.
Facebook has solved this problem, but I can't figure out if it's with js or css:
edit: I've discovered fb changes the caret-color property to black, but it then seems to jump to the position outside of the span after you type, which must be done with js. Still trying to figure out how.
edit: Tried a lot of things, thought I had it working but it still caused other weird problems. I recommend you just don't attempt this and just use an image element or emoji.
Looks like the readonly attribute is the tool for the job and has acceptable support caniuse.
[contenteditable]:read-only {
cursor: not-allowed;
}
css-tricks article is legit.
I need a big banner at the top of the screen going from end to end. It has to be a link and on the banner is an image. I have all that set up and working. However, around it all is a gray box and in the top left corner is the icon that is displayed when no image is found. How do I remove the box and the icon?
header.php
<body <?php body_class(); ?>>
<a class="vcuLink" href="http://www.vcu.edu/" >
<div id="topBanner" class="vcuBanner">
<img class="vcuLogo" src="vcu.png" width="910" height="59">
</div>
</a>
<div id="page" class="site">
<div class="site-inner">
I do not think showing more is necessary.
style.css
.vcuBanner {
position: relative;
background-color: black;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 62px;
top=0;
}
.vcuLogo {
position: relative;
background:url(vcu.png)no-repeat center;
height: inherit;
width: inherit;
z-index: 101;
}
EDITS: More information and a screen shot.
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing. However, when the img tag is there so is the weird icon and outline, leading me to believe that the img tag is the culprit.
Screenshot:
In the VCU banner at the very top, you can see what I am talking about. In Internet Explorer, the icon at the top left is an X button instead and there is no outline.
There are many possible causes for this, so I’ll try an educated guess at what seems the most likely cause.
I don’t know where your files are located relative to one another, but the way your markup and CSS here is written, the file vcu.png should be in the same folder as the PHP file where you’re displaying it (presumably index.php, given the URL in your address bar) for the <img> tag to work. Similarly, it must be in the same folder as the CSS file for the background declaration to work.
Since the position of the <img> tag itself is not specified in your CSS, it should show up in the top left corner of the container. The background image is centred, so it should show up in the centre. Given that there is an image in the centre and a missing image icon on the left, it would seem it is the HTML <img> tag that points to a nonexistent file. That in turn means that the PNG file is in the same folder as the CSS file, but in a different folder than the PHP file. Perhaps the CSS and PNG files are in a subfolder called style or something like that?
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.
This makes sense. Since the CSS-defined background is declared on the image tag (not the containing <a> or <div>), removing the tag from the HTML markup naturally also removes the background image. Conversely, since the HTML tag is pointing to an incorrect path, having the tag there also means there will be a missing image icon.
You can solve this in two simple ways:
Figure out where the image is located relative to your index.php file, and make sure you point to the correct location (perhaps src="style/vcu.png" or something like that). Then style the <img> tag with something like margin: 2px auto; to centre the image and give it a couple of pixels of space at the top and bottom, and get rid of the background declaration in your CSS.
Remove the <img> tag from your HTML altogether, replace it with (to make the containing <a> non-empty), and style the container to be display: block.
The first yields more semantic code and would be my preference; but both should render the same in regular browsers. Removing the <img> tag also removes its alt attribute, however, so users relying on text-to-speech systems will have no way of knowing what that link actually does, since the only meaningful content it will contain is a non-breaking space.
http://www.facebook.com homepage when displayed in firebug shows that the image/icon of "facebook" on the top left corner has the following HTML:
<i class="fb_logo img sp_ezjerk sx_440431">
<u>Facebook logo
</u>
</i>
Even the media resource list does not show any image/icon in png/ico/gif for the "facebook" image that appears.
I have tried searching for that logo source even in chrome developer tools, but I am unable to locate it.
Firstly, where does the text logo come from?
Secondly, why is it placed under the < i > tag which is primarily used for italicized text.
A quick inspection of that i element shows the following CSS classes being applied:
img
sp_ezjerk
sx_440431
The latter two appear to be dynamically generated and change with each page load.
The first of the latter two, on each page load, shows the following CSS rules:
background-image: url("/rsrc.php/v2/yR/r/7TyBDSy09g8.png");
background-repeat: no-repeat;
background-size: 104px 488px;
display: inline-block;
height: 32px;
width: 24px;
The image file at /rsrc.php/v2/yR/r/7TyBDSy09g8.png contains the logo, and the CSS is positioning it to display only that portion of the image.
As for why they chose an i element, that is beyond me. I wouldn't have chosen it, but I guess they did.
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)