SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting bloatware to CSS and tables ?

    Hi,

    I would like to convert, what I consider to be 'bloatware' (a HTML doc done in M$ Word) into a 'neat clean' web page that uses CSS and tables.

    The file is currently 22K, and I'm sure, looking at the source code, it could be reduced to, maybe 4k to 5K ??

    Please view this page and the source code at:

    http://theheadlighthospital.com.au/test/

    (it is the index.html of course).

    This page was created by someone else, and although I'm _reasonably_ familar with some aspects of CSS (the main website uses osCommerce), and tables,etc, can some one please advise about how to go about this.

    When I open up the file in Mozilla composer, I can see empty table rows, tables misaligned, table dimensions that seem to do nothing ?? I guess it all goes with the person using M$ Word to create the html file. I'd rather just use Crimson editor, with some stanadrd W3C code at the top, use a CSS, then define the body of the page, with the text, images, and tables.

    I would like to know how long the page takes to load now, because I need to compare it with the "CSS finished product" , and prove to the author just how much 'bloat' is in html files when Word or Frontpage is used to create the file. So, if someone can point me to a 'speed test' site please, it would be much appreciated.

    I'd appreciate some pointers on how to create the CSS, there isn't much in the page, black background colour, yellow text, a few different font sizes, and the table classes to define. I think the page could come right down in size, also the 'right arrow' on the left hand side is the same image, but why the need for different filenames, I'll never know ??

    Thanks,

    Peter

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I saw, there is no need for tables. And very little needed in the way of CSS.

    By simply stripping out MS code, you should be able to reduce the file size to around 2-4kb.

    For starters, strip out all garbage code (e.g. "class=MsoNormal", "![if {bla bla bla }[endif]>", "&nbsp;", "<o:p></o:p>", etc.)

    A better solution would be to start from scratch with plain text. Wrap each paragraph in "<p></p>" and use <img src="" width= height= alt=""> for images and <a href=""></a> for links.

    The style you need are:
    <style>
    Body {background-color:black;color:yellow;FONT-FAMILY: 'Copperplate Gothic Bold'; font-size: 12pt}
    P.Contact{FONT-SIZE: 14pt; COLOR: #336699;text-align:center}
    </style>

    For your contact area simply wrap it in a paragraph like this: "<p class="Contact">bla<br>bla<br></p>"

    This is a rough sketch and is designed for simplicity. I think, however, you get the gist of what is needed. With HTML it is always best to use as simple of code as possible. Any good HTML/CSS book will have a simple cheatsheet chart to quickly remind you how to format the basic tags, which is all that is needed for the demo page you displayed.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kenneth,

    Quote Originally Posted by KLB
    From what I saw, there is no need for tables. And very little needed in the way of CSS.
    Okay, I will see how I go with just CSS.

    I'll follow your suggestions on doing it with paragraphs,etc, stripping out all the M$ code, and build the new one at:

    http://theheadlighthospital.com.au/test/index_new.html

    Thanks,

    Peter

  4. #4
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Well, my first attempt, thanks to those tips, reduced the size from 21,742 bytes, to 2,258 , quite a significant reduction. There are just a few questions now, to try and replicate the original.

    1. How do I centre the images.

    2. Am I better to use "<br><br><br>" or "<p></p>" to space text or images (especially the images at top, and spacing between text and images down further.

    3. How do I get the right arrow to be vetically centered at the left hand side of the yellow bold text.

    4. The yellow (uppercase, yes I think it looks terrible, ..anyway) text is smaller, I guess I just have to up the font size a bit.

    5. After this paragraph:

    Code:
     <p>
       <img src="images/image003.gif" width=111 height=44 alt="Right arrow">
       With over ten years experience, <I>if I cant repair it, no one can !
     </p>
    the remaining yellow paragraphs have stayed in italics. Woops, I see why, no closing italics tag. Hmm, the 'begin' italics tag only appeared when I pasted the code here. In the text editor, it is some strange hex character. Anyway, forget point 5.

    6. What do the characters in the 'alt' tag for the second image ("images/image002.gif") do ?? I tried pasting the source, but it kept converting all the time.

    7. All the contact details are in uppercase, no doubt I just have to re-check the font size.

    Thanks,

    Peter

  5. #5
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Worked out how to center images (doh !! ...), and the italics problem is fixed.

    Just mostly the spacing (best way to do it), and how to have the right arrow vertically centered to the yellow text, and with the yellow text paragraphs being kept in one 'block', like the original one.

    I think "span" was used in the original one to do this ??

    Peter

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering (doh!)

    Worked out how to center images (doh !! ...)
    Well...
    The use of the center element is discouraged since it has a purely presentational character and centering can better be achieved using CSS.

    A block level element can be centered setting left and right margins to "auto" and setting a specific width (or the margins will default to zero); inline elements and inline content (text, images) can be centered with "text-align: center" for the surrounding element.
    IE incorrectly applies this setting to block level elements as well and doesn't support the auto margins, so for IE use text-align for block level content as well.

    Oh, and don't use multiple br elements for spacing things out; using margins / padding (CSS!) for that.
    Regards,
    Ronald.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's one way to align your images using float. I've also changed your doctype to to a correct one

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html dir="LTR" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>The Headlight Hospital</title>
    <style type="text/css">
    body {background-color:black;color:yellow;font-family: 'Copperplate Gothic Bold', Verdana, Arial, Helvetica, sans-serif; font-size: 100%}
    .contact{font-size: 120%; color: #336699;text-align:center}
    #header {text-align:center}
    #header img {
     diplay:block;
     margin-bottom:15px;
    }
    img.arrow {
     float:left;
     clear:both;
     margin:-10px 5px 20px 0;
    }
    #content p {margin:0 0 0 120px;}
    </style>
    </head>
    <body>
    <p id="header"> <img src="http://theheadlighthospital.com.au/t...s/image001.gif" width=683 height=78 alt="The Headlight Hospital"> 
      <img src="http://theheadlighthospital.com.au/t...s/image002.gif" width=369 height=218 alt="New / Used Lenses
    Reco Assy's
    Re-Seals
    Repairs"> 
    </p>
    <div id="content"> <img class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> Because my speciality is repair work, I don't try to sell you change-over 
    	assemblies. </p>
      <br style="clear:both">
      <img class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> My area of expertise is reconstructing damaged headlight assemblies, so 
    	I can repair your headlights at a fraction of the cost of replacement. </p>
      <br style="clear:both">
      <img  class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> With maximum repair prices of around $60.00 (not inc. GST) it is easy to 
    	see why "THE HEADLIGHT HOSPITAL" is the preferred repairer to some of Melbourne's 
    	leading Auto-Recyclers. </p>
      <br style="clear:both">
      <img class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> With over ten years experience, <i>"if I cant repair it, no one can !"</i> 
      </p>
      <br style="clear:both">
      <img class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> I can also offer you same day service and generous bulk repair discounts. 
      </p>
      <br style="clear:both">
      <img class="arrow" src="http://theheadlighthospital.com.au/t...rightarrow.gif" width=111 height=44 alt="Right arrow"> 
      <p> All headlights are returned plastic wrapped, cleaned, marked and warranted, 
    	ready to sell. </p>
    </div>
    <div class="contact"> <img src="http://theheadlighthospital.com.au/t...s/image009.gif" width=451 height=52 alt="Scotts contact details are: "> 
      <p> Fax: (03) 97131509<br>
    	Phone: 0412 661 625<br>
    	Email: <a title="click here to email me" href="mailto:sales@theheadlighthospital.com.au"> 
    	sales@theheadlighthospital.com.au</a><br>
    	"The Headlight Hospital" is based in Melbourne VIC.<br>
    	ABN. 22550034657.<br>
      </p>
    </div>
    </body>
    </html>
    (You can change the absolute image references back to relative.)

    The characters in the alt tag are to enable a new line in the text.

    Don't use points for font-sizes as points are best for print. Use px or use flexible sizes such as ems or %.

    Also don't use strange characters in your text, try to use the standard ones otherwise the page won't validate. (The above page now validates.)

    Hope that helps .

    Paul

  8. #8
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ronald,

    Quote Originally Posted by ronaldb66
    The use of the center element is discouraged since it has a purely presentational character and centering can better be achieved using CSS.
    Okay, I'd rather stick to the standards for CSS. I have been doing a few tutorials, absolutely cool what you can do.

    Quote Originally Posted by ronaldb66
    A block level element can be centered setting left and right margins to "auto" and setting a specific width (or the margins will default to zero);
    .. and I assume I should use pixels, ems or %, rather than points, as Paul suggested.

    Quote Originally Posted by ronaldb66
    .. inline elements and inline content (text, images) can be centered with "text-align: center" for the surrounding element.
    IE incorrectly applies this setting to block level elements as well and doesn't support the auto margins, so for IE use text-align for block level content as well.
    So, the text-align is obviously a std for cross-browser compatibility, thanks.

    Quote Originally Posted by ronaldb66
    Oh, and don't use multiple br elements for spacing things out; using margins / padding (CSS!) for that.
    Okay, unfortunately, my first bit of 'webmaster' stuff was modifying someone elses code, and it was all tables. When I ran it thru a 'tidy validator', there were hundreds of errors, missing closing tags, etc,etc. But, never too late to teach an old dog new tricks. Although, I've used CSS with osCommerce, it was CSS+tables, and I had no idea it can actually be all 'tableless'.

    Thanks,

    Peter

  9. #9
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks alot for posting that code; I had no idea about the doctype, no doubt it's all compliant now.

    Quote Originally Posted by Paul O'B
    Here's one way to align your images using float.
    Does the "header" class referenced here:

    Code:
      <p id="header"> <img src="http://theheadlighthospital.com.au/t...s/image001.gif" width=683 height=78 alt="The Headlight Hospital"> 
        <img src="http://theheadlighthospital.com.au/t...s/image002.gif" width=369 height=218 alt="New / Used Lenses Reco Assy's Re-Seals Repairs"> 
      </p>
    .. reference this CSS spec.

    Code:
      #header {text-align:center}
    or this one ??

    Code:
     #header img {
       diplay:block;
       margin-bottom:15px;
      }
    Quote Originally Posted by Paul O'B
    (You can change the absolute image references back to relative.)
    I don't know what effect that would have, I'd better read up on it.

    Quote Originally Posted by Paul O'B
    The characters in the alt tag are to enable a new line in the text.
    Okay, I see you have done it a better, and more readable way.

    Quote Originally Posted by Paul O'B
    Don't use points for font-sizes as points are best for print. Use px or use flexible sizes such as ems or %.

    Also don't use strange characters in your text, try to use the standard ones otherwise the page won't validate. (The above page now validates.)
    Right, I'll remember that on points, and, yes, I don't like the strange chars, makes the whole thing hard for other people to maintain. That's good that's it's all validated now; I'll post the new code sometime today.

    Thanks for all your help,

    Peter

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Header.. reference this CSS spec.

    Code:

    #header {text-align:center}

    or this one ??

    Code:

    #header img { diplay:block; margin-bottom:15px; }
    The first #header references the element with an ID of header.

    The #header img will reference any image that is contained within an element that has an ID of header.

    Its just like a path to the element in question.

    Paul

  11. #11
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks, that has clarified it for me.

    Peter

  12. #12
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Putting it all in a stylesheet

    Hi,

    I needed to place the CSS specifications in a stylesheet, which works okay, see:

    http://theheadlighthospital.com.au

    but I would like to know if the method I have used is compliant with the CSS standards ??

    Code:
     <title>The Headlight Hospital</title>
     <link rel="stylesheet" type="text/css" href="stylesheet.css">
     </head>
    Thanks,

    Peter

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Looks fine to me

    You can use import method if you want to hide from NN4 etc.

    Read a bit about it here.

    http://www.ericmeyeroncss.com/bonus/trick-hide.html

    Paul

  14. #14
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the links to the hiding methods.

    Peter

  15. #15
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is this the right way to space ??

    Hi,

    I added a left hand menu, but then had problems with the menu overlaying images and text. Having read up on how to alter either UL or LI padding or margins , and trying a few things there, there was no change.

    So I tried this in the stylesheet:

    Code:
     #spaceline {
       text-align:center;
       padding: 1em;
     }
    and then this in index.html

    Code:
     <p id="spaceline"></p>
    Is this the correct way to do it, or just a hack ?? I remember someone said to stay away from "<br>" and use padding or margins.

    The page is at http://theheadlighthospital.com.au

    Thanks,

    Peter

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The correct way would simply to have added a top margin to your content.

    Code:
    #content {margin-top:60px}
    Theres no need for extra divs and classes.

    When you place something absolutely it is removed from the flow and takes up no space as far as other content is concerned. Therefore the margin-top that I put on content will refer to the first statically placed item above which will be your centred image.

    Usually it is better to keep everything in the flow as it will all follow logically. However in this case where you want your image centred and the nav on the list I think the easiest solution is the way that you have done it.

    Paul

  17. #17
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Quote Originally Posted by Paul O'B
    The correct way would simply to have added a top margin to your content.

    Code:
     #content {margin-top:60px}
    Theres no need for extra divs and classes.
    Okay, thanks, the less code in the CSS the better no doubt.

    Peter


Bookmarks

Posting Permissions

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