My first attempt at CSS - please view and check it's correct.

This site is best viewed in a modern browser with JavaScript enabled.

My first attempt at CSS - please view and check it's correct.

dupy

Hello

I understand the basics of HTML and am now in the process of learning CSS.

I've create a simple table that I'd like for those more experienced to check that it's coded correctly please, and if any chances should be made.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Game Template</title>
<style>
p.tabletext {
	font-family:Arial,Helvetica,sans-serif;
	font-size:1.125em;
	color: rgb(34, 34, 34);
	margin: 0;
}
p.tabletextbold {
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bold;
	font-size:1.125em;
	color: rgb(34, 34, 34);
	margin: 0;
}
table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;
}
td, th {
	border:0px solid black;
	padding:3px;
}
p {
	font-family:Arial,Helvetica,sans-serif;
	font-size:1em;
	line-height:1.5em;
	color: rgb(34, 34, 34);
	margin: 0;
}
ul, li {
	font-family:Arial,Helvetica,sans-serif;
	font-size:1em;
	line-height:1.5em;
	color: rgb(34, 34, 34);
	margin: 17px;
}
.right {
	text-align:right;
}
.left {
	text-align:left;
}
</style>
</head>
<body>
<table>
<tr>
<td>Insert Video</td>
</table>
<br />
<table>
<tr>
<td class="right"><p class="tabletextbold">Platform:</td>
<td class="left"><p class="tabletext">Xbox (PAL)</td>
</tr>
<tr>
<td class="right"><p class="tabletextbold">Game Condition:</td>
<td class="left"><p class="tabletext">Good</td>
</tr>
<tr>
<td class="right"><p class="tabletextbold">Includes:</td>
<td class="left"><p class="tabletext">Manual, case & cover</td>
</tr>
<tr>
<td class="right"><p class="tabletextbold">Xbox 360 Compatible:</td>
<td class="left"><p class="tabletext">No</td>
</table>
<br />
<p>Game Description</p>
<body>
</body>
</html>

One improvement I can think of would be the video. This will be an object (You Tube video using old embed code), that I'm not sure how to center correctly, so for the time being I put it inside a table, which I was able to center.

Any advice and or comments would be most welcome.

Thank you

cbVision

Duby,

I wouldn't use a table at all for this. Try something like this:
http://codepen.io/anon/pen/oBiLD

dupy

Hi cbVision. Thank you for your reply and your code update. Unfortunately as this is an ebay design, I can't use iframes as they are not allowed on ebay.

Is there any reason you wouldn't use table in this instant? I'm familiar with tables should only be used for tabular data, but could see no way around not using a table here. I'm sure it's probably possible, but I am literally learning CSS from scratch at present, so at a very basic level. Also my HTML skills were never that good coming in to this. I made full use of wysiwyg editors in order to achieve the layout I wanted, most of which was made up of tables, so getting out of this habit is difficult, but I am learning.

cbVision

Dupy,

Your table is fine. It sounded like you wanted to learn the best practices which is why I suggested my approach.

Kevin2

Here's some "optimization" on your original table design:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Game Template</title>
<style>
body {
	font-family:Arial,Helvetica,sans-serif;
	color: rgb(34, 34, 34);
}
.tabletext {
	font-size:1.125em;
	margin: 0;
}
.tabletextbold {
	font-weight:bold;
	font-size:1.125em;
	text-align:right;
	margin: 0;
}
table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;
}
td, th {
	padding:3px;
}
p {
	line-height:1.5em;
	margin: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>Insert Video</td>
</table>
<br />
<table>
<tr>
<td class="tabletextbold">Platform:</td>
<td class="tabletext">Xbox (PAL)</td>
</tr>
<tr>
<td class="tabletextbold">Game Condition:</td>
<td class="tabletext">Good</td>
</tr>
<tr>
<td class="tabletextbold">Includes:</td>
<td class="tabletext">Manual, case & cover</td>
</tr>
<tr>
<td class="tabletextbold">Xbox 360 Compatible:</td>
<td class="tabletext">No</td>
</table>
<br />
<p>Game Description</p>
</body>
</html>

Any questions about it, ask away! But given a choice, I'd definitely go with cbVision's code. Much more elegant and modern.

dupy

Great stuff, thanks Kevin2! I should add that the ul, li was present because there will be bullet points within the game description.

I fully agree cbVision's code is very elegant and modern, and I do fully want to learn best practices, but in this instant I am constrained by ebay requirements and as mentioned they do not allow iframes within the HTML for listings.

To understand better what I am trying to achieve, I should explain the bigger picture. As mentioned above, my HTML skills were never great to begin with, and so any HTML pages I created where with the help of wysiwyg editors. You can see an example of my current design, in full here...

http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=251419710652&ssPageName=STRK:MESE:IT

In short, as long as my design looked how I wanted it to look (taking in to account my skill set), and appeared the same across major browsers (which I checked), I was happy. It's quite basic I know, but hope at least it gets across all the important details of product and my services, in an easy to read manner.

This layout however is made up entirely of HTML tables (a no no I now understand). It's made up of two sections which is the game's detail/description (as per this code), and a template which remains the same from game to game. My aim now is to recreate the same design, but using CSS with best practices (where ebay allows). One of the reasons for the re-coding is because I am also in the process of creating my own online store (with the help of a commercial platform) which will sync products cross store and ebay while using the same design.

I hope that gives a better understanding of where I'm at, and what I need to achieve. Thanks again for your help.

dupy

which will sync products cross store and ebay while using the same design.

That should read....'while using the same game detail/description'. The rest is a template that only appears on ebay as the store itself will have it's own design. Sorry if this is double post, but I couldn't see option to edit.

cbVision

The only thing the iframe was doing was embedding a youtube video for an example. It can easily be replaced with the legacy object tag instead. That has nothing to do with the using tables.

dupy

So it does! Sorry, I missed that on first viewing, thank you. I will use your example and try to learn to understand the CSS you've used, in order to use again to create three other table type layouts (game region code, game condition & sale information).

I've already created the rest of the template using CSS properly (I hope), but am stuck with the table type layout of sale information, whereby I'm not sure how to get just the inner cell boarders to show as seen in ebay link example above. Still got a few things to try though, and need review again code again to try and use your CSS code for table type layouts. I'll probably have a few issues, so will post updated code ASAP in hope of picking your brains again.

Thank you

dupy

Is there anyway to reduced the line height please? I've tried adding line height tag withing .feature span, but all this does is shift the headers (Platform, Game Condition etc) either up or down in unison, without actually reducing the space between the lines.

cbVision

You have to apply it to the paragraph ... not the span.

.features p {line-height: 30px;}

dupy

That did the trick, thank you.

Ok so I've got rid off most tables (apart from one) and incorporated your more elegant code It didn't prove to be as difficult as I first feared, and apart from a few odd things I still need to sort out, I have now completed re-coding my template.

In finding the best and easiest way to show you guys, I thought I'd use CodePen, which I opened using cbVision's link above. I then proceeded to copy and paste my code over that which was already present, not realizing it would save the changes. Sorry cbVision, I've replaced it with what I'm currently using, which has a few slight changes.

Right, back to the main template.

My old template
http://codepen.io/anon/pen/pomKy

New and improved
http://codepen.io/anon/pen/Cfmgq

There are a still some things that need addressing.

1. I had to use a table for the 'Sale Information' as couldn't figure out another way due to the right and bottom visable boarders. Would there be a better way of coding this please?

2. As in my old template, I'd like the ordered list aligned completely to the left, but was unable to achieve this. Any ideas please?

3. In CodePen, the font set within CSS of new template doesn't seem to be picked up? Is that normal or is there something wrong with my code?

Overall what do you guys think of new template, in terms of coding compared to the old? When you have a spare moment, it would be great if you could skim through new template to check for errors, possible improvements and optimization. Please note that .hw_ebay_pictures, .hw_ebay_pictures img and hw_ebay_description are to remain, as these pull in details and pictures from my store/ebay platform.

My day is almost over, so I'll pick this up again on Monday. Thanks again for your help and hope you have a great weekend.

dupy

Hello

Anyone got any thoughts on the above please?

Thank you.

cbVision

That's fine to use your table there. While it's achievable in CSS, I think it's OK the way you have it.
You'll want to adjust your "padding-left" on the OL.
```
ol {padding-left: 15px;} (or whatever you want to get it lined up)
```
Remove the <style> tags from the style section in Codepen. These are automatically added and seem to be causing the font error.

cbVision

Also, strong work on the conversion! The only other comment I have is your use of <br /> tags. You're using them to control the spacing. It's optimal to use margins and padding in CSS for spacing instead.

dupy

Thanks cbVision. I'm really pleased with results, considering this is my first real venture in to CSS layouts.

Point noted regarding use of <br /> tags. I'll go over code again once main design is complete, play around with margins and padding and see if I can reduce usage of these tags.

I removed <style> tag from Codepen, and sure enough font is now displaying correctly thank you.

A problem that has me stumped at present is the centering of legacy You Tube video. I'm using the code you provided, but while the div is centered, the object (video) within that div is aligned to the left, and I can't for the life of me get it centered.

http://jsfiddle.net/jarYM/

Does a video have to be inside a div and if so, how can I center it please?

cbVision

Here's the fix:
http://jsfiddle.net/jarYM/1/

Basically, you need to convert the object to a block element, then set the margin on that.

And no, it does not have to be in the DIV.

dupy

Thanks again cbVision.

With regards to 'Product Description', unfortunately I had to remove all <span> tags, as for some unknown reason my commercial store/ebay platform removes these tag automatically from code?! I've discussed this problem with customer service, and appears it was a conscious decision on the part of the developer to disallow such tags, but they couldn't tell me why exactly. The short and sweet of it is that I've had to use a replacement, and so went with span class.

I've gone back over product description and main template, removing all <br /> where appropriate (which were all but one) and replaced with padded. I went with padding over margin as the contents are already inside a layout, so hope that this is correct? It's created quite a bit more CSS as I had to create more classes etc, and not really sure if I should have used classes or span styles, so may need some optimization.

Here are updated versions, along with how they look on both store and ebay. I haven't touched anything on story design yet, other than making sure the product description displays the same in both store and ebay, as they share the same HTML.

Product Descrition
http://jsfiddle.net/F4K8P/

I'm not sure why the bold titles/details line height is so wide here in jsfiddle? Although they are spaced correctly in store and ebay, I have had to use line height of 1.2em for store and 1.7em for ebay to space the same. I thought I'd use px instead to keep it consistent, but even then I have to use different valves to create the same spacing. I read that it's not best practice to use em and px if em is used to specify font size (as is the case here), so opted to return to em for line height as well.

Main Template
http://jsfiddle.net/mSZF5/

Store
http://dupfold.highwire.com/product/187-ride-or-die-pal-microsoft-original-xbox-game-system-link-1-4-complete

ebay (old code)
http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=251425543437&ssPageName=STRK:MESE:IT

ebay (new code)
http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=261362369669&ssPageName=STRK:MESE:IT

When you have a space moment cbVision (or anyone else), if you could skim over code and see if any improvements or optimization is needed, that would be much appreciated, thank you.

Again, my week is almost done, so hope you all have a great weekend.

dupy

I'm gone over main template and optimized as best I could. I also added graphical div to break up sections such as 'Game Region Codes' and 'Game Conditions'. Is it ok to use a div in this way?

Main Template Optimized
http://jsfiddle.net/mSZF5/1/

Thank you.

cbVision

Yep, I think that's fine for handling a divide. You can probably style an HR tag the same way to make it more semantic since that's what HR's are for.