I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.
You could store that in a data-attribute rather than the alt text, and then do something like this:
<span class='responsive' data-alt='foo'>
<img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>
#media only screen and (max-width: 300px) {
.responsive:before {
content: attr(data-alt);
}
.responsive img {
display: none;
}
}
The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.
Another approach, taking this into account would be the following:
<span class='responsive'>foo</span>
.responsive {
background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
text-indent: -9999em;
overflow: hidden;
width: 180px;
height: 180px;
display: block;
}
#media only screen and (max-width: 300px) {
.responsive {
background-image: none;
text-indent: initial;
overflow: initial;
}
}
If you ask me, I like the second approach a lot more.
Went with:
<div class="cobranding">
<span>Brought to you by</span>
<span class="sponsor">Joe Shmoe Inc.</span>
<img src="img/graphics/joe_shmoe_logo.jpg">
</div>
Using CSS to toggle the visibility of the img or the "sponsor" based on responsive breakpoints.
Both of Nico's approaches look good. The only hiccup is that these cosponsor logos are going to be added via a CMS so I want to steer away from any solution involving case-by-case CSS (:before or background-image). For the sake of time I went ahead with the two element strategy above.
(answered for any others looking for a solution)
Important aside:
Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load).
- so any implementation should not break that... (bad for accessibility & SEO).
That said...
If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load.
- you might find this approach along with lazyload useful.
Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )
Related
I've always liked the <hr> tag as a design divider because it's a concise empty tag and you can use CSS to design it with a theme. I like it better than border-bottom because you can set the width to be smaller than the content above it i.e. 25% of the container width.
I almost feel like there should be an empty tag that serves as an anchor point for css design.
I know I can do this with any tag with CSS:
<div class=divider></div>
works just fine but it's not as concise as <hr>
So to me <hr> seems like the best choice on the surface.
Then I read the HTML5 semantic meaning of <hr> which says it is a thematic break. (That seems a little arbitrary) is a title a different theme than it's content? What about semantic cases where I want to have a featured title for a post with a nice box over an image with the title on top and a divider and the sub-title under it?
I want my content to make sense for syndication and I want it to look good if it's opened in an alternate css liked reader on safari which again seems to say <hr> isn't a good choice.
Should I use <span class=divider></span> that seems wasteful.
I have also considered <svg> or <br> but to me <br> seems like an empty line and possible also semantically like a pause like a comma in a sentence.
What's the best way to have a horizontal divider semantically when the primary reason is design preference and not a thematic break?
I think out of your suggestions I would just go ahead and use the separate custom div <div class="box-divider"></div> it's really not that wasteful if it's an integral part of your structure and gives you the max flexibility in terms of what your divider will look like and positioning. You can honestly do the same to an <hr> tag if you customize it's css you can make it look however you want.
A lot of users have commented about using psuedo elements on the element that needs a divider which is a fine suggestion.
.box {
position: relative;
}
.box:after {
content: '';
display: block;
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background-color: green;
}
If it's as simple as a border line you can just use border-bottom: 1px solid black; for example to the element itself and forgo the need for a separate element all together. Add some padding-bottom to control the positioning.
All in all if it's a tricky/custom divider that you need I would just go for the separate div divider or pseudo elements.
I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.
I am trying the technique I found here: #media queries and image swapping
My custom.css file has this code:
.test-mobile-logo{
display: none;
}
#media only screen and (max-width: 500px){
.test-main-logo{
display: none;
}
.test-mobile-logo{
display: block;
}
}
My html file has this code for the logo:
<div class="logo">
<a href="index.html" >
<img src="images/logo-dark.png" alt="" class="test-main-logo">
<img src="images/logo-main.png" alt="" class="test-mobile-logo">
</a>
</div>
The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.
The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css
I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?
You have this style in your css that overrides your display styles.
img {
display: inline-block !important;
}
Remove the !important to make your media-query work.
I agree with #HenrikhKantuni use a background image and change the background image in the css media query.
Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.
as #VincentOrback mentioned just delete the !important from img selector
Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites
i have a problem with z-index on my webpage, i need move shopping bottons to the top -100px but when i try it the button loose the actions not work anymore, i try to use z-index: 99999 but not work too, i need some help! here my page link limitx.panamerik.net
----IMAGES-----
This is the real image:
I need make this:
You're using top value in negative that means there could be problems with the followings:
the parent div is set to overflow:hidden; and don't show the element i.e. hide the element going behind the parent div. (remove overflow:hidden from the parent)
z-index value is not working? You didn't explicitly declared the position. (set position:relative or absolute)
UPDATE: After looking at your screen shots again I realized that you want to display the button to the right of the product images. I'm not sure if this is a good idea, because this theme is meant to be responsive.
But if you really, really, really want to do this then you may try to add the following <CSS> to your custom.css file:
#media only screen and (min-width: 768px) {
.products-grid .actions {
margin: 0;
position: absolute;
top: 100px;
right: -25px;
}
.owl-wrapper {
z-index: 1;
}
.slider-arrows1 .owl-controls .owl-buttons .owl-prev, .slider-arrows1 .owl-controls .owl-buttons .owl-next {
z-index: 2;
}
}
This will work as you can see in the screen shot below, when hovering the button.
I have added #media only screen and (min-width: 768px) because of the responsive nature of the theme. Otherwise, when the browser viewport gets smaller, the buttons would overlap the image. You may want to play a little with this setting and should test it on some mobile devices too.
To learn more about this see this question.
EDIT: I'll leave my original answer below, just in case this may
helpful to someone else in the future...
I see that you use Infortis Ultimo theme, which is a great choice. I don't think you should use <CSS> to move the button. It is better to move the entire <div class="actions"></div> to the top.
The result will look like this:
You can do this by making some changes to the following file:
app/design/frontend/ultimo/default/template/catalog/product/list.phtml
Somewhere around lines 273 to 289 (depending on the themes version) you will find the code for this:
<div class="actions clearer<?php echo $actionsClasses; ?>">
....
</div> <!-- end: actions -->
Note: It is best to first copy the entire list.phtml file to your own sub-theme
and make the changes there.
In your sub-themes list.phtml file just cut the section I mentioned above and move it up to somewhere around line 216 of the file.
Paste it right after the beginning of the <list class="item"> element and before the <div class="product-image-wrapper"....>, just like this:
<li class="item">
<!-- PUT THE CODE HERE -->
<div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">
Also don't forget to add this in your custom.css style sheet:
.products-grid .actions {
margin: 0 0 10px;
}
This should do the trick for you!
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;
}
I'm looking to add an h1 element to my header, however I am using tags in the header (not background images) that replace each other when the screen resolution changes.
I've looked at the technique
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}
...but since my layout is fluid, the background can be seen when the image changes.
Is it even necessary to replace the h1 with an image? couldn't I just do something like:
<h1 class="headerhone">kb-k bwf-kb</h1>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/>
(ignore the php)
and then give h1 a height of zero:
h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
} /*this was suggested to me as an alternative to the -9999px; thing.*/
would this work? Would it have any negative SEO implications or usability issues?
In the second solution, on a screen reader, your h1 content will be "kb-k bwf-kb" and the screen reader won't understand the alt property of the following image is in fact your h1.
For Google, this second solution'll seem you want to hide content in h1 tag : bad.
A visual example would be useful, I don't understand all you want to achieve.
Google has never had anything positive to say about hiding text and using images in <h1> tags so I always hesitate to recommend that as a solution. Your last technique would almost certainly fall under serving up different content to search engines so I also recommend against it.
Your second idea is on the right track though. What you want to do is use responsive design to determine the width of your layout and adjust the image accordingly. In fact, Google has been writing a lot about it in their blog lately. I highly recommend learning how to do it.