Bottom Align in Top Row and Top Align in Bottom Row

Hello everyone,

Earliest post here. Can the array below be replicated with HTML/CSS I have been previously trying to make use of < ul> plus < li> however am struggling.

Code:
<! DOCTYPE code PUBLIC " -//W3C//DTD XHTML 1. 0 Transitional//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
< code xmlns=" http: //www. w3. org/1999/xhtml" >
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" />
< title> Untitled Document< /title>
< /head>

< body>
< table width=" 100%" height=" 400px" border=" 0" style=" border: 1px solid ebony; " >
< tr>
< td valign=" bottom" > < img src=" screenshot. png" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" screenshot. png" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" screenshot. png" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" screenshot. png" width=" 300" height=" 225" /> < /td>
< /tr>
< tr>
< td valign=" top" > text< /td>
< td valign=" top" > text< br /> brand two< /td>
< td valign=" top" > text< /td>
< td valign=" top" > text< br /> brand two< br /> brand three< /td>
< /tr>
< /table>
< /body>
< /html>

I should have got explained this improved in my primary post but I will surely have to put another strip of images along with text below this particular initial row. Then again, the image around cell one while in the first row can be wider and/or more than the image within the second row. The difference between images will have to be the same despite on the size and/or height on the image (hope this all is sensible! ). Here is how it is done with tables.

The images will consist of around 50 pixels broad by 100 pixels excessive and 150 pixels large and 150 higher. The images might be hardcoded.

Code:
<! DOCTYPE code PUBLIC " -//W3C//DTD XHTML 1. 0 Transitional//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
< code xmlns=" http: //www. w3. org/1999/xhtml" >
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" />
< title> Untitled Document< /title>
< /head>

< body>
< table width=" 100%" height=" 400px" border=" 1" style=" border: 1px solid ebony; " >
< tr style=" 1px reliable black; " >
< td valign=" bottom" style=" 1px reliable black; " > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" style=" 1px reliable black; " > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< /tr>
< tr>
< td valign=" top" > picture 1 < /td>
< td valign=" top" > text< br /> brand two< /td>
< td valign=" top" > text< /td>
< td valign=" top" > text< br /> brand two< br /> brand three< /td>
< /tr>
< /table>

< p> & nbsp; < /p>
< table width=" 100%" height=" 400px" border=" 1" style=" border: 1px solid ebony; " >
< tr>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 161" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 300" height=" 156" /> < /td>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< td valign=" bottom" > < img src=" Tulips. jpg" width=" 300" height=" 225" /> < /td>
< /tr>
< tr>
< td valign=" top" > picture 2 < /td>
< td valign=" top" > text< br /> brand two< /td>
< td valign=" top" > text< /td>
< td valign=" top" > text< br /> brand two< br /> brand three< /td>
< /tr>
< /table>
< /body>
< /html> 

Stomach muscles using PHP GD to resize the graphics on-the-fly, so there’re all the same
no matter what the size is in the original image. What amount difference could there
always be between the shots

Hi mlseim, thanks for the message. The images will consist of around 50 pixels broad by 100 pixels excessive and 150 pixels large and 150 higher. Unfortunately, this can merely be coded this way

And fat loss make the cells (or divs) a fixed size and center the picture in them

There’s no doubt that that might do the job. I need for you to top align the actual text (so the fact that text in your rows are just about all in line at via the superior line of text) and bottom align the images (so the bottom of your images are just about all in line)

There’s no doubt that that might do the job. Do you have one among what you mean We would like top align the actual text (so how the text in that rows are most of in line at via the most notable line of text) and also bottom align the actual images (so the bottom of this images are just about all in line).

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *