I have my web template (made in Photoshop) ready and set to upload to server; however, if user hides/disables images, website will be blank because all the text is on the images.
I have created the CSS layout and want to make a text version of the website, but how do I achieve this without having the text overlap the image?? I want the user to still see a text version of the website in case they disable the images on their browser.
HTML CODE:
<div id="main_divs_container">
<div id="left_div"><img src="images/left_div.jpg" width="249" height="622" alt=""></div>
<div id="index_middle_div"><img src="images/index_middle_div.jpg" width="488" height="622" alt=""></div>
<div id="right_div"><img src="images/right_div.jpg" width="253" height="622" alt=""></div>
</div>
Place the text in your alt= tag.
That should show the text when images are blocked.
(That's pretty much the purpose of the alt tag, to represent content when a image is inaccessible, one way or another)
It won't be pretty when it contains a load of text, though, if it renders at all.
The best option would be to use the images (without text) as background, and add the text on top of it through HTML.
you have to create one html version of website. In photoshop we create template just for reference or client review (just for visual purpose.) . that is not the final output.
You can use a CSS Image Replacement (http://css-tricks.com/css-image-replacement/) to have text and images at the sime time in Your HTML (text not visible).
Than You have to write CSS styles, one that will show the images and hides the text, and second that will do the oposit.
Next just apply right style using JS to detect if user has blocked images or not :)
Related
So, I'm on a wiki, and I'm putting a personal image on. In order to not waste space and possibly risk image policy, I am uploading the image to Imgur and using HTML to put it in my Userspace using this code:
<div style="text-align:left" alt="Chronoculars">https://i.imgur.com/0iTLJ3O.png</div>
However, the file I uploaded is too hi-res, and it displays too large when put on the webpage. I have found several fixes to the problem, but they all require external CSS, which I cannot do because this is all on a wiki.
Can I resize the image inline?
<div style="text-align:left;" alt="Chronoculars"><img style="height:500px; width:500px;" src="https://i.imgur.com/0iTLJ3O.png"></div>
I have a background image in my header area of my site. It's done as a background image for responsive design purposes. I would like however for screen readers to be able to read some information about that area (company info).
I have placed a spacer.gif (ya know...what we used to use in the old days of tabular layouts :) ) in that container and added alt text to it so screen readers will still be able to provide good accessibility.
I haven't found anything that says this is "ok" so I'm wondering about good practice or not. That being said, I also haven't found anything that says it's not good practice "not ok".
Can anyone shed some light here?
TIA
EDIT: I ended up using my own suggestion as I didn't get any feedback to tell me it was a bad idea. I will mark isherwood's answer as the answer because it is certainly a viable alternative.
here's what I did:
<div id="headerImage">
<img src="~/Content/images/spacer.gif" alt="Widgets For Sale Here At This Widget Store" />
</div>
where #headerImage contains the CSS to place my banner image as a background image.
That's probably a valid option, but it adds markup and the need to deal with another image file.
I would use an offscreen text element at the start of the element having the background image:
.offscreen {position: absolute; left: -999em;}
<div class="header-with-css-background">
<span class="offscreen">Information about the image here</span>
Other header content
</div>
You'll probably find that having such a class available proves helpful in a number of situations, such as when a form should have a label but you don't want to show it to sighted users because you have placeholder text on the input.
If you want screen readers to glean info about your company, add that to the alt tag for the background image.
According to the W3.org page, if an image is the only content of a link or form control, " Use the alt attribute communicate the destination of the link or action taken."
Follow this link to more complete discussion of best practices for use of alt tag in web pages, at w3.org
If I have the choice to insert images directly into the html or in the css, say for example a link wrapped in an image I could do either...
<img src="#" alt="" width="" height="" />
Or I could do...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
Which is better and why? Both work as wanted but is there any difference to load times etc, or any considered better practice?
Using images in HTML is better when the image has any contextual meaning... if it is a decorative picture without any contextual meaning, then use CSS. CSS is for presentation, HTML is for content.
The best hint for you to determine whether to use HTML or CSS for a picture is:
If I remove the picture, will the web-page content still make sense?
An image in HTML is meant to provide a visual meaning in context, with a meaningful text fall-back. Using an A element without any content should be avoided since its content will have a relationship with the link, for browsers and web-crawlers (such a Google bot).
Use CSS images only for decorative purposes. Otherwise it can damage your search engine rankings. Always provide an alt attribute for images, determine what will it be imagining that an eventual visitor cannot see any images.
If the image has context, such as a logo, or a photo, I would suggest loading it as an <img> Make sure you are providing alt text for accessibility and SEO reasons as well.
If an image has no context in the scope of the page, then I think the correct place for it, is defined the in the CSS which controls the design.
The whole idea is to separate your presentation from your content as much as you can. An Image can be content, and if so, should be in it.
Generally, I try to put as many images in CSS as possible but Doozer and Mario have good points. If the image is important to the context, it can go in the HTML. I will also use <img> tags when text needs to float around and image.
One thing that CSS can do that <img> can't are CSS image sprites. This is the only real performance benefit that you'll get from one or the other. Performance-hungry websites like youtube.com will combine many images into one large composite image in order to cut down on the HTTP traffic (and therefore the page load times). For example, this is a sprite taken from youtube.com.
Follow principles of semantic HTML. If the image is content, ie a thumbnail, photo, or button, use an <img> element. If it is more a part of the page design, a background image may be more appropriate.
A more specific example: If you are using your image as an icon next to a text link, use a background-image:
<span class="printIcon" onclick="window.print()">Print</a>
.printIcon { background: url(...) no-repeat; padding-left: 20px }
If your image is the button itself, with no text aspect, use an <img> element with an appropriate alt attribute that would work to substitue for the image if it is unavailable.
<img src="printButton.png" alt="Print" onclick="window.print()" />
I am creating and sending HTML e-mails.
I'm using markup like
<table style="background: url('http://example.com/App_Sprites/image.gif');>
However, the images do not appear when I download messages containing this sort of markup from an e-mail client. When I do things like
<img src="http://example.com/App_Sprites/image.gif" />
the images download fine.
I need the image to be a background because I need to show some text over it. Can I use the image tag and position the text over it somehow? Or should using the background image actually be working, and something else may be wrong?
Html emails usally don't download background images.But there is a trick you can do.
<div style="z-index:10;position:relative">your text here</div>
<img src="http://example.com/App_Sprites/image.gif" style="margin-top:-20px" />
play with margin-top number
The background property works on some email clients use this as a reference. This is very useful.
I would avoid using background images and stick to solid colors, the reason why is because not all email clients are going to have this feature and capability to see the background image.
or use base64 directly =)
hm divs are even better than tables
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...