HTML/CSS Image Problem.

I’m currently working on a website for a band / college assignment. It’s nothing special so please don’t critisize, I’m well aware the majority of others could do better
If you take a look at the page, along the left column with the images.
The first picture (person) with the white border is done with <img src=”ifhsoif.jpg” border=”2px” etc..> But border=”2px” won’t validate.
I would add a border to my css, but that would also add a border to the image next to it (name/instrument) which doesn’t look very good.
Is there anyway I can create a class in image?
I tried
<img class=”img1″ src=”nfjnsf”>
then adding img1 to my css, but it didn’t work..
Is there a simple way around this?
Thank you.
http://nick.ez-online.co.uk/
Answer #1
http://www.netmechanic.com/news/vol5/css_no5.htm
or
http://codingforums.com/showthread.php?t=56282 (but put a value instead of 0)
Answer #2
These just explain how to add a border to text next to an image and how to remove all borders completely.
I’m trying to add a border to an image with css but make is so that it doesn’t add it to the 2nd image.
Thank’s for your help anyway, I appreciate it.
Answer #3
create a class for img with border 1
create a class called noborder
<img src=”blahblah.jpg” class=”noborder”>
if that doesn’t work you may need to put it in the page you’re working on instead of a .css file in <style> tags
are you using IE7 or FF btw? because it’s working as you want it for me.
Answer #4
I kind of sorted it using <img id=”img1″ srcetc…>
rather than <img class….>
The reason I needed to take it out of the actual html and use css is because it wont validate border=”2px” for some reason, even though it works. And being that it’s for a college project, my whole page needs to be validated with 0 errors to achieve the highest possible grade.
Alhough if you’re good with this sort of stuff, would appreciate it if i could ask you another question..
When I validate it I’m getting an error.
html:
<img id=”img1″ alt=”jay” src=”images/jay.png” width=”111px” height=”145px” /><img src=”images/jay2.png” width=”111px” height=”145px” /><br /> (below are the next 2 images and so on…)
validation error:
Line 32, Column 62: required attribute “alt” not specified
�g src=”images/jay2.png” width=”111px” height=”145px” /> (the end “>” is highlighted red)
✉
The attribute given above is required for an element that you’ve used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element.
Typical values for type are type=”text/css” for <style> and type=”text/javascript” for <script>.
Answer #5
Solved!! Completely forgot to “alt” the second image.. Thank you for your help all the same!
Edit: Double post, Didn’t think.. Sorry
Answer #6
yeah, it’s just if the image doesn’t load or if the user highlights it (not really an issue nowadays, but was for older browsers like links)
just stick alt=”james”, alt=”banner” or anything to describe the image incase for whatever reason the image doesn’t load.
and like i said, it was working on my end with class. also you should use class if there is more than one occurence on the page and id for uniqueness (once again, like alt, it’s just standards and will get you marks if you mention it in your assignment)
you could use class and write up about how it may not work on some browsers and how you’ll have to use user-agent to detect the browser and use a different css file or break validation for IE (if you were using IE and having the problems) to get even more marks.
Answer #7
Thanks for all your help Really appreciate it
I’ll A* it and dedicate it to you ;D X
Answer #8
good luck with it