PDA

View Full Version : Bottom Align Images and Top Align Text in Row Below With HTML/CSS?


truecalling1234
24 Nov 2010, 05:15 PM
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.



<!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="0" style="border:1px solid black;">
<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 />line two</td>
<td valign="top">text</td>
<td valign="top">text<br />line two<br />line three</td>
</tr>
</table>
</body>
</html>
Wickham
25 Nov 2010, 01:38 AM
In your code you have valign="bottom" for a whole row of td cells which are all the same height, so the valign does nothing. All the images will just fill the whole td cell height. The next row of cells has valign="top" which will be needed if some cells have more text than others, but a CSS list or div or p tag will automatically start at the top.

In answering your question, you can use CSS with a list; two lists might be easier to code. The li tags in each list need float: left; to be side by side. The li tags with images will all be the same height because the images are all the same. The second list of li tags will have content that starts at the top.

For both lists (especially the second) you need to clear the floats so that content below the lists doesn't move up to overlap part of the list.

This work, change the image url and width of the li tag to suit it:-


<!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 name="keywords" content="Wickham" />
<meta name="description" content="Test items" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style-type: none; }
li { float: left; width: 90px; margin-right: 20px; }
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
</style>

</head>

<body>

<ul>
<li><img src="images/orange65x50.jpg" alt="orange" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
</ul>
<div class="clear">&nbsp;</div>
<ul>
<li>Text</li>
<li>Text<br />line 2</li>
<li>Text</li>
<li>Text<br />line 2<br />line 3</li>
</ul>
<div class="clear">&nbsp;</div>
<p>More content here</p>

</body>
</html>

I added in margin-right: 20px to the li tag style to keep them apart.