leafchaser
New Member
Hey everyone,
First post here. Can the layout below be replicated with HTML/CSS? I've been trying to use <ul> and <li> but am struggling.
EDIT: I should have explained this better in my first post but I will need to put another row of images and text below this initial row. However, the image in cell one in the first row may be wider and/or higher than the image in the second row. The difference between images would need to be the same no matter on the width and/or height of the image (hope this all makes sense!). Here is how it might be done with tables:
First post here. Can the layout below be replicated with HTML/CSS? I've been trying to use <ul> and <li> but am struggling.
EDIT: I should have explained this better in my first post but I will need to put another row of images and text below this initial row. However, the image in cell one in the first row may be wider and/or higher than the image in the second row. The difference between images would need to be the same no matter on the width and/or height of the image (hope this all makes sense!). Here is how it might be done with tables:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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 black;">
<tr style="1px solid black;">
<td valign="bottom" style="1px solid black;"><img src="Tulips.jpg" width="300" height="225" /></td>
<td valign="bottom" style="1px solid 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">image 1 </td>
<td valign="top">text<br />line two</td>
<td valign="top">text</td>
<td valign="top">text<br />line two<br />line three</td>
</tr>
</table>
<p> </p>
<table width="100%" height="400px" border="1" style="border:1px solid black;">
<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">image 2 </td>
<td valign="top">text<br />line two</td>
<td valign="top">text</td>
<td valign="top">text<br />line two<br />line three</td>
</tr>
</table>
</body>
</html>
Last edited: