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>
donboe
November 24, 2010, 11:11pm
2
Is this some kind of a gallery with descriptions?
Edit: Sorry welcome at Sitepoint
Hey donboe, thanks for your welcome
Yeah, it is a gallery of sorts. Needs to be coded in the way I have described though
donboe
November 24, 2010, 11:43pm
4
Maybe something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 1200px;
margin: 20px auto 0;
}
.col {
width: 300px;
float: left;
text-align: center;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: yellow;
}
.four {
background: green;
}
.col img {
margin: 10px;
display: block;
}
.col p {
width: 280px;
margin: 0 10px 10px 10px;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="col one">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col two">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col three">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col four">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
</div>
</body>
</html>
It’s just basic. I used background colors to indicate the columns. If you have any questions, just ask
That’s great, thanks. 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.
The images will range from around 50 pixels wide by 100 pixels high and 150 pixels wide and 150 high. The images will be hardcoded:
<!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>
donboe
November 25, 2010, 12:19am
6
Will those images coming from a database or just hard coded? Are those size differences mayor or minor?
They will be hard coded. The images will range from around 50 pixels wide by 100 pixels high and 150 pixels wide and 150 high.
donboe
November 25, 2010, 7:18am
8
Then you might as well use the same what I posted before with a few adjustments:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.wrapper {/* changed from id to class since you're gonna use it more than once */
width: 1200px;
margin: 20px auto 20px;
position: relative;
overflow: hidden;
background: #BDBDBD
}
.col {
width: 300px;
float: left;
text-align: center;
}
.col img {
margin: 10px auto 10px;
display: block;
background: #FF0000;
}
.col p {
width: 280px;
margin: 0 10px 10px 10px;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="col">
<img src="images/test.png" width="50" height="100" alt="" />
<p>Text<br />
More text</p>
</div>
<div class="col">
<img src="images/test.png" width="150" height="100" alt="" />
<p>text</p>
</div>
<div class="col">
<img src="images/test.png" width="150" height="150" alt="" />
<p>Text<br />
More text</p>
</div>
<div class="col">
<img src="images/test.png" width="50" height="150" alt="" />
<p>text</p>
</div>
</div>
<div class="wrapper">
<div class="col">
<img src="images/test.png" width="100" height="100" alt="" />
<p>text</p>
</div>
<div class="col">
<img src="images/test.png" width="150" height="150" alt="" />
<p>text</p>
</div>
<div class="col">
<img src="images/test.png" width="50" height="100" alt="" />
<p>text</p>
</div>
<div class="col">
<img src="images/test.png" width="150" height="100" alt="" />
<p>Text<br />
More text<br /></p>
</div>
</div>
</body>
</html>
I hope this is what similar to what you mean.
Hi donboe, thanks very much for that. Its close but is it possible to top align the text (so that the text in the rows are all in line at via the top line of text) and bottom align the images (so that the bottom of the images are all in line)?
I copied the table code and can’t see much alignment (cause all the images are the same)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<title>tableythingies</title>
<style type="text/css">
* {
margin: 0;
}
.wrapper {
width: 1200px;
margin: 20px auto;
background-color: #bdbdbd;
}
ul {
list-style: none;
margin-bottom: 5px;
padding-left: 30px;
}
li {
display: inline-block;
width: 200px;
text-align: center;
vertical-align: bottom;
border: 1px solid #f00;
}
li p {
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>
<img src="http://stommepoes.nl/newt.png" width="50" height="100" alt="" />
<p>Text<br />
More text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="150" height="100" alt="" />
<p>text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="150" height="150" alt="" />
<p>Text<br />
More text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="50" height="150" alt="" />
<p>text</p>
</li>
</ul>
<ul>
<li>
<img src="http://stommepoes.nl/newt.png" width="100" height="100" alt="" />
<p>text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="150" height="150" alt="" />
<p>text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="50" height="100" alt="" />
<p>text</p>
</li>
<li>
<img src="http://stommepoes.nl/newt.png" width="150" height="100" alt="" />
<p>Text<br />
More text<br /></p>
</li>
</ul>
</div>
</body>
</html>
donboe
November 25, 2010, 12:06pm
11
Stomme_poes:
I copied the table code and can’t see much alignment (cause all the images are the same)
Hi Stomme
What would you suggest in this case? Which browsers are you referring too? At first I thought of using a min height, but It wasn’t clear to me about how many lines of text we were talking, so I took that out!
“everyone’s favourite browser” == IE
Inline-block needs some hackies and then also FF2 if that’s being supported.
We’ll see if the inline-block begins to do something like what the OP wants.
I’d say if it can’t, the OP may be forced into tables for this, but like I said I couldn’t see what was needed in the table code above because there the images are all the same dimensions.
