SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: alt tag issue

  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    alt tag issue

    HI there,



    Ive created a page using html/css. It uses a fair few images and ive placed most using css, like this:

    Code:
    background-image: url(image.gif)
    I know images can also be placed like this in the html document:

    Code:
    <img src="image.gif" alt="this tells those browsing without images what it is"/>
    The reason ive placed most of my images using the background selector in my css document is that i want to apply postioning to them.

    The problem is i know that by using css to place images i cant provide any alt text to the images in my html document......or can i??

    Ive thought of a solution which is to create another rule in my css document that applies to the img and then specify its position in the div, like this:

    Code:
    <div id="box"><img src="img.gif" alt="yes images" /></div>
    
    #box { some rules...;}
    
    #box img { positioning rules for images..;}
    Its the only way i can think to get my image in there, positioned as i want with alt info aswell. It seems to heavy on css to me.

    Is there another way to do this? If so, what is it???!!

    Thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing, "background" is a property, not a selector. Please don't confuse the terms.

    I'm glad you're concerned about people who might visit the page without being able to see the images for one reason or another.

    CSS Image Replacement is a possibility, but you shouldn't use it just because you want to use CSS-Positioning to position an image.

    Image Placement vs. Image Replacement (FIR)
    Replacing Text By An Image
    Using Background-Image to Replace Text

    Revised Image Replacement
    ImageReplacement

    I use the Gilder/Levin Method of CSS Image Replacement which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your image is conveying some information that is part of the content of the page, then it should be included in the HTML as an <img /> tag (you can still apply CSS positioning to those, you know!) and meaningful ALT text can be added as usual.

    Only images that serve no meaningful purpose - they are strictly decorative - should be added using CSS background-images. As they are only decorative, they do not require any ALT text.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the replies.

    Kravvitz-terribly sorry to 'confuse' the terms, i'll make sure im more careful in future! I am well aware of the difference between selectors and properties. I have to say i really dont understand the point in having an attitude when posting. So what i got it wrong, chill out!

    I have already considered image replacement, and indeed i could use a spanned p element and the specify an image on the span element in my css but if you'd read my post properly i was looking for a way to achieve this as css leanly as possible. You're suggestion has left me needing a whole new piece of css thats going to have to be-written again and again, specifying a new image everytime. If thats the only/best way to do it then thats great but my question was is there another way?!!

    Buddy- You say i can apply positioning to the img tag. Would that be using the method i outlined in my first post or is there another way that i dont know about?

    thanks again

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino
    Buddy- You say i can apply positioning to the img tag. Would that be using the method i outlined in my first post or is there another way that i dont know about?
    Yes, you would specify a CSS rule to apply to your images, whether it is within a div or not is up to you. However, if the <img /> is in the page content, I wouldn't imagine that you would be wanting to mess with its positioning too much as if it has meaning it will be relating to the surrounding text.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    right , got you. I need to specify positioning on my images. I ve got one div with the text floated left and a diagram on the right so i'll obviously need some positioning.

    Thanks for clarifying that for me

  7. #7
    SitePoint Member
    Join Date
    Apr 2006
    Location
    mw.sn.de
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there should be 3 types of images included in the page

    type 1) layout images as backgrounds
    - no need for ALT
    - define those in CSS

    example:
    Code:
    css
    
    #id_for_some_menu {
    	background: #aaaacc url(gfx/back_menu.png) repeat;
    }
    
    .class_for_repeating_backgrounds {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 10px;
    	height: 32px;
    	background: url(gfx/border_top_left.png) no-repeat;
    }
    type 2) layout images for navigation / information
    - need for ALT
    - define the position in CSS, but use <img alt="info"> in html

    example:
    Code:
    css
    
    #id_for_some_logo {
    	position: absolute;
    	left: 40px;
    	left: 60px;
    	width: 100px;
    	height: 60px;
    }
    
    html
    
    <div id="id_for_some_logo">
    	<img src="gfx/my_logo.png" alt="this is my logo">
    </div>
    type 3) different images belonging to the context
    - need for ALT
    - you CAN define the position in CSS, but use <img alt="info"> in html

    example:
    Code:
    css
    
    .class_for_context_image {
    	position: relative;
    	float: right;
    	padding: 4px;
    	margin: 8px;
    }
    
    html
    
    <div class="class_for_context_image">
    	<img src="gfx/context_picture.png" alt="this is some context picture text">
    </div>
    position: relative; and float: right; are things you CAN do, but dont have to. its just to show you, that you can of course use CLASSES (no ID's) and positioning with every context-image. so you can experiment with the classes.

    f.e.
    use some div as parent, then
    use some div as children with float: left; for the image
    and some div as children with float: right; for the diagram

    Code:
    css
    
    .class_for_parent_div {
    	position: relative;
    	width: 500px;
    }
    
    .class_for_children_div_image {
    	float: left;
    }
    
    .class_for_children_div_diagram {
    	float: right;
    }
    
    html
    
    <div class="class_for_parent_div">
    	<div class="class_for_children_div_image">
    		<img src="gfx/context_image.png" alt="my context image">
    	</div>
    	<div class="class_for_children_div_diagram">
    		<img src="gfx/context_diagram.png" alt="my context diagram">
    	</div>
    </div>
    hope that helps...
    - Annuit . Coeptis /.
    http://www.pro-lamer.de

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino
    I have to say i really dont understand the point in having an attitude when posting. So what i got it wrong, chill out!
    Attitude? I just asked you to not mix up two terms. Mixing up terms in your posts can confuse other people who read them. These are public forums, many people read threads without posting in them.

    Quote Originally Posted by elduderino
    I have already considered image replacement, and indeed i could use a spanned p element and the specify an image on the span element in my css but if you'd read my post properly i was looking for a way to achieve this as css leanly as possible.
    So? You were asking about all of the possible ways to do it, so I suggested it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •