Question:
I want to create a hyperlink with both text and a leading or trailing icon. This can be accomplished in at least two ways:
With CSS setting a background-image property
By creating a ASP.NET Html helper that generates an anchor tag followed by an image tag.
Are there more?
I'm guessing this is a problem that has been solved a million times, and there might be a best practice. I see negative and positive sides of both approaches, and I'd like some input from you guys.
Metaquestion:
Both here and on programmes.stackexchange I get the warning "your question appears subjective and is likely to be closed". Where do one ask subjective questions nowadays?
Is the icon content? i.e. does it add (not duplicate) meaning to the document?
If so, it is content and should be an <img> element with a suitable alt attribute.
If it decorative? Then CSS is probably more appropriate.
I would give this anchor a padding-left and set image as non-repeating background.
Here is jsfiddle example: http://jsfiddle.net/ZDPnH/
Related
I have a h2 on a slider being populated from a Wordpress post title. Part of that title is a trademark, so I want that to be all on one line, with Welcome to on the line above.
Currently I have...
Welcome to The Happy Foundation
I want...
Welcome to
The Happy Foundation
Using max-width in css I can achieve...
Welcome to The
Happy Foundation
or
Welcome to
The Happy
Foundation
Is there a way to set a max-width for each line, or otherwise get a line break after Welcome to using css?
I have tried a few tricks out there like making the text transparent and adding it back in with content. But this creates all sorts of issues with alignment and also resizing on mobile browser. I don't want to over think it.
Edit: As mentioned above, the text on the slider originates from a Wordpress post title. I can't edit the original text/html markup without changing the post title. Even if I did I can't add selectors.
Edit 2: Adding a (With Option+Shift+Space on OSX) worked but threw out the alignment of my text-align center. I need the text to be centered. Or it just looks skewed anyway and is no good to anyone.
Did you try with a <br/> after Welcome to ?
You can use unbreakable spaces inside The Happy Foundation: http://jsfiddle.net/nusa3y03/
Edit: you don't even have to know max-width if you add an unbreakable space between Welcome and to: http://jsfiddle.net/nusa3y03/1/
Yes it is possible using the max-width property
h2{max-width:236px; color:red}
<h2 id="p1">Welcome to The Happy Foundation</h2>
CSS has the ability to break lines based on the width of the containing element - without wrapping the text you want to treat differently within a different element, such as a span tag, it's hard to specify how those sections of your content should be treated.
The easiest solution IMO for your case is to manually add a line break to the title. However, if you'd like to try using non-breaking spaces [http://blog.liveeditorcms.com/html-tip-keeping-some-words-together/][1] to keep the title of the foundation together, try giving this a shot:
`Welcome to The Happy Foundation`
This will treat your foundation's title as if it's one word, preventing it from being broken up onto different lines. This might cause issues in the future depending on how you display on smaller screens.
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:
using background-image:url(imgurl.png);
using content:url(imgurl.png);
Are both ways correct and valid? Why should I be using one way over another?
Apparently using the second method you cannot set the picture properties like size. But first method is generaly more taught on internet.
Ideas?
It depends on what your image is, just like the debate between using an <img> tag vs using background-image in your CSS.
If your image is part of your page's content, use content:url(imgurl.png);. Certainly if you want the images to be interactive or to to inform the user's experience while on your page, use content. If your image is just stylistic for your site's visual design, use background-image:url(imgurl.png);
Also, do note that you should use double colons: ::before and ::after. Only IE8 requires the single-colon versions.
Is there a way to disable multi-selection from a table in CSS?
I have a table, and the user can select multiple items but I want it to restrict it to one item, is there a way to do that through CSS?
Short answer: there was possibly going to be a way, but no, there isn't.
Long answer: one of the proposed values for user-select was element. If the property made (or makes...) it into CSS3, I think that'd be the style you'd use. No browser implements it per the proposal though, since it was nothing beyond an idea. Vendor implementations usually only have all, text and none to choose from, but not element or elements.
CSS does not control user selections.
The best you can do is put a transparent DIV over top of the area to prevent users from selecting it. They could also just use Firebug to delete this DIV.
Is there a way to bold only part of the text in a drop down list option or is this not possible?
I know that you can style the entire option with CSS, but that is not what I am looking for. And HTML inside of an option tag does not render.
Here would be an example of a drop down list item:
SomeID - Description of ID
You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this. In fact, if you look at the generated source in Firefox, the internal span is completely stripped out.
What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.
EDIT: And here's a great HOWTO on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Not possible or at least not working cross browsers. If you really need this, you can create your own dropdown but I wouldn't recommend it.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.