This is an assignment I'm doing and I have a problem getting the items to display correctly. Basically I've got one class for the products and I need to know how to style them to make them fit in my content box. I want 3 rows of 3 items ideally.

Link to the problematic page is: http://www.rickygray1987.co.uk/index...age_mensshirts

If you need me to post any source code that you can't grab from there or if you want any more info just let me know, I'm pretty new to all this.

Thanks.

Whoa.. Dreamweaver spaghetti code !!

First thing I see right off the bat - you're re-using ID's - ID's MUST be unique. If you want to use the "shirtprice" more than once, make it a CLASS instead.

Your left nav, #nav2, does NOT need to be set to position:absolute, float it left instead.

Also, put your actual navigation into an unordered list, since that what it really is, and NOT in successive paragraphs. You also need to remove all that absolute positioning in the navigation, that's just asking for headaches.

For your shirt images, float them and use margins and padding to space them out. Just be careful of IE's floated margin bugs - www.positioniseverything.net

Thanks a lot, I appreciate it. Now call me lazy if you will but I don't really wanna bother changing all the nav now unless it's really necessary. I definitely get what you're saying though and I'll make sure to do it like that in future.

I'm a bit confused as to why the images are all over the place though, still not entirely sure how to fix them. If it's the nav that's causing problems I'll fix it but I've already set it to float left.

You're still re-using IDs all over the place. ID's HAVE to be UNIQUE, you can only use them ONCE on a page. If you want to re-use CSS rules for multiple elements, use a CLASS.

You're floating images - you must also CLEAR your floats - see our stickies for how to do that.

You also have a lot of shirt images that are not inside your #shirtmaincontent div - so they are all over the place outside of it.

You're also using transparent png images - and IE6 can't do transparent PNGs w/o being forced with some javascript.

Ok thanks a lot, I didn't realise I'd used ID's in the wrong places, everything else seems to be working fine o_O

Option 4 looks like the simplest method of clearing my floats for this, considering I'm not gonna mind a bit of vertical height.

Do I just put this in the html as it is?:

br { clear: both; }

and then style it?

I assume I need to put it in a div or something but where exactly in the code?

I just tried it but I'm not sure it's working until I can get the images positioned right, they look like they're inside the maincontent div to me.

You shouldn't put any styling in the html, all of it should go in the CSS file.
If you're going to use a clearing element like a <br>, then it would be <br class="brclear" > and put the clear:both IN the css file.


You've got a lot of shirts that are sitting there BEYOND your container div.

Ok thanks and yeah the shirts are clearly outside the div but I don't get why from looking at the code.

<div id="shirtmaincontent">

<p id="welcomeheadershirts"><img src="{site_url}images/mensshirtswelcome.png" alt="Men's Shirts"/></p>

<p id="mensshirtswelcome">
Invisage is the best place
on the web for smart men's
shirts. Feel free to browse
our range of high quality
products below. You can also
click on an image to see an
enlarged version.</p>

<p id="mensshirtsmainimage"><img src="{site_url}images/mensshirts.jpg" alt="Men's Shirts Image"/></p>

<br { clear: both; }> </br>

<div class="shirts">

{exp:weblog:entries weblog="shirts"}

<h3><a class="shirttitle" href="{title_permalink="shirts"}">{title}</a></h3>

<img class="shirtimage" src="{shirtthumbnail}"/>

<h3 class="shirtprice">{shirtprice}</h3>

</div>

{/exp:weblog:entries}


</div> <!-- End Of Main Content 1 -->

I do - validate your code - you have a lot of </divs> that are not paired properly.

Wow, that almost made my head explode but all the div errors are gone, maybe I can get the images working now.

Thanks a lot for being patient with me :P

Oh and could you please tell me how to fix this:

1. Line 4, Column 59: required attribute "content" not specified <meta http-equiv="Content-Type: text/html;charset=utf-8" /> ✉
   The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
   Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

I kinda get what it's on about but I'm not sure how to fix it.

That meta tag should be like this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Great thanks, the shirts look like they're behaving normally now but they're still stretching down beyond the div, have I still not got them in the right place? No div errors and they look right to me in the code...

I'm afraid that a large part of the problem has to do with all that unnecessary positioning on virtually everything. You're removing things from the document flow when you do that.

**** that's a pain. Thanks anyways though ^_^