Is it possible to use the sliding doors css tehnique for input text? I've used it in 'button', but it doesn't seem to work with input types.
You should put the input tag inside of a span or div and then do the sliding doors technique. If you don't want to add the extra tag, use multiple background images. It is important to note that this isn't supported by every browser.
About multiple CSS background images: http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/
Related
Suppose I want to replace a link > with a fancy image arrow. For that I want to use a CSS sprite.
In many articles, for example in a recent (2012) article in Smashing Magazine, the recommended method is something like this:
HTML:
>
CSS: hide text and specify sprite as background
However this method is problematic concerning accessibility: If images are disabled but CSS is interpreted, then the above link will be invisible.
Interestingly, I found an old (2010) article by Paciello Group that proposes what looks like a good solution. The idea is to place a <span> next to the text to be replaced. The <span> has a background image and is positioned on top of the text. If the image loads, it replaces the text, otherwise the text is still visible.
Why is this method not widely employed? Are there issues with that solution?
The main disadvantage is showing the text to users with no special accessibility needs, before your CSS sprite loads. In terms of code, it is also perhaps not as semantically clean as using an aria-label solution (explained below).
You could consider using an ARIA label for the element:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I quickly checked how Gmail and Facebook approach this problem (buttons without text):
In Gmail the 'previous' button has an aria-label of 'Older'
in Facebook the 'cog' icon in top right has some text 'Account Settings' indented -5000em
Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.
I am designing my first website.
I have designed a button image in gimp and saved it as a jpg.
I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?
Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.
For example you could have a ul:
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
and then just style it in you css by using background-image or similar styles, take a look here for some examples..
You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.
On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.
In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.
Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:
Image button overlay text tutorial
Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.
I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a
<button class="myButtonClass">MyButtonText</button>
<style>
.myButtonClass {
//enter your button style here.
}
</style>
Depends on how you've designed you site, as always theres loads of ways to do everything.
If your buttons are just static i would recommend using images, theres no harm doing it like this.
<span>Your button</span>
then you can use the css to set the image background.
.home{display:block; height:20px; width:40px; background:url(image.gif);}
and your also gonna need to hide the text in the span.
.home span{display:none;}
Theres no harm in using simple text either, most of the time its personal preference.
Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.
As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.
you can put the image as backgroud...
It looks like a button, but it is not an input element. How can such an element be created?
Maybe it is a button element? Or img element with a image of a button?
it can be a <button>
It can be anything with the right border
it can be an image.
You could use an image, or you could style a div (or other block level element) around some text. You could then make it behave a bit more "buttony" with javascript effects. Quite why you'd want to do that is beyond me though.
They're normally created by adding CSS styling to a standard hyperlink, sometimes in combination with javascript. Check out Top 10 CSS buttons tutorials.