I have some 10 buttons with image-text and hover states for each.
What I want to do is use background-position, width and height to only show the part of the background image sprite and hover background-position to show the hover style.
I'll also use an image replacement class on the element so that it remains accessible and indexable.
So (measurements are random):
[CSS]
.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, #necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}
[HTML]
Button 1
Button 2
What I want to know is if that is a good way of doing this or should it be done differently, like:
<img src="image.png" width="200" height="30" alt="Button 1"/>
Then with JavaScript swap the image on hover.
Is there any difference between the two in terms of accessibility and robots?
Thank you.
What you are doing is correct. Do not forget to add a display: block; to that link. Something else you can do is putting the actual link text in a span and then positioning that span absolute out of the screen. Like so:
<span>Home page</span>
And in your css file:
a > span {position: absolute; top: -10000px;}
Related
I have an image slideshow that uses JavaScript to apply a class called .hide to all images but the first on page load. This hides all of the images but the first.
I noticed in Internet Explorer 8 (which I have to support) that when the slideshow is loaded, the first image displays correctly (because it's not hidden) but when I click "Next" and the hidden image is revealed, that image has zero dimensions.
After researching online, I saw that for IE 8, elements with display: none will not have any dimensions.
My JavaScript waits for the window and images to load before running, which I thought would allow the images to have a dimension in IE 8 before they were hidden:
window.onload = function() {
// Hide all but first photo
hidePhotos();
addControls();
progressSlides();
};
I read that visibility: hidden or opacity: 0 could be used instead. However, this leaves a lot of white space below the slideshow where the images are hidden.
HTML:
<div class="slideshow">
<figure class="image">
<img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
<figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
</figure>
<figure class="image">
<img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
<figure class="image">
<img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
CSS:
.slideshow {
position:relative;
/* To position slideshow buttons */
max-width:920px
}
.hide {
display: none;
}
.slideshow img {
width:100%;
border-top-left-radius:10px;
border-top-right-radius:10px;
margin-top: 1em;
}
JS Fiddle: http://jsfiddle.net/amykirst/tnLLhu4j/
I tried to use absolute positioning to position the images at the top of the containing .slideshow div, but this caused two problems:
It gave .slideshow a height and width of 0 because its children were all absolutely positioned. The lack of dimensions allowed the slides to go beyond the layout, instead of being contained by .slideshow.
Any text on the page was obscured, so if there was text above or below the slideshow, the slideshow would appear on top of it.
Also, with absolute positioning, I couldn't set the slideshow container (.slideshow) to have a max-width of 100% to contain the images and make them responsive, because the slides were removed from the flow.
How can I hide the images on page load and have them retain their dimensions in IE 8 without leaving a bunch of white space below the slideshow, as opacity: 0 or visibility: hidden would do?
I found a solution that worked.
.hide {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
}
I needed the hidden image to span the entire width of the slideshow (otherwise, when the hidden class was removed, IE 8 gave the image zero dimensions), so I used left and right positioning of 0.
Because absolute positioning was only used for elements that were hidden, it didn't cause problems with the layout that I mentioned earlier because only the hidden elements were affected.
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
http://jsfiddle.net/gvBM8/
Whenever you scroll over an image and it grows to the desired effect there is a white border that grows along the bottom as well. Is there anyway to stop this from happening?
Also, I am new to using CSS3 across multiple browsers, how would I set it up to be moz/IE compatible?
Thank you
HTML
<div class="col4 grow"> <img src="http://www.placecage.com/200/300" width="100%">
Apply img this css property:
img {
display: block;
}
Instead of giving to the tag, add a class to those img elements. that would be better.
Working Fiddle
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
Hy, i'm really stuck. I'll go step by step and hope to make it short.
This is the html structure:
<li class="FAVwithimage">
<a href="">
<img src="pics/Joshua.png">
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Before i paste the css classes, some info about the exact goal to accomplish:
Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.
After resizing, the picture needs to be centered
vertical&horizontal inside a: 68x90
boundaries. So you have an LI element,
wich has an A element, and inside A we
have IMG, IMG is resized by 57% and
centered where the maximum width can
be of course 68px and maximum height
90px. No for that to work i was adding
a SPAN element arround the IMG.
This is what i was thinking:
<li class="FAVwithimage">
<a href="">
<span class="picHolder"><img src="pics/Joshua.png"></span>
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.
I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.
li.FAVwithimage {
height: 90px!important;
}
li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;
}
That's it what's relevant. I have not included the classes for: name,comment,arrow
And now the classes that are incomplete and refer to IMG.
li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning
of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;
}
Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.
li.FAVwithimage span.picHolder img
{
max-width:68px!important;
max-height:90px!important;
}
This is the class wich should shrink the pic by 57% and center inside picHolder
Here I have a drawing describing what i need:
alt text http://lookpic.com/i/169/2U12JC16.jpeg
I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?
The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:
text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;
One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.
For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).
As far I can remember (out of the web dev world for a while), a is an inline element and you can't set its height. You could try adding a display:block to a elements.