Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you want it to look good, I’d recommend replacing tables with HTML, then you can style it with CSS easier.
I have just read through my post and the poor grammar lol im very tired!
Its ment to say;
Hello,
I am creating a new eCommerce site and I am after a product table that looks like this.
http://www.puresupplementsonline.co.uk/shop/category_76/Muscle-Building
This is my old site but i like the way the product are layed out.
and this is my new site
puresupps.co.uk/
As you can see the new site tables are basic and they will not align up properly, I really would like to create tables like the old site if this would be to difficult, how could i good about making the new ones look abit more smarter?
Any help appreciated
Thanks
anevins,
Thanks as i am relatively new to all this and my HTML and CSS is basic,
could you give me any examples or no of any templates?
Thanks
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You could just remove the table HTML with each item
E.g
From
<div id="centercontent" align="center">
<table width="100%" border="2" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td align="center">
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"><img class="alignnone size-thumbnail wp-image-582" title="dexaphrine" src="http://www.puresupps.co.uk/wordpress/wp-content/uploads/2012/07/dexaphrine-150x150.jpg" alt="Dexaprine" width="150" height="150"></a><br>
<a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">Dexaprine</a></div>
<p><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">£34.99</a></p>
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/"><img class="aligncenter wp-image-813" title="buy_now" src="http://puresupps.co.uk/wordpress/wp-content/uploads/2012/07/buy_now.png" alt="buy_now" width="101" height="32"></a></div>
</td>
<td align="center">
<div id="newshort"><a title="Cellmass" href="http://www.puresupps.co.uk/products-page/bsn-creatine/cellmass/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"><img class="alignnone wp-image-308" title="cellmass 800" src="http://www.puresupps.co.uk/wordpress/wp-content/uploads/2012/06/cellmass-800-150x150.jpg" alt="cellmass" width="150" height="150"></a><br>
<a title="Cellmass" href="http://www.puresupps.co.uk/products-page/bsn-creatine/cellmass/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"> BSN Cellmass 800g</a></div>
<p><a title="Cellmass" href="http://www.puresupps.co.uk/products-page/bsn-creatine/cellmass/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">£35.99</a></p>
<p><a title="Cellmass" href="http://puresupps.co.uk/products-page/bsn-creatine/cellmass/"><img class="aligncenter size-full wp-image-813" title="buy_now" src="http://puresupps.co.uk/wordpress/wp-content/uploads/2012/07/buy_now.png" alt="buy_now" width="101" height="32"></a></p></td>
</tr>
</tbody>
</table>
</div>
To
<div id="centercontent" align="center">
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"><img class="alignnone size-thumbnail wp-image-582" title="dexaphrine" src="http://www.puresupps.co.uk/wordpress/wp-content/uploads/2012/07/dexaphrine-150x150.jpg" alt="Dexaprine" width="150" height="150" /></a><br />
<a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">Dexaprine</a></div>
<p><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">£34.99</a></p>
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" ><img class="aligncenter wp-image-813" title="buy_now" src="http://puresupps.co.uk/wordpress/wp-content/uploads/2012/07/buy_now.png" alt="buy_now" width="101" height="32" /></a></div>
</div>
To make this HTML look like your table, you could add the following CSS
#center-content{
float: left;
width: 264px;
border: 1px solid black;
}
Let’s start with that.
Thanks anevins,
Already looks alot cleaner, How would i go about putting items side by side?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sorry the above CSS selector is wrong,
it should be:
#centercontent{
float: left;
width: 264px;
border: 1px solid black;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You could add a class to your anchor tag which holds the image, so when we use CSS, we don’t apply styles to all anchor tags.
So from
<div id="centercontent" align="center">
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"><img class="alignnone size-thumbnail wp-image-582" title="dexaphrine" src="http://www.puresupps.co.uk/wordpress/wp-content/uploads/2012/07/dexaphrine-150x150.jpg" alt="Dexaprine" width="150" height="150" /></a><br />
<a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">Dexaprine</a></div>
<p><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">£34.99</a></p>
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" ><img class="aligncenter wp-image-813" title="buy_now" src="http://puresupps.co.uk/wordpress/wp-content/uploads/2012/07/buy_now.png" alt="buy_now" width="101" height="32" /></a></div>
</div>
To
<div id="centercontent" align="center">
<div id="newshort"><a class="img" title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);"><img class="alignnone size-thumbnail wp-image-582" title="dexaphrine" src="http://www.puresupps.co.uk/wordpress/wp-content/uploads/2012/07/dexaphrine-150x150.jpg" alt="Dexaprine" width="150" height="150" /></a><br />
<a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">Dexaprine</a></div>
<p><a title="Dexaprine 60 Tabs" href="http://www.puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.puresupps.co.uk']);">£34.99</a></p>
<div id="newshort"><a title="Dexaprine 60 Tabs" href="http://puresupps.co.uk/products-page/fat-burner/dexaprine-60-tabs/" ><img class="aligncenter wp-image-813" title="buy_now" src="http://puresupps.co.uk/wordpress/wp-content/uploads/2012/07/buy_now.png" alt="buy_now" width="101" height="32" /></a></div>
</div>
Then add the following CSS
#newshort a.img{
display:block;
float: left;
}
Hi,
Thanks for that I prefer the first style is it possible to to have the items 1 and item 2 side by side?
hi,
i had a play about and managed to get them side by side only thing is that one has a boader the other one has not?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The right column doesnt have a border – you need to set
#rightcontent{
border: 1px solid black;
}
hi,
what i have done now is a,
#rightcontent
#centercontent
#leftcontent
but the center one does not sit where it should?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
#rightcontent
#centercontent
#leftcontent
I can see this
<div id=".alignleft">
...
</div>
<div id=".aligncenter">
...
</div>
<div id=".alignright">
...
</div>
Is this what you are referring to?
it was i have change it to,
<div id=”leftcontent”>
…
</div>
<div id=”centercontent”>
…
</div>
<div id=”rightcontent”>
…
</div>
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you want them displayed next to each other:
Rather than using separate IDs on each <div>, give them all the same class, then float them left.
E.g
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
Then add the CSS
.col{
float: left;
}
Excellent Thanks for your time and your help its much appreciated.
I would have been pulling my hair out all week, Wish i had gone to uni to learn this but guess i will have to learn the hard way lol
