www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

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

  1. #1
    Join Date
    Jan 2014
    Posts
    25

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

    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.

    Code:
    <!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

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    Duby,

    I wouldn't use a table at all for this. Try something like this:
    http://codepen.io/anon/pen/oBiLD
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jan 2014
    Posts
    25
    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.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    Dupy,

    Your table is fine. It sounded like you wanted to learn the best practices which is why I suggested my approach.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Oct 2013
    Posts
    490
    Here's some "optimization" on your original table design:
    Code:
    <!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.

  6. #6
    Join Date
    Jan 2014
    Posts
    25
    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.d...e=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.

  7. #7
    Join Date
    Jan 2014
    Posts
    25
    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.

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    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.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  9. #9
    Join Date
    Jan 2014
    Posts
    25
    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

  10. #10
    Join Date
    Jan 2014
    Posts
    25
    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.

  11. #11
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    You have to apply it to the paragraph ... not the span.

    Code:
    .features p {line-height: 30px;}
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  12. #12
    Join Date
    Jan 2014
    Posts
    25
    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.

  13. #13
    Join Date
    Jan 2014
    Posts
    25
    Hello

    Anyone got any thoughts on the above please?

    Thank you.

  14. #14
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    1. That's fine to use your table there. While it's achievable in CSS, I think it's OK the way you have it.

    2. You'll want to adjust your "padding-left" on the OL.
    Code:
    ol {padding-left: 15px;} (or whatever you want to get it lined up)
    3. Remove the <style> tags from the style section in Codepen. These are automatically added and seem to be causing the font error.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  15. #15
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    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.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles