Forum Moderators: not2easy
Am new here so hello!
Am learning CSS structure now so no tables, I am wondering what is the best way to have a row of small images for product thumbs with text above each one as the name?
Thanks in advance!
[edited by: DrDoc at 5:57 pm (utc) on July 12, 2007]
Without knowing exactly how your page is laid out, I can only provide general options. However, if you are doing away with tables and using purely CSS, you could display each thumbnail in a <div>
<style type="text/css">
#thumbnail {
font: arial .8em #000;
}
</style>
<div id="thumbnail:>
Text<br />
thumbnail
</div>
-or-
You can use a <p> elements and assign it inline (which may be the better option):
<style type="text/css">
#inline p {
display: inline;
font: arial .8em #000;
}
</style>
<div id="inline">
<p>Text 1<br />
thumbnail 1</p>
<p>Text 2<br />
thumbnail 2</p>
And so on....
</div>
Marshall
I WAS IN ERROR! Wrong element. See the post below. It does work.
[edited by: Marshall at 8:01 pm (utc) on July 12, 2007]
Marshall
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text 1 thumbnail 1</title>
<style type="text/css">
#inline ul {
list-style:none;
}
#inline li {
font: arial .8em #000;
text-align: center;
}
#inline span {
float:left;
display:block;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="inline">
<ul>
<li><span>Text 1</span> <span>TEXT 2</span>
</li>
<li><span>thumbnail 1</span>
<span>thumbnail 2</span></li>
</ul>
</div>
</body>
</html>
Another option, if you really don't want to use a table, is something like this:
span, img {
float: left;
}
span {
width: 100px;
}
img {
margin-left: 100px;
}
<span>Item name</span><img>
<span>Item name</span><img>
Make sure the span is the same width as the image ... and that the margin-left for your image is equal to its own width.
they are semantically out the window
Granted. It was just a suggestion. You can also do it using <p> which is more correct and less code.
<p><span>TEXT</span><span>TEXT</span><span>TEXT</span><br />
<span>IMAGE</span><span>IMAGE</span><span>IMAGE</span></p>
Just set the span width with text-align: center.
Marshall
Marshall
No need to "do away" with tables for perfectly acceptable use of tabular data, though ;)
Tabular data?! Have you been sniffing the meta tags? A matter of opinion may be, but who can deny that it's a list of products!? ;)
Marked up as a list and styled accordingly - although keep the text description and image together in the same list item. They naturally go together so should stay together - nice and cosy.
Apart from an appropriately marked up list being (in my opinion) semantically sound in this case, the other graphical advantage of a list is that it will naturally flow to fit your container (as long as the text and image are together). If there isn't enough room on the row for all your products (may be the user resizes their browser, enlarges the text, or is using their phone...?!) then the list items will flow onto the next line and so on. A table is a fixed number of columns wide (as defined by the markup) - if it doesn't fit, it doesn't fit! (Although it is implied that 'a' row is reqd?!)
Anyway, an idea for this code might be...
First, decide how the HTML should be:
<div class="products">
<ul>
<li><div>Product Name 1</div><img src="img/product1.jpg" alt="Product Info 1"></li>
<li><div>Product Name 2</div><img src="img/product2.jpg" alt="Product Info 2"></li>
<li><div>Product Name 3</div><img src="img/product3.jpg" alt="Product Info 3"></li>
<li><div>Product Name 4</div><img src="img/product4.jpg" alt="Product Info 4"></li>
<!-- etc... -->
</ul>
</div>
Then CSS accordingly:
.products ul {
list-style:none; /* No bullets */
overflow:hidden; /* Clear the floats */
}
.products li {
float:left; /* Horiz list */
width:180px; /* Room for thm and text */
padding:10px; /* Gap between */
}
.products li div {
text-align:center; /* Centre description */
}
.products li img {
display:block;
margin:0 auto; /* Centre block image */
width:150px; /* All thms the same size */
height:150px;
}... with a Transitional OR Strict DOCTYPE.
Just to add, you might need to
clear:leftthe container that follows your list of products as you may find that it joins them! (Ok, that wouldn't happen to a table! ;)
That works really nice.
Marshall
That works really nice.
Along the same lines as your suggestion above :) - it's just that I think it's important to keep the product name and the product image together - nice and cosy!
Has that quashed the table rebellion?
Has that quashed the table rebellion?
Doubt it!
Marshall
On a side note which has nothing to do with this post, do you know how many time I accidently typed "e; instead of " in my XML's. Brett, can't you change that? ;)
...do you know how many time I accidently typed "e; instead of " in my XML's.
47?
47?
Close! " appears 48 times in the file I am currently working on. Spooky that you were so close.
Marshall
Are we way off topic or what!?
[edited by: SuzyUK at 7:37 am (utc) on July 25, 2007]
Your opinions would be appreciated
[edited by: jatar_k at 2:35 pm (utc) on July 19, 2007]
[edit reason] no urls thanks [/edit]
I went with the method penders suggested, howerver all sorts of issues arise with older versions of IE.
By itself, the code I posted above works fine in both IE5 and 6 with a Transitional DOCTYPE (which you seem to be using). However, I've not tried IE5.5 (?)
You could try adding
display:inlineto the floated
lirule to may be get around any IE float bug?
.products li {
display:inline;
:
:
