SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: The big squeeze

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

    The big squeeze

    Hi,

    I need to re-design one page (pricing info). The task seems simple, to simply add a new column, give one column a different colour, and put in 2 column headings. The changes are almost looking okay, but still a few problems, and some things I just don't understand.

    If you could take a look at the current version , which needs to have RRP (recommended retail price) added. I did try to put RRP underneath , but it looks terrible and caused the 'color' information to start to wraparound.

    My frustration with this was the "big squeeze", the table (bordered in blue) in the centre of the form, was fixed, and any attempt to re-size column widths would result in wraparound. Ideally, we want to have a 'wholesale' column and a 'RRP' column.

    Here is the style sheet:

    Code:
    BODY, HTML {
    background: #003366;
    background-image: url(/images/background.gif);
    color: #66CCFF;
    }
    
    H1 { font-size: 12pt; }
    
    P, TD, TR, TABLE {
    font-family: Verdana, Arial, gill, helvetica;
    color: #66CCFF;
    font-size: 10pt;
    }
    
    INPUT, TD.textarea { font-family: fixed; font-size: 10pt; }
    
    :link { color: #66CCFF }
    :visited { color: #66CCFF }
    :active { color: #FFCC33 }
    
    TD.left { color: #66CCFF; background-image: url(/images/cl.gif) }
    TD.right { color: #66CCFF; background-image: url(/images/cr.gif) }
    
    TD.mid {
    color: #66CCFF;
    background: #003366;
    background-image: url(/images/blue-pixel.gif)
    }
    
    p.footer { font-size: 8pt; }
    There is nothing in the above code to do with width or height, it is just fonts, colours and references to image files. The only reference to 'style" is one line:

    Code:
    <table border="0" cellspacing="4" cellpadding="0" style="width: 100%; height: 1662px;">
    I read somewhere that is was not wise to use pixels, but better to use percentages ? Anyway, the changes that I have made are here , which at least has resulted in less wraparound of product description. In the first product row that shows yellow for wholesale:

    Code:
    <tr>
      <td height="78"><b>6" LIGHTSTICK [BULK]<br>
      (10mm X 150mm)</b><br>
      Colours – White, Yellow, Pink, Orange, Blue, Red, Green<br>
      $1.35 per lightstick (minimum purchase applies)<br>
      $33.75 per bag (25 lightsticks)<br>
      Minimum Purchase 100 lightsticks</td>
          
      <td><font SIZE="2" FACE="Verdana, Arial" COLOR="#ffff33" 
       height="78" align="centre"> <b>$1.35<br>each</b></td>
      <td height="78" align="right"> <b>$3.50<br>each</b></td>
    
    </tr>
    what relevance has the height, in regards to the overall table height of 1662px ? What affect do the links shown on the left, and the image (on it's head) shown to the right, have on the middle table, in regards to "trying to squeeze it all in" ?

    Sometimes I wonder if the problems I have had with this, is because the form is a mass of "tables within tables". Even this:

    Code:
    <tr>
      <td height="21">&nbsp;</td>
    </tr>
    seems a waste (another row between each product), ... why not just use a paragraph marker ? The code to define the top of the centre table is as follows:

    Code:
    <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="460">
    <tr>
    <td WIDTH="25"><img SRC="textbox-tl.gif" height=25 width=25></td>
    
    <td WIDTH="410"><img SRC="textbox-mt.gif" height=25 width=100%></td>
    
    <td WIDTH="25"><img SRC="textbox-tr.gif" height=25 width=25></td>
    
    </tr>
    
    <tr>
    <td class="left" width="25">&nbsp;</td>
    <td class="mid" width="410">
    There is a restriction on width (460), and there are the references to the 3 images (top left, middle top and top right), but no "class" for 'right', although it's defined in the style sheet ??

    Despite the '460' restriction (it comes from an include that is used for all the other forms, which all have this blue bordered table in the centre), I have been able to override it:

    Code:
    <table border="0" cellspacing="4" cellpadding="0"
     style="width: 530px; height: 1662px;">
    which appears to be doing what we need. I'm having trouble with the alignment:

    Code:
    <td><font SIZE="2" FACE="Verdana, Arial" COLOR="#ffff33" 
       height="78" align="centre"> <b>$1.35<br>each</b></td>
    <td height="78" align="right"> <b>$3.50<br>each</b></td>
    Isn't there a vertical and horizontal alignment possible, as the 'align' centre just seems to be doing a vertical centre alignment. We want the yellow price to be vertically centered within the row height, and horizontally centered within the 'td'.

    I notice when I view the latest changes , that it is looking okay with Mozilla, but any version of IE I use to view it, and the top right hand blue border is missing a huge chunk.

    Should I use percentages instead of pixels for the dimensions ?

    As this form is the only one that needs "stretching", I guess I should use separate includes just for this form, otherwise the other (blue/middle/bordered) tables on the other forms will be affected.

    Are there any methods I should use to simplify this form ? It takes a fair bit of work to maintain it, and for a novice like me, to even understand it. There seems to be an overkill on table useage and it's hard to tell _which_ table the 'generated' source code is related to.

    Any other improvements that you think could be made to the form layout/presentation, or methods I could use to make maintenance easier ?

    Thanks,

    Peter

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    I think you should go to the W3C site and see the latest changes in html specifications. The align tags have been deprecated and should be included in your stylesheet. For instance:

    td.a {text-align: center}

    I also noticed that you have a closing head tag </head> in with your <body>.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

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

    Quote Originally Posted by Shyflower
    I think you should go to the W3C site and see the latest changes in html specifications. The align tags have been deprecated and should be included in your stylesheet
    Will the new format/standard work okay in all browsers ?

    Quote Originally Posted by Shyflower
    . For instance:

    td.a {text-align: center}
    Will that do a vertical centre alignment or a horizontal centre alignment ? What if I wanted a horizontal centre alignment, and vertival alignment as bottom (effectively just centering something down the bottom of the cell). ?

    Quote Originally Posted by Shyflower
    I also noticed that you have a closing head tag </head> in with your <body>.
    There seems to be a lot of 'junk' code in the form; when I ran it through HTML tidy, I think there were over 100 warnings, so yes, I wouldn't be surprised if there was a </head> in the <body>.

    I recently 'discovered' two includes that are used in every form on the site, and the includes are empty,...... what a waste.

    Many thanks,

    Peter

  4. #4
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    I don't think anything works in all browsers and I don't think it will until the people who create the browsers agree to make them compatible.

    Vertical alignment for td elements can still be place in the html as usual. The W3C seems to have deprecated most elements, such as horizontal alignment, that can be placed into stylesheets.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  5. #5
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will that do a vertical centre alignment or a horizontal centre alignment ?
    text-align: center; will center text horizontally.
    What if I wanted a horizontal centre alignment, and vertical alignment as bottom (effectively just centering something down the bottom of the cell). ?
    Code:
    td {
      text-align: center;
      vertical-align: bottom; 
    }
    As in the example above, I'd put both attributes on the table cell (or row, or the table); text-align and vertical-align are meaningless for an inline-text element like a link.

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

    Quote Originally Posted by Shyflower
    I don't think anything works in all browsers and I don't think it will until the people who create the browsers agree to make them compatible.
    Okay, thanks, I'm mostly thinking of backwards compatibility, some people who visit the website may have old versions of browsers.

    Is there any method, or site to check if the code will be _mostly_ compatible. We have Mozilla here and various versions of IE, but there are others. ?

    Quote Originally Posted by Shyflower
    Vertical alignment for td elements can still be place in the html as usual. The W3C seems to have deprecated most elements, such as horizontal alignment, that can be placed into stylesheets.
    Looks like I should use style sheets more then.

    Thanks,

    Peter

  7. #7
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi 'blufive',

    Many thanks for your tips.

    Peter

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

    I tried the following suggestion:

    Code:
    td {
      text-align: center; vertical-align: bottom;
       }
    ..., not in a style sheet, but tried one cell as follows:

    Code:
    <td><font SIZE="2" FACE="Verdana, Arial" COLOR="#ffff33" 
           height="78" align="centre" valign="bottom"> <b>$1.65<br>each</b></td>
    and it made no difference to the vertical alignment ?

    Also, I have had to "horizontally align" the cell data by doing:

    Code:
    <td><font SIZE="2" FACE="Verdana, Arial" COLOR="#ffff33" 
           height="78" align="centre"> <b>&nbsp;&nbsp;$1.35<br>&nbsp;&nbsp;each</b></td>
    surely there is an easier method than using "spaces" ?

    Thanks,

    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
  •