design - CSS: Display element with width "inline" -


I have an icon that I want to drop into text in arbitrary points and text it with "flow".

Background:

An and tag tag works best for it. However, I should not specify everywhere href . It should change the icon / location in the future. It depends on knowing the path of that image, which I do not always know-url-rewriting and on the same page due to different mapping, etc. I & lt; Span class = "icon" & Gt; & Lt; / Span & gt; and keep my icon as background-image Of course, this does not work because you can not have width on inline element. This is not working as a block (i.e. & lt; div & gt; ) element (for obvious reasons) and it does not work temporarily Display: Inline-block; Works in some browsers, but not all. Using the padding: The correct height and width for pad-out gives mixed results in different browsers with a transparent image for href And lt; Img & gt; Using a tag and a background-image works but looks like a hack.

Will this be the best way to accomplish this?

You can & lt; & lt; / Span & gt; & lt; / a & gt;

You can specify width / height at the elements exactly, so the CSS looks like this:

< Pre> a {position: relative; padding-right: 30px; / * width of your icon, assuming that you are in the scope of the text * /} A. Signon {display: block; / * good For the solution, but will not be required in all browsers * / Status: Absolute; Head: 0; Right: 0; width: 30px; height: 30px; background: url (your-icon.png) no-repeat 0 0;}

relative to & lt; a & By setting the status of gt , this creates a coordinate system for the all-in-one

If you do not know where the icon will appear, then "icon"> .

You can enter & lt; img & gt; with a transparent .gif as your source. tag. 

  & lt; P & gt; Homepage & lt; Img src = "clear.gif" alt = "icon" square = "icon" /> Dollar valarium & lt; / P & gt;

Then set the actual icon source using the CSS background property: 

  img.icon {height: 30px; Width: 30px; Background: url (true-icon-src.png) no-repeat 0; / * If you want to adjust the vertical position of the image then use the following * Position: Relative; Top: 5px; }

-

Comments

Post a Comment

Popular posts from this blog

Eclipse CDT variable colors in editor -

I hope this is a good question to ask here. This programming is related, so I thought it would be better than the superuser, so I am using the CDT C ++ Eclipse plugin. I know how the editor changes colors for some things But is there a way to do that all the variables are different colors? For example in KDEValue, it sets the local variables and square variables in different colors and bold square squares. Can I copy it to CDT? Eclips provides some level of color customization for text editor syntax You can see it on the following: There are many elements, including the Window> Preferences> C / C ++> Editor> Syntax color code that can be changed, assembly, Comments, Preprocessor and Doxian Under the code, it is possible to change the color of some variable types, such as global variables, local variable announcements, local variable references, and parameter variables. But I do not think the code is capable of changing the color of each variable declared....
Read more

AJAX doesn't send POST query -

$ (दस्तावेज़) .ready (function () {function ajaxselectrss (rssurlvar) {var ajaxRequest; // वेरिएबल जो अजाक्स को संभव बनाता है! कोशिश करें कि {// ओपेरा 8.0+, फ़ायरफ़ॉक्स, सफारी अजाक्स अनुरोध} = नया एक्सएमएलएचटीपीआरइवेस्ट ();} कैच (ई) {// इंटरनेट एक्सप्लोरर ब्राउज़र्स {ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");} पकड़ो (ई) {try {ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");} कैच (ई) {// कुछ गलत चेतावनी ("आपका ब्राउज़र तोड़ दिया!"); वापसी झूठी;}}} // एक बनाएं फ़ंक्शन जो सर्वर से भेजे गए डेटा प्राप्त करेंगे ajaxRequest.onreadystatechange = function () {if (ajaxRequest.readyState == 4) {var ajaxDisplay = document.getElementById ('news'); ajaxDisplay.innerHTML = ajaxRequest.responseText;}} / / Var rssurlvar = $ (this) .attr ("title"); var queryString = "rurl =" + rssurlvar; var urltofile = "rssget.php"; ajaxRequest.open ("पोस्ट", urltofile, सच); ajaxRequ Est.setRequestHeader ("सामग्री-प्र...
Read more

wpf - Custom Message Box Advice -

Well, I'm using a custom window box that comes with some custom control boxes that accompany the text The producers who are displayed are called. I have a defined event, which has been subscribed through the original class, it gets burnt when clicking on the button. However, I can not see how to use it effectively, I would like to return one yes, whether yes or not, but obviously my code will continue to execute, so this Below is some example code to clarify the problem that the method has subscibed by clicking on the button. Message box window Public partial class custom message box: window {public representative message messagebox object sender, event events e); Public event messagebox handler messagebox document; Public Customs Box () {Initial group (); } Public Customsbox (String Message) {InitializeComponent (); This.txtdescription.Text = Message; } Public Customsbox (String Message, String Title, String First BTNtext) {Initialization (); This.lbltitle.Content =...
Read more