I found a neat example of Showing Hyperlink Cues with CSS. But in the CSS of the example, there are three separate styles that in my head should do mostly the same thing. Or at least, I should not have to use all of them in my opinion. But I'm not sure I get them all. Here they are:
/* all A tags whose REL attribute equals pdf */
a[rel='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
/* all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
/* all A tags whose REL attribute contains the value pdf, seperated from other values with a space */
a[rel~='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
I'm thinking I can possible replace the first two with the last one, but again, I'm not 100% sure I understand how these works. Anyone care to shed some light on this?
My question is concretely this: Can I skip one or two of these and still get the same result on all my links?
At a first glance, the second one should also cover the first and third. But the problem is that there might be a browser that doesn't support the second version and thus needs the first one.
But why would you want these three? If the first should work, then stick with that one. If that one isn't supported, the others won't be supported for sure.
I would almost make Venn diagrams of it...
All rel='pdf' are overruled by rel~='pdf'
All rel~='pdf' are overruled by rel*='pdf'
For example:
[rel*='pdf'] will style rel="pdfdoc", while [rel~='pdf'] and [rel*='pdf']
will not
Both [rel*='pdf'] and [rel~='pdf'] will style rel="pdf doc", while [rel='pdf']
will not
All selectors will style rel="pdf"
Not all browsers can handle these CSS3 selectors, I think that's why rel='pdf' was added. You could remove rel*='pdf' if you don't want to style links that contain pdf in the rel attribute.
This one covers all use cases:
/* all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Since it matches pdf anywhere in the text.
Related
On my website, I added the following code which I had only intended to apply to my posts, like this.
#media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}
Obviously, it was applied to all the pages on the website. It's fine on some pages, but the homepage/frontpage is messed up on computers. If you scroll down, the excerpts (descriptions) below the posts have these margins applied to them.
How can I make the change above only apply to posts and not to the frontpage/homepage? To be clear, I want to remove these paddings from the homepage/frontpage. I want to keep them on my posts.
This is one of the suggestions people gave me that didn't work. If I decreased the number from 20%, nothing happened. The margins got bigger if I increased the padding, as if the minimum is set to 20%.
.home .posts-loop .entry-summary{
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
Welcome Ahmed.
The suggestion that people gave you that didn't work, is related to class names (note the point before the names: .home | .ports-loop | .entry-summary . This indicates that are classes).
In your first sample you only use p . This affect to all p html elements.
So, your solution is to add a class to the paragraphs where you want to aply the css rules:
<p id="xxxx" name="xxxx" class="SomeClass">
And then, in your css code, use .SomeClass {...} to set the rules to apply.
This rules should be applied only in the elements set as class="SomeClass", and not to other elements.
For home page/front page just give another custom class name and just give padding to 0 or else you want and write " !important ".For e.g .cstm_home { padding: 0 !important; } . I hope it will solve your issue.
An easy way I see around this is to create a different stylesheet for the homepage. I'm not sure if you're using a global stylesheet, if you are, you should remove the line that links the CSS to this page.
A more prudent approach would be to use another type of selector instead of your paragraph tag, put an id in all the paragraphs you would like to style the aforementioned way and use this id or any other selector in your CSS.
Cheers!
I hope this helps....
What I would suggest is to add a class to the p tag on home page. The HTML should be like
<p class="homepagepara">blah blah blah.....</p>
And the css will be like.
p.homepagepara {
margin: 0;
padding:0;
}
After you have created the class you can style those pages any way you want. And it will target the home page paragraphs only. Hope this helps. Let me know if you have more questions
I wish you had shared your HTML as well. But a general answer is that you are selecting all the p elements in the html document to have the mentioned paddings. So of course it's applied everywhere on the page.
Solution 1: If they're separate html pages you can link separate stylesheets and include the paddings only in the desired pages.
Solution 2: Be more specific with the css selector. For example if the wrapper div for the posts has the class of .posts, write your css as following:
.posts p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
SELECTs OPTIONs seem to be nasty to get a hold on.
With something like this css-snippet i'm trying to visualize the category of an options-data.
option{
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 12px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 1px;
margin-bottom: 1px;
}
.type1, option[data-cat="T1"] {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEWazTL///9Sg7a4AAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA1VDA4OjI4OjQwKzAxOjAww0rpAAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wNVQwODoyODo0MCswMTowMLIXUbwAAAAASUVORK5CYII=');
}
In this fiddle i am adding simple images to a background of the OPTION-tag. FireFox and Chrome are showing these as expected but IE11 seem to be ignoring or hiding them.
Any way to make IE11 show (or fake) them?
There is quite a few reasons why this wont ever work.
and even more why you just shouldn't bother.
Basically Select & Option Box's are defined by the OS, User Specific Settings & the Browser.
This is for many reason one main reason being usability.
Styling the outer box etc is usually not a problem but the style with in the select or Option is just not even worth trying to edit.
If you want to create something like this that you have full control over I would advise you use List Items instead as they will offer the flexibility you are after.
I have a tileable wood pattern as background in an html page. The background looks perfectly seamless when viewed in Photoshop or any other software, but on the html page it looks discontinuous at the points where my main div element begins and ends.
Here's a preview: http://i.imgur.com/eTQthA2.png
This anomaly persists across different browsers. (I have tested in latest versions of Firefox, Chrome and IE.) What could be the reason behind this?
Let me know if you want to look at a specific part of the code.
Edit:
Solved the problem. When asked to post the CSS I noticed that I used the selectors body, html to apply the background-image. Removing html from the selector did the bit.
CSS:
body, html {
margin: 0;
padding: 0;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
color: #455d76;
background-image: url("images/bg.png");
background-repeat: repeat-x repeat-y;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}
First of all whenever asking a question, you should post your code here and not give link to a preview image or your website, because it makes us tough to solve your question.
Coming to your question, from the image it looks like you are using background-image property for different element like say for example div for header, main, and footer, so instead declare that property for body tag instead, in your CSS
body {
background-image: url('whatever.png');
background-repeat: repeat;
}
Fixed the issue. I had used 'body, html' as selector while specifying the background property. Removing 'html' from the selector (ie, leaving just body) did the bit.
(Thanks Mr. Alien, you were right about the background-image property being declared for different elements, ie, body and html in this case.)
Thanks to everyone who answered/commented. :)
I want to make a CSS stylesheet that allows completely inexperienced users (using WYSIWYG editors) to have PDF icons next to PDF links. However, this can lead to unwanted stretching of the image with different font sizes. Is there any way I can tell what font size the user has applied to these anchors to then apply the correct icon?
I'm hoping for something as simple as this:
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
background-size: 1em !important;
background-repeat: no-repeat !important;
background-position: 100% 50% !important;
color:inherit !important;
content:" " !important;
padding-right:1.5em !important;
text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
background-image:url('/images/MIME_PDF_16px.png');
}
:link[href$=".pdf"][style.line-height>16px]::after,
:visited[href$=".pdf"][style.line-height>16px]::after{
background-image:url('/images/MIME_PDF_32px.png');
}
:link[href$=".pdf"][style.line-height>32px]::after,
:visited[href$=".pdf"][style.line-height>32px]::after{
background-image:url('/images/MIME_PDF_48px.png');
}
:link[href$=".pdf"][style.line-height>48px]::after,
:visited[href$=".pdf"][style.line-height>48px]::after{
background-image:url('/images/MIME_PDF_64px.png');
}
:link[href$=".pdf"][style.line-height>64px]::after,
:visited[href$=".pdf"][style.line-height>64px]::after{
background-image:url('/images/MIME_PDF_128px.png');
}
Alternatively, something like this would be nice:
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
background-size: 1em !important;
background-repeat: no-repeat !important;
background-position: 100% 50% !important;
color:inherit !important;
content:" " !important;
padding-right:1.5em !important;
text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
background-image:16px 16px url('/images/MIME_PDF_16px.png'),
32px 32px url('/images/MIME_PDF_32px.png'),
48px 48px url('/images/MIME_PDF_48px.png'),
64px 64px url('/images/MIME_PDF_64px.png'),
url('/images/MIME_PDF_128px.png');
}
If no such selector or value exists, then should I propose it to the W3C? Would this go against the philosophy of CSS?
The problem with a selector that selects by a style property, it is often said, is that it can lead to infinite loops. For example, a selector with a property that attempts to set that same property to another value and back:
[display=block] { display: none; }
[display=none] { display: block; }
It's been proposed several times, I think, and met with rejection. There are of course several counter-arguments and points, such as forbidding the same property from being set in the rule at all, etc, but those are outside the scope of your question so I shan't elaborate. If you search the mailing list archives, you should be able to find numerous discussions on this matter.
FWIW, Image Values level 4 actually makes mention of an image-set() function that allows you to specify different images for different resolutions, and I believe some semblance of an implementation can be found in WebKit browsers (naturally, as -webkit-image-set()). However, I don't think it's designed to scale with font sizes per se; it's meant for scaling with resolution from what I can see, which may or may not be a different issue.
I suppose the safest bet here is to use a vector image format, like SVG, that scales down gracefully yet retains its integrity in large sizes. That way, the image worries about scaling itself so you don't have to. Judging from your code, I gather that browser support won't be much of a concern: IE9 supports SVG images just as well as the rest of your CSS code.
Oh and, since we're talking about selectors here, :link and :visited will only ever be satisfied by a[href] in HTML. You can make your selectors less redundant by removing those pseudo-classes altogether if you don't need the pseudo-class specificity, since you already have the appropriate href attribute selector. So instead of this:
:link[href$=".pdf"]::after, :visited[href$=".pdf"]::after
You can simply do this:
a[href$=".pdf"]::after
Or even this:
[href$=".pdf"]::after
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}