View Full Version : Photo and text layout

Jul 16th, 2010, 05:07 AM
I am doing a staff page. Right now I have it set up as a table, but it is not doing what I would like.

1- The text is too far over to the right. I need to have it moved closer to the photo.

2- Ideally, I would like the text to be positioned at the bottom of each photo, instead of at the middle of the photo as it is now.

#1 is a higher priority. Thanks! Here is the link: www.ohiosmiles.com/staff.htm

Major Payne
Jul 16th, 2010, 07:53 AM
First, correct your coding errors:

CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.ohiosmiles.com%2Fstaff.htm)

40 critical HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ohiosmiles.com%2Fstaff.htm)

You are using an HTML 4.01 Transitional document type. Thos non-closing tags you are closing with a space and a "/" are not needed except when using XHTML 1.0.

The center tags are ok, but are actually deprecated. As well as using table tags for layouts. Might help with that:

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/convert-your-html-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

You might get some idea about photos and captions from this (http://paynelessdesigns.pastebin.com/cqZegxSa). I would not line those straight down the page like you have them if you are going to put captions under the photos.

Jul 16th, 2010, 06:34 PM
Thanks for the response and resources. What tool did you use to find the coding errors?

Major Payne
Jul 16th, 2010, 11:58 PM
I used Firefox's Web Developer add-on (https://addons.mozilla.org/en-US/firefox/addon/60/) which sets you to either the CSS or HTML validatot at the w3c.org.