I have created a simple non-interactive website using “Build Your Own Website the Right Way “ for a club I belong to. I have been asked to add a page displaying the club clothing (polo shirts, fleece jackets etc. with the club name on them).
My problem is positioning the image, description, price and sizes, each separately. I apologise for asking for such elementary help, but I said I could do it this week .
This is my rubbish code ( I have included the description which I want to include after editing:
<p class=“testborder”><img src=“gallery/clothing gilet.jpg” alt=“Gilet”
width=“112” height=“140” />Russell Workwear Gilet sizes Price £27 XS (34/36) S (36/38) L (40/42) XL (42/44) XXL (44/46)
</p>
<!-- Suitable for 60°C wash and tumble dry
• Stain resistant TeflonTM coating for fabric protection
• Drop tail for a comfortable working fit
• Full zip with storm flap and elastic flexi notch at neck for comfort
• Concealed zipped vertical front pockets with self fabric lining
• Right hand side chest pocket with functional multi compartments
• Large internal A4 document pocket on right hand side –>
Please help!
There are various ways to do that but I assume you mean you want a ‘single image’ and each of the categories listed below the image in a vertical fashion. Well, you could wrap the image within a DIV and then use a list to list the things like; description, price and sizes – like you did in the post.
<div class="testborder">
<img src="gallery/clothing%20gilet.jpg" alt="Gilet" width=
"112" height="140" />
</div><h3>Russell Workwear Gilet</h3>
<ul>
<li>Sizes XS (34/36) S (36/38) L (40/42) XL (42/44) XXL
(44/46)
</li>
<li>Price £27
</li>
</ul>
Is that the type of type of thing you mean? Obviously that is just a crude non-semantic example.
Thanks! I:):)t’s the first time I’ve posted a query to a forum. Without your replyI would have written something very clunky - I was even tmpted to look up how to use tables for positioning. I’ve removed the border which stretches too far out, and will think of something else to separate the items if necessary.
Gland it helped. Although like I said; it wasn’t a very good example I gave but it should help you get started.