Thursday, December 24, 2009

Need help with CSS coding....image sizing?

I am trying to add css style to a single page which also links to an external style sheet.


I think I have the code more or less correct, but it doesn't work as intended. I am probably doing something out of order or missing a bit of code.


What I want the code to to is to display three small scale ';thumbnail'; photos in the right column of a table and each photo link to a larger version in a new window. I made it work with html tags, but I need to use css now. See the code below:








%26lt;head%26gt;


%26lt;link rel=stylesheet type=';text/css'; href=';mystyles.css';%26gt;


%26lt;style type=';text/css';%26gt;


img.thumbnail{height:172px, width: 220px}


img.large{height:666px, width:1000px


%26lt;/style%26gt;








%26lt;h1%26gt;%26lt;CENTER%26gt;


MY IMAGES


%26lt;/h1%26gt;%26lt;/CENTER%26gt;


%26lt;/head%26gt;





Below is just the tags for the third column:


%26lt;TD%26gt;%26lt;/br%26gt;%26lt;/br%26gt;%26lt;/br%26gt;





%26lt;a class= ';large'; href=';images/bluewhaletail.jpg'; target=';_blank'; /a%26gt;


%26lt;img class=';thumbnail'; src=';images/bluewhaletail.jpg'; class=';thumbnail';/%26gt; %26lt;/br%26gt; %26lt;/br%26gt; %26lt;/br%26gt;


%26lt;a class= ';large'; href=';images/wolfinshade.jpg'; target=';_blank'; /a%26gt;


%26lt;img class=';thumbnail'; src=';images/wolfinshade.jpg'; class=';thumbnail'; /%26gt; %26lt;/br%26gt; %26lt;/br%26gt; %26lt;/br%26gt;


%26lt;a class= ';large'; href=';images/parrotinthesky.jpg'; target=';_blank'; /a%26gt;


%26lt;img class=';thumbnail'; src=';images/parrotinthesky.jpg'; /%26gt; %26lt;/br%26gt; %26lt;/br%26gt; %26lt;/br%26gt;








%26lt;/TD%26gt;





Any pointers would be appreciated.Need help with CSS coding....image sizing?
Ok first your missing a closing bracket in the inline styles that may be causing some problems.





Another thing that you should do it try to get all the styles onto one sheet, so put the inline style into a style sheet. The coding should also be like img. thumbnail{height:172px; width:220px;} use a ; not a ,





And finally css to re size an image isn't such a good idea, instead you should have the img tag written like this.





%26lt;img class=';thumbnail'; height=';172px'; width=';220px'; src=';images/parrotinthesky.jpg'; /%26gt;





Thats how its normally done, and its more recommended to use percentages so 50% or 20% instead of 172px...its just a standard for cross browser compatibility. Give that a try.





CSS is used to style or display content, not really re-size stuff like an image.

No comments:

Post a Comment