I'm dynamically generating cards for a board game and for the sake of brevity on-screen I want all of the extra rules captions to only be displayed when the rule keyword is hovered over. I'm trying to avoid nested div tags here for a few behind-the-scenes reasons.
I have the alternate text setup with tags (shorted here with '...'):
<span title="Beasts of Nurgle secrete a Slime Trail ... "><b>Slime Trail</b></span>
and above, in the style section, I have:
[title]:hover:after {
position: absolute;
content: attr(title);
background-image: url('images/spanbg.jpg');
padding: 5px;
width: 250px;
border-radius: 8px;
border: 2px solid;
z-index: 100;
}
Initially when I hover over the text I get the title text formatted as desired, but a second later if the mouse cursor stays there I also get the default formatting for title show up on top (see attached image). The attached image shows what the initial display looks like before hovering for the extra second... with the unappealing and unformatted second copy of the title I can't seem to get rid of.
Weird second title text from formatted title
Anyone have suggestions how to get just the formatted title text that shows up for the span element without the additional default one? I'm not sure it's needed, but this is hosted on a node.js server being served via proxy from apache2 on the same host, and the behaviour has been confirmed in the latest version of Chrome and Firefox.
I don't believe there's any way of disabling the browser's default behavior for title. To get around this, you could use the aria-label attribute, instead:
<span aria-label="Beasts of Nurgle ... "><b>Slime Trail</b></span>
[title]:hover:after {
/* ... */
content: attr(aria-label);
/* ... */
}
Related
The gist of my issue is that I'm making an app with a tree view kind of system inside of it, with tabs that are collapsible and titles for those tabs. I'm having trouble separating the titles of the tabs into two different columns, one for the icon (chevron?) that indicates whether it is open or closed, and one for the actual title of the tab. This image is an example of my problem:
The first line of the tab is good. The part where it says "Gorge" is fine, and the inner tab's first line "A narrow opening between" is also fine, but when the text of the tab's title stretches out onto the next line, I don't want it going underneath the icon (chevron?) like it's doing here. Essentially, what I want is if, in the picture below, all the text in "A narrow opening between..." started past the red line, and there was no text at all in the green box.
I know this is possible in CSS because it seems like people who know CSS can create anything they could possibly ever want with it. But I am a peon. Please help.
The layout you are trying to achieve looks quite similar to a built-in nested list -- Indented tiers of text content, with a nice little icon that rests on the side. This can easily be achieved with a little margin, padding, and ::before pseudo-selector.
li {
/* Just illustrating text wrap! */
max-width: 200px;
}
.list h1 {
font-size: 1rem;
}
.list p {
/* If you inspect the user agent stylesheet (basic styles for
HTML elements provided by the browser) for <ul> and <li>,
you will find something similar to the below
*/
margin-left: 15px;
padding-left: 10px;
/* Just illustrating text wrap! */
max-width: 200px;
}
/* This puts the icon before each of our fake list items, but isn't part of the text area so will float beside it instead of in-line */
.list p::before {
content: ">";
position: absolute;
left: 20px;
}
<ul>
<li>Gorge<ul>
<li>A narrow opening between hillsides or mountains...</li>
</ul></li>
<li>Ledge<ul>
<li>a narrow horizontal surface projecting...</li>
</ul></li>
</ul>
<div class="list">
<div>
<h1>Gorge</h1>
<p>A narrow opening between hillsides or mountains...</p>
<p>A narrow opening between hillsides or mountains...</p>
</div>
</div>
I'm trying to put this settings/gear icon on the same line as a subheading in HTML but the icon/image has a weird outline around it that I can't seem to figure out how to get rid of.
Here is an image
Here is the HTML code for it
<div class="sidenavSubTitleVector">Languages<img class="languagesIconGear"></div>
Here is the CSS code for it
.languagesIconGear {
background: transparent url("Images/gearIcon.svg") no-repeat center top;
border: 0;
min-height: 16px;
min-width: 16px;
float: right;
cursor: pointer;
}
How can I fix this?
You have an invalid HTML syntax, make sure to stick to HTML standards to avoid such issues in the future.
If you specify an image you also need to provide a src attribute. If you don't you will end up with an "img-not-found" state which results in your rendering bug.
To fix this, use this HTML:
<h3 class="sidenavSubTitleVector">Languages<img class="languagesIconGear" src="Images/gearIcon.svg" alt="settings"></h3>
An image also needs an alt attribute to describe it. As an example I used settings, since I guess this gear icon should open some settings.
Note, I also updated your title to an actual title of level 3: <h3> The level 3 is just guesswork on my part, use the appropriate level for your structure.
I have an application that has a lot of buttons in the window. In writing the HTML documentation pages for this, I've been successful in creating a bordered, sorta-shadowed CSS <span> with text within that represent the buttons that just have legends on them.
This allows me to show "momentary" buttons like these...
...that just have a legend on them in such a way that it's reasonably obvious what I'm describing by simply putting...
<span id="button">LAP</span>
...in line with the associated description (and my custom documentation system makes it even easier by letting me invoke the style inline with [s button LAP]. Fun. :) Here's the style I built for that:
span#button
{
font-family: Courier;
font-weight: bold;
white-space: pre;
border: 1px solid #000000;
background: #ddddee;
padding-left: 2px;
padding-right: 2px;
color: #000000;
}
Here's screen clip of part of the documentation that uses that technique:
Also within the application, I have buttons that have "LED" indicators on them. A typical one might display a green LED when on, and a dark LED when off. Screen clip from the application (with a dark style sheet, so the buttons are dark) showing some of these:
I already have nice little .jpg images that show all the "LED" colors I use, conversely, an embedded CCSS box filled with the right color would be fine too.
What I would like to do, and am having no luck at all doing, is create a <span> within the text that looks as least somewhat like one of those buttons -- without going to specific images for each button, or in other words, using CSS. Since the only things that vary are the LEDs and the text, I want to can the LEDs and feed in the text. Something like...
<span id="greenbutton">Run</span>
In order to do that, I need the LED to appear above the text, and size the text small enough to land underneath it, and center them both within a bordered box as the text-only version above does. I would like an output like this (button built in an image processor)...
press to start
...from this:
press <span id="greenbutton">RUN</span> to start
It seems like it ought to be easy enough; and I can add quite a bit of complexity within my documentation system if required to make it all work -- multiple nested spans, divs, images, test, whatever it takes -- but I keep running into these two showstoppers:
<span> wants things to come one after another horizontally
<div> either causes line breaks or floats left or right
I can't seem to get a <div> to just land in the text where I put it in the first place, although I've been able to make them look just like I want them to because they understand vertical alignment and positioning withing their own context.
I was also thinking of some actual images of buttons with the text removed from them in each LED state, used as background to a span, where the text is overlaid on that background, thereby looking like a specific button. I've not tried this, as I can't seem to find how to make a span have a background and <div>... a <div> won't stay where I want it (not left or right, but right there, or else refrain from breaking the lines if it's not floated.
I'm not opposed to putting a table inline, either. If I knew how...
I hope I'm missing something. In which case, help! Or is this impossible, and the only solution is to screen-cap the many, many buttons in each of their various states (some actually display multiple LED colors for various settings, worse yet) and then drop the images in where I want them? Because although I could do that, it's awfully clumsy and effort intensive. :(
Introducing the pseudo element "before"! Ta-da!
<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>
<style>
span.myButton {
display:inline-block;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding:1px 2px 0;
background: #dde;
width:20px;
height:auto;
font-size:10px;
font-family:monospace;
text-align:center;
}
span.myButton:before {
display:block;
margin:2px auto 0;
width: 16px;
height: 5px;
border: 1px solid #000;
content: "";
}
span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}
</style>
Updated answer: I changed the display on the span to inline-block, so it will go inside a paragraph. I missed that requirement on my previous answer.
I added a class to each span, so that all spans in your document won't be affected, just the ones with that class.
Technically, if you are going to have more than one green button, you shouldn't use an ID for it. ID's are supposed to be unique and therefore only used once in a document. So I've also converted that to a class.
in CSS, the period denotes a class, as opposed to the # sign denoting an id. Ergo: span.myButton targets the span with class "myButton". span.greenbutton targets a span with the class greenbutton. You can have more than one class on an element.
I took the background-color property out of the span:before style, and put it in a class specific style -> span.greenbutton:before. Basically, the classes for the span.myButton and the pseudo element span.myButton:before are the same for all these buttons. But for each color, put an additional class on the span, and create a style with that class for it, using the background color you want. Hope that's clear. Fiddle updated too.
https://jsfiddle.net/maguijo/05zwwjy6/
I have a page on my website that has a bunch of retailer logos on it. I would like for users to be able to search for a retailer using their browser's search feature, but I don't have the retailers' names in text on the page, just their logo.
The behavior I'm looking for is where a user types a retailer's name into their browser's search box (for the page) and the browser jumps down to the retailer's logo. The behavior would also be really useful for things like image galleries.
From the searching I've done I don't think this is possible, but is there any way to have "hidden" text on the page that the browser can search, or to make the browser search an image's alt text, without having visible text on the page?
A trick that might work is to surround each image with a container, e.g. div.box, and to give it an additional child, e.g. div.search-text. The container is used to allow the search text to be absolutely positioned on top of the image. The search-text is filled with the text to search on and is styled in such a way that it isn't visible, but does allow to be searched on.
.box {
position: relative;
}
.search-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
Or see http://codepen.io/ckuijjer/pen/EaPZZO where I've enumerated each kitten. Try searching on e.g. Five or Two.
But you probably need to do extensive cross browser testing. I assume that every browser has its own logic to decide when a piece of text can be searched on (Chrome for example didn't like searching when the text had font-size: 0 but didn't have any problems with opacity: 0
you can have text in div -at same position as image and hide it by using z-index. Along with z-index you can use color text matchig with background.
I have a bunch of server-side generated images with the following HTML tags:
<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">
The problem is that the images show the default "blank document" (or "missing image") icon and a border while they are loading. It looks like this:
After images are loaded, the icon of course disappears, and the broder gets set to the one I specified in my CSS.
I don't want to create fancy preloaders and what not, but I would like to make this "blank document" icon and the default border to go away. Although the user sees it for a less than a second, still that's not good because it creates an impression that something is wrong with my images.
How do I make that icon not to show up while images are being loaded?
One idea was to set background for images, but I cannot do that because images have transparent areas, and then some parts of the background will be visible after the image has been loaded.
UPDATE WITH A WORKAROUND
I noticed that if I do not specify width and height, the default missing icon and border is not shown while the image is loading. As a workaround I did the following:
<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>
and style the image holder as follows:
.imgholder {
border: 2px solid #ddd;
margin: 2px;
padding: 2px;
width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */
height: 75px;
overflow: hidden; /* never show scrollbar */
float: left;
}
Still, it would be great to have some way to style the loading image itself and get rid of that image holder <div>.
Does the broken icon show on every browser? Either way, have you tried this jquery plugin: Imagesloaded ? It may help in your case.
You can use alternate text property.
One question how you are loading images? Loading using async calls or loading these images while page loads?
$("img").on({load:function(){},
error:function(){
$(this).attr("src","blank.png")
});