SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Problems: background transparency & need smaller file size for this module

    Hi,

    I asked for help a week or so ago on a module that I will be using on my article pages of my vBulletin and vBadvanced powered site. I wanted to use a little different module style for the main module to set it apart from the rest. There's only a few choices available and I wanted something more unique. Please take a moment to see the main module on this page: http://www.thefloorpro.com/about.php

    Unfortunately, that module is too dark for my older visitors and members. I came up with something that will look like this: http://www.enterprisejm.com/test/test_article_body.html

    You can see the source code and CSS in the document. I was able to get validation for the XHTML Strict, which I was very happy about, but I have a couple of warnings in the CSS that prevents me from validating that. The warnings are that 2 of my classes don't have background colors. I guess it doesn't recognize "transparent", which is the only way my design works at this time. I hope someone can help me with that and maybe suggest any other CSS that will satisfy the validator.

    The other problem I have is the image file sizes of the module. Of course I have optimized them as well as I can and still make them quality images. I s'pose there's a toss up between the number of nested DIV's and the size of the images. I do have smaller images, but that means more images.

    The current design uses 6 images: the top-left is 1415x26 px; top-right is 26x26; bottom-left is 1415x26; bottom-right 26x26; the left side is 26x10; as is the right side; and the background image is a 5x5. You can see how these images are used by looking at the code.

    I also have other slices of the same image and can make any size slices I want, of course. The additional images I already have are here:





    The tiny center image is doubled for effect.

    Is there a better, more efficient way to style this module using those or other images I can slice from the original graphic? Please keep in mind that this module must be fluid in width and height. Sometimes it will appear on a page with only the one column, but most of the time it will be on a page with 2 columns (this being the larger) and sometimes with 3 columns (also this being the larger center column).

    Your help is appreciated.

    Jim

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    but I have a couple of warnings in the CSS that prevents me from validating that.
    The css validates fine and here is the proof:

    Quote Originally Posted by w3c
    Congratulations!

    This document validates as CSS!

    You have 2 warnings which are warnings only and in no way affect the validation. The warnings are for things that you need to check and make a judgement call on. You could use background:inhereit in those elements which should fix the warnings but in fact makes the page no more stable than it was before.

    All your images only add about to about 7k so I'm not sure what the problem is as 7k isn't too bad. You could use extra divs and repeat the horizontal slices as well and then you could use smaller segments to reduce the image size.

    However that means the redraw time of the page will be slower as all the images need to be repeated so there is a slight trade off here. There's no getting away from the fact that if you want rounded corners and images for the sides then you need enough hooks to hang them on.

    There are other methods that need less divs but they usually involve using larger images.

  3. #3
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The css validates fine and here is the proof: <snip>


    You have 2 warnings which are warnings only and in no way affect the validation.
    Oh wow, that's great. The validator I used while working on my <localhost> copy didn't give me the "Congratulations" announcement. There was originally about 12 warnings and I worked my butt off to get it down to 2.

    All your images only add about to about 7k so I'm not sure what the problem is as 7k isn't too bad.
    I was worried because it goes on a page of my site where it is but one module among several others. For instance: http://www.thefloorpro.com/articles/...stallation.php This is the kind of page this module is intended for. Some pages have a lot of pictures. I s'pose if dialup was as prevalent as it used to be, it would be different. Even so, several of my members still have dialup accounts.

    There are other methods that need less divs but they usually involve using larger images.
    Yes, I tried a number of rounded corner tutorials and suggestions, but nothing was the same (that I found). The large image solutions still didn't account for longer pages. Width issues were fairly easy to deal with, it was the undetermined length that would have required extremely large images for the box. This method seemed to be a good compromise.

    Thanks for your comments, Paul. I appreciate it.

    Jim


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
  •