15 replies [Last post]
Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

hi all,

I have a list of products that's currently set up as a table. client wants it to be alphabetical, and they add and remove products constantly, so modifying it is a royal pain.

I'd like to convert it to divs, so every time a product is added, it's just a matter of inserting a div in the right spot..

my idea was to use a case div and then a product div and float them to the left.. however the alignment is really screwed up and I'm not sure why.. here's the code

#box {
   width: 574px;
   height: auto;
}

#product {
   position: static;
   width: auto;
   min-width: 100px;
   max-width: 180px;
   height: auto;
   float: left;
   text-align: center;
   margin: 10px 10px 10px 10px;
   border: 1px solid #0000ff;
} 

only reason for the border is so I can see what's going on..

ideally all products would shift to the far left, and there'd be about 4 products per line..

thanks in advance for any help, please let me know if I'm allowed to post a link to the page in question and I'll do so

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 hours 59 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

list of products using divs instead of table cells

please do post a link to the page in question, it will make it easier for us to understand the problem.

Also, you shouldn't need position:static as it's the default rule for divs.

Verschwindende wrote:
  • CSS doesn't make pies

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

thanks, I just did that by trial and error, first I tried pos relative then absolute then finally switched it to static..

here's a link to the broken page, the original is still using tables:

http://fadtoys.com/collectors_corner-broken.shtml

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

list of products using divs instead of table cells

Hi there

You can only use <div id="whatever"> once on a page - you need to change the multiple ones to class instead.

I don't know if you've seen this article http://www.alistapart.com/articles/practicalcss/ but I've used this technique to do the same sort of thing and it works nicely.

Also - I don't think you have a complete doc type declaration there - you might be better off getting the full one with the link in it like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Depending which standard you're coding to. This may affect the way your site looks on various browsers.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

list of products using divs instead of table cells

Firstly, you can only use an id once per page, so change #product to a class (.product). Edit - HellsBells beat me to it Smile
Second, you're almost there. I would make a couple of changes, however. I'd set each div to a fixed height and width (a fixed height minimum) so that they look more uniform and don't bunch up as in your example. IE doesn't understand min or max width anyway. You also don't need to set width or height to auto - that's the default setting. So your CSS would look like:

#box {
   width: 574px;
}

.product {
   width: 123px;
   float: left;
   text-align: center;
   margin: 10px; /* shorthand */
}

And change your html so that the divs are classed, not id'd.

Finally, it may be even more semantically correct to use an unordered list instead of just repeating divs. You could simply add and remove the lis as necessary.

One more thing: you should be using a full doctype to keep IE in standards mode.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

list of products using divs instead of table cells

Sorry! Spent too long dawdling out an edit about dtds and Wolfcry beat me to it!

So that makes us even.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

thanks for the tips! I didn't know that I could only use a div once per page.. that's interesting.

I put in the doctype declarations and it broke the page, don't ask me why.. the person who designed this entire site (I inherited it a couple of weeks ago) was VERY sloppy and I'm not interested in fixing hundreds and hundreds of pages right now... so for the time being I just removed the doctype

Anyway please take a look at the latest revision -- the only problem now appears to be the heights -- should I set the product heights to be as high as the highest product?

Also how would I do this using an unordered list? If that's better then I won't mind switching it...

oh one other thing -- some of the images are too wide for their block, and as you see they're overwriting their section.. is there a way to fix this, or should I just make sure all images are the proper width? some of them really do have to be wider.. but I don't want to set ALL of them to be that wide, cause then I'll never get 4 per row...

thanks again, I'm still learning this CSS positioning stuff

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

list of products using divs instead of table cells

Mike521 wrote:
thanks for the tips! I didn't know that I could only use a div once per page.. that's interesting.

You can use a div multiple times on a page, just a div class however. (<div class="blah">, and in your CSS: .blah {attribute: value; }

Div id's are once per page.

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

err that's what I meant Smile thanks again

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

list of products using divs instead of table cells

I can't believe I left the height out of my example! :oops:

Quote:

Anyway please take a look at the latest revision -- the only problem now appears to be the heights -- should I set the product heights to be as high as the highest product?

Yes, you should - probably 200px.

Quote:

oh one other thing -- some of the images are too wide for their block, and as you see they're overwriting their section.. is there a way to fix this, or should I just make sure all images are the proper width? some of them really do have to be wider.. but I don't want to set ALL of them to be that wide, cause then I'll never get 4 per row...

Well, to maintain the uniformity I'd keep them all the same width and adjust the images. But if you need to have larger images you could apply a second class to the divs.

So the css could be:

#box {
   width: 574px;
}

.product {
   width: 123px;
   height: 200px;
   float: left;
   text-align: center;
   margin: 10px; /* shorthand */
   font: Arial, Helvetica, sans-serif;
} 

.wider {
    width: 180px;
    /* or maybe auto to adjust to different width pics
        or 266px to be equal to two smaller divs */
}

Then the html could be (taken directly from source):

<div class="product">
  <p><a href="collectors_corner/dentist-bobble-bank.shtml"><img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"></a></p>
  <p><font face="Arial, Helvetica, sans-serif"><a href="collectors_corner/dentist-bobble-bank.shtml">Dentist Ceramic     <br>
