I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
Related
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
I made a css example. The main parts where I am facing problems are:
#sign
{
font-size: xx-large;
color:white;
background-color:blue;
font-weight:bolder;
text-align: right;
position:right;
}
and I am implementing it like:
<div id="sign">Me and Me</div>
Here the background color is displayed like a band. Now I want the background color to be limited to only the text area "Me and Me". What modifications do I have to do to acheive this?
Is there a reason that you can't just set the background for whichever elements you want styled?
Using this link you can see that what you need is a display: inline; call. I wrote up a quick jsFiddle for you to look at, this should be what you want...
http://jsfiddle.net/NjAUR/
Seeing that you want it on the right hand side, get rid of the position: right declaration, and use a float: right. Here is the updated version...
http://jsfiddle.net/NjAUR/1/
Use display:inline; with your css. And if you need that in right side use float:right also.
See the Demo
Okay here I wrapped the "Me and Me" text inside a span. Removed background-color property of #sign and added it to the span.
HTML
<div id="sign"><span>Me and Me</span></div>
CSS
#sign
{
font-size: xx-large;
color:white;
font-weight:bolder;
text-align: right;
position:right;
}
#sign span { background-color:green; } /* or any color of your choice */
Demo link
input.icon
{
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
text-indent: -1000em;
}
input.edit {
background: transparent url('/edit.png') no-repeat center top;
}
On an element like:
<input type="submit" class="icon edit" onclick="...." />
It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.
Why is that?
Actually i'm not even setting the value attribute and it is defaulting to 'submit query'.
Also, I thought my CSS could be more specific by doing:
input.icon {
...
}
input.icon .edit {
...
}
But that didn't work for me not sure why, so I changed the 2nd definition too:
input.edit {
..
}
Why didn't input.icon .edit work?
Could I just as well put these styles on a div element? What's the difference?
You've got a few questions there. For the first one. I'm not seeing the issue in IE8:
http://jsfiddle.net/rfYrq/
I do not see the text in IE8.
Question 2: "Why didn't input.icon .edit work?"
The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:
input.icon.edit
Question 3: "Could I just as well put these styles on a div element?"
Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");