I know there are similar questions, all of them are old, and I was wondering maybe there are newer techniques.
I have the following HTML:
<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>
What I need is the figure container keeping the room for the img while it's not loaded yet. Without the container keeping the space I end up with twitching content which feels awful.
So far I've came up with the following SASS mixin:
#mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) {
.#{$image-wrapper-class} {
position: relative;
padding-bottom: percentage($y/$x);
}
.#{$image-class} {
position: absolute;
}
}
Being applied like #include image-placeholder(1170, 405, main-slider__slide, main-slider__image); it generates CSS like
.main-slider__slide {
position: relative;
padding-bottom: 34.61538%;
}
.main-slider__image {
position: absolute;
}
The problem is that I have to hardcore the size of my images in the styles and have a separate class for every image of with certain dimensions. Do you guys know better solutions where one general placeholder class would resolve the problem?
As I wrote into comment above - I doubt that there is general solution that will allow you to obtain information about not-yet-loaded element.
However it may be possible to mimic such behavior.
One thing that came in mind is to have tiny resized version of the image to be loaded to be inlined into document and then replaced by actual image upon page load. E.g. your 1170x405 image can be squeezed by 20x factor to 50x20 that will give you ~1kb of image size in jpeg. This image may be stored as <img src="data:" class="image-placeholder"> directly into document and act as a temporary replacement for your actual image. You can scale it to original size using CSS and load original image either by JavaScript or by allowing browser to load it without displaying or by putting it immediately over placeholder. It can be also useful to apply filter: blur(10px) or something like this to image placeholder so it will not look ugly. Actually you can even animate this filter value to provide pleasant visual transition from scaled down placeholder towards original image.
I've used such approach into one of my projects and it was working well.
Hope it will help you.
Related
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.