Bobble Bank</a></font></p>
</div>
 
<div class="product wider">
  <p><a href="bobbleheads/dachshund-autograph-dog-bobblehead.shtml"><img src="images/collectors-corner/dachshund-autograph-dog-th.jpg" width="150" height="93" border="0"></a></p>
  <p><a href="bobbleheads/dachshund-autograph-dog-bobblehead.shtml">Dachshund Autograph Dog </a></p>
</div>

And to improve on the code (LOSE THE FONT TAGS):

<div class="product">
  <a href="collectors_corner/dentist-bobble-bank.shtml">
  <img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"><br>
  Dentist Ceramic <br>Bobble Bank</a>
</div>

<div class="product wider">
  <a href="bobbleheads/dachshund-autograph-dog-bobblehead.shtml">
  <img src="images/collectors-corner/dachshund-autograph-dog-th.jpg" width="150" height="93" border="0"><br>
  Dachshund Autograph Dog</a>
</div>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

list of products using divs instead of table cells

Quote:

Also how would I do this using an unordered list? If that's better then I won't mind switching it...

Here's an example with 4 items:

#prodlist li {
    width: 123px;
    height: 200px;
    float: left;
    margin: 10px;
    text-align: center;
}

.wider {
    width: auto;
}

<ul id="prodlist">
  <li><a href="collectors_corner/dentist-bobble-bank.shtml"><img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"><br>Dentist Ceramic<br>Bobble Bank</a><li>

  <li class="wider"><a href="collectors_corner/dentist-bobble-bank.shtml"><img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"><br>Daschund Autograph Dog</a></li>

  <li><a href="collectors_corner/dentist-bobble-bank.shtml"><img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"><br>Elvis Presley Bobble</a></li>

  <li><a href="collectors_corner/dentist-bobble-bank.shtml"><img src="collectors_corner/images/dentist_sm.jpg" width="57" height="100" border="0"><br>Felix the Cat Bobble</a></li>

</ul>

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

thanks so much for all of the help everyone -- I'll be modifying this as mentioned, and will take a look at the unordered list example too

about the font tags, believe me, I hate them! there's thousands of them on this site and I've sort of given up hope of fixing them, but I'll have to start doing it one at a time every time I modify a product... ugh

thanks again

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

looking MUCH better now, thanks to everyone's help here. I did decide to switch over to the unordered list option, it just seems to make more sense

still having some minor issues that I'm trying to figure out. here's the relevant css:

#prodlist li {
    width: 123px;
    height: 170px;
    float: left;
    margin: 10px;
    text-align: center;
	list-style-type: none;
	border: 1px solid #0000ff;
	margin: 5px;
}

#prodlist li p {
	margin: 0px;
}

.noMarg {
	margin: 0px;
	padding: 0px;
}

.wider {
    width: 300px;
} 

first, the .wider class does not seem to be effective in firefox -- it just gets ignored for some reason (I set it to 300px just to see if it would have ANY effect -- normally I want this to be auto). so the products with bigger images are still overlapping other products..

second, for some reason I couldn't set the UL margin by doing this:

#prodlist ul {
   margin: 0px;
   padding: 0px;
}

so I had to make a new class called .noMarg

other than that everything is perfect, I should have these kinks worked out soon I think

latest revision is here: http://www.fadtoys.com/collectors_corner-ul.shtml

thanks again for all the help, I enjoy learning this stuff

edit: I figured out the width thing, rather than using the .wider class, I used an inline style and set the width to auto in each li tag... not very streamlined but for 5 products I don't mind it.

I guess the class setting didn't take precedence over the id setting?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

list of products using divs instead of table cells

Regarding the .wider class,
you're right it wouldn't take because of specificity. That was my mistake. You found a workaround by styling inline. Another way to address it is to make it more specific like:

#prodlist li.wider {
    width: auto;
    }

As for the margin on the ul, you were targeting it wrong. You were trying to style an unordered list within an element (in this case a ul) with an id of #prodlist. It should have been:

ul#prodlist {
    margin: 0;
    padding: 0;
    }

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

list of products using divs instead of table cells

Earlier you said:

Quote:
I put in the doctype declarations and it broke the page, don't ask me why.. the person who designed this entire site (I inherited it a couple of weeks ago) was VERY sloppy and I'm not interested in fixing hundreds and hundreds of pages right now... so for the time being I just removed the doctype

That's understandable, but please remember that for new pages you really should have a doctype. And futhermore, that doctype should be strict. For older pages that you're converting, sometimes transitional is best. Including the full doctype is not only adhering to standards, it puts browsers (IE) into standards adhering mode. I realize your current pages may be too much of mess to use it - but just keep it in mind.

I was just looking at your source - one problem you should correct is the fact that you have two </head> and <body> tags.

Mike521
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2004-10-20
Posts: 26
Points: 0

list of products using divs instead of table cells

UGH I didn't even notice that -- thanks a ton.

You guys are very good with css and standards -- I look forward to knowing that much about them

I'll start using the doc type too -- up until this point I didn't know the doctype decs actually served a function

thanks again for all the help