Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23

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

  1. #16
    Join Date
    Jan 2014
    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.


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

  2. #17
    Join Date
    Sep 2008
    Akron, OH
    Here's the fix:

    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.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

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

    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


    ebay (old code)

    ebay (new code)

    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.

  4. #19
    Join Date
    Jan 2014
    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

    Thank you.

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

  6. #21
    Join Date
    Jan 2014
    Many thanks! I never knew about the HR tag, so have now changed for div to HR.

    With regards to the actual layout of the CSS and HTML code, is there a standard? For example with CSS, should all classes be grouped together, ID's together etc? My CSS code is laid out fairly nicely, so it's easy to find items and edit by just looking at the code, but my HTML code however is a different story and a bit of a mess. When I've tried to make HTML code more presentably, I've often ended up affecting actual output. Because this relates to the actual layout of code, I've found this topic a little difficult to Google, with results only ever relating to actual output, instead of just the code. If there is a standard, could you point me to an example please?

    Thank you.

  7. #22
    Join Date
    Sep 2008
    Akron, OH
    I'm not sure if there's necessarily a "standard." There are definitely some best practices, but it's really up to you to decide what makes most sense with your workflow. I typically like to keep elements together in the same section. For example, I'll have a heading section, footer, left column, content, etc.

    Here's a good read:
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  8. #23
    Join Date
    Jan 2014
    Good read, thank you, although I must admit a lot of it I found hard to understand, but it did help with organizing my code better.

    One thing that did interest me was "Keep a library of helpful CSS classes", although it states that this should only really be used for debugging, but wondering why it couldn't be used for more common things? For example, looking through my code I noticed I use font-weight: bold in four different classes. Would it therefore be a better practice to simply create a 'bold' class and then make use of the using multiple classes for elements? This would cut down on CSS code, although does add another class name to HTML. Some could be done for margin: 0 of which I have in seven different classes.

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12697 seconds
  • Memory Usage 2,933KB
  • Queries Executed 15 (?)
More Information
Template Usage (35):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates