I want to remove icons from my website using CSS
You can see it here https://www.stormyark.de/hksv
I uploaded the website files at github
I already tried to set the "width=0" of the icons but nothing happened.
use display: none; on the class of the element you want to hide.
There are 3 ways of hiding an element in CSS.
display: none;
This will remove the element from the DOM
opacity: 0;
This will hide the element.
visibility:hidden;
This will hide the element.
Note: Opacity and visibility does not remove the element.
Related
I think my classes or ID's are messed up when I try to call it.
CSS:
image#ply : hover .ply-text {
visibility: visible;
}
HTML:
<image id="ply" style="height: 50px; padding:5px;" src="images.png">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Some issues first:
The HTML element for embedding images is called img.
An img element's content model is empty, i.e. it may not have any child elements.
Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.
Given that, here's a possible solution:
.ply-text {
visibility: hidden;
}
#ply:hover ~ .ply-text {
visibility: visible;
}
The ~ is a sibling selector that allows one to refer to an element following another.
Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.
I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).
In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.
If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.
So your code would read
#ply {
height: 50px;
padding: 5px;
}
.ply-text{
display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Hope this helps
Right now if i add inactiveLink class to <a> it also affects buttons inside. They cant be clicked anymore. Do i have to make another style activeLink that turns those features back on or is there a way to only affect <a> element without affecting buttons inside?
If there is no other way, what are default cursor and pointer-events for Buttons?
HTML
<a class="text-body selectable-element inactiveLink">
[...]
<button>Click</button>
</a>
CSS
a.inactiveLink {
pointer-events: none;
cursor: default;
}
While the other answer will work (it was deleted as I was typing this), the real question is: If you want the anchor deactivated, should an active button really go inside it?
As the site/app scales, will other developers know what that class does? I think the CSS is fine the way it is, but the HTML could be moved around so those active elements exist outside the inactive anchor (perhaps in a shared parent element). Food for thought!
If you just want the quick fix, add the class "always-active" to the button, and add the following CSS:
.always-active {
cursor: auto;
pointer-events: auto;
}
a.inactiveLink {
pointer-events: none;
cursor: default;
}
button.always-active {
pointer-events: auto;
cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
[...]
<button class="always-active" onClick="alert('it works')">Click</button>
</a>
This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.
Looking for a CSS solution with the following:
Icon must float to the right of the link.
CANNOT put the icon inside the anchor tag, they must remain at same level.
<a></a><i></i>
jsfiddle
If anyone can solve this, it'd be greatly appreciated.
Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.
If you can't do that, then you should wrap the icon inside the a.
You can try add:
display: inline-block;
to your a inside the li tag.
nav>li>a {
position: relative;
display: inline-block;
padding: 10px 15px;
}
So I have a navigation menu that is generated by my CMS:
The menu's HTML is straightforward (edited for clarity):
<ul>
<li>Journal</li>
<li>Art</li>
<li>Work</li>
</ul>
I want the items to show up as hand-written text, in keeping with the general theme of the site, using separate PNG files for each menu item.
To do that, I used the CSS content property like so:
#headerNav .nav li a[href="/_site/en/journal/"]
{ content: url(/path/to/image.png); }
And it worked great! The HTML text of each item was replaced by the correct image:
However, alas, then I learned not every browser supports the content property on selectors other than :before and :after! Chrome and Safari do it, but Firefox doesn. However when I use :before, the HTML node isn't replaced, but the image is added:
How do I work around this?
What didn't work:
Making the <a> element display: none removed the :before part as well.
Making the <a> element position: absolute and moving it elsewhere won't work either.
Making the <a> element width: 0px screws up the layout because the images added through content aren't in the document flow.
What I don't want to do:
Of course I can output the images by hand but I want to work with the HTML the CMS is giving me, which is <li>s with text in them.
Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.
Turning the handwriting into a font is not an option.
Using JavaScript to replace the items on the fly is not an option. This needs to work using pure HTML and CSS.
Since you are doing this into a navigation bar you should have a fixed height making the next method possible to work:
First insert the image as content on the :before element and make it display:block to push the actual text of the a tag below.
li a:before {
content:url(http://design.jchar.com/font/h_1.gif);
display:block;
}
Then hide that text with a fixed height on your a tag:
li a{
height:50px;
overflow:hidden;
}
The Working Demo
Answer was answered before OP added the line
Any solution involving background-image would require me to specify
each item's width and height in the style sheet, which I would like to
avoid for the purposes of this question.
So if anyone interested in background-image solution can refer this, else can simply skip.
Am not sure how optimum solution I am suggesting is, but surely you can use background-image for each a element, using nth- pseudo, and set the fonts color to transparent, or use text-indent property with overflow: hidden;
So it will be something like
nav ul li {
display: inline-block;
}
nav ul li:nth-of-type(1) a {
background-image: url(#);
display: block;
width: /* Whatever */ ;
color: transparent;
text-indent: -9999px; /* Optional */
overflow: hidden;
font-size: 0; /* Optional, some people are really sarcastic for this */
/* Below properties will be applicable if you are going for sprite methods */
background-position: /* Depends */ ;
background-size: /* If required */ ;
}
The reason why I would suggest you is :-
Advantages :
Cross browser compatible
Can you sprite methods to cut down http requests to request image for each tab
Also, you are not losing the text which is between the a tags, which is really good as far as screen readers are concerned.
Disadvantages :
Set custom width for each
Note: If you are going for a sprite solution, than background-position is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.
Credits - For support table
I would put PNG images into img tag and then set alt attribute.
<ul>
<li><img src="journal.png" alt="Journal"/></li>
<li><img src="art.png" alt="Art"/></li>
<li><img src="work.png" alt="Work"/></li>
</ul>
With the example below, I need to add padding and background-color properties to the text anchor. I then need to exclude padding and background-color from anchors that contain images.
<p>
this is a text link that needs to be styled
<img src="image/name.jpg" alt="this needs to be excluded from styling" />
</p>
If I have a red background and padding on my text links, I do not want that same red background and padding to appear on my linked images. The images will always be in their own anchors, not mixed with text within the same anchor.
The rub is that I can not add classes or IDs to the img tags - I do not have edit control of that data.
So how can I add CSS attributes to all anchors, while excluding anchors that contain images?
Using JQuery:
$(function() {
$('a:not(:has(img))').css('background','red');
});
Currently, you cannot select the parent of a matched child selector. You'll have to use javascript to accomplish this.
That being said, if your page background is solid, you could use negative margins and a background on your img tags to overlay your a background… Here's the example. I have not tested on all browsers, but it seems to work for me in Safari, Firefox, and MSIE8.
a {
display: inline;
padding:10px;
background:red;
}
a img {
border: none;
vertical-align: bottom;
margin:-10px;
padding: 0px;
background:white;
